ExtPlayer – An MP3 Player developed with Adobe AIR and Ext JS
November 24, 2008 by Aaron Conran
In collaboration with Adobe, Ext is releasing several new enhancements to the Ext.air package today. These include improvements to existing classes responsible for Sounds, Windowing and Database as well as new classes responsible for Notification, Clipboard and File System Interaction. We have also added new samples demonstrating how to use these new features. One of these examples is ExtPlayer, a simple MP3 player, that leverages the new Ext.air.MusicPlayer and Ext.air.Notify classes. You can install ExtPlayer or download the source.
Ext.air.MusicPlayer
Ext 2.0.2 introduced an Ext.air.Sound class, which is useful for playing small sounds such as beep and chimes. In contrast, Ext.air.MusicPlayer is meant for long running sounds such as music and podcasts which you would never want multiple files playing at the same time. MusicPlayer supports all of the basic operations, stop, pause, play and skipTo along with supporting events. The MusicPlayer enables the developer to add music and podcasts to their AIR-enabled Ext application very quickly.
var mp = new Ext.air.MusicPlayer(); mp.adjustVolume(0.5); mp.play(url);
Ext.air.Notify
The new notification class allows you to notify your users with toast or growl-like messages from the operating system. This allows you to notify users that something important has occurred even when your application may not be visible. By displaying these notifications at the operating system level it is sure to get the users attention without being lost within a browser tab.
var msg = 'Title: {0}<br/>Artist: {1}'; var sample = new Ext.air.Notify({ msg: String.format(msg, id3info.songName, id3info.artist), icon: '../famfamfam/music.png' });
Window and App API’s
We added methods and configurations for common window manipulation tasks that did not already exist. Ext.air.NativeWindow now exposes methods to re-order windows, set a window as always on top, and enable full-screen mode. A new singleton, Ext.air.App will allow you to set your application to start on login and get the currently active window.
Ext.air.App.launchOnStartup(true);
Ext.air.Clipboard
Ext.air.Clipboard allows you to interact with the system’s clipboard. Developers can determine if a particular format has data, set the data and get the data. At this point, this is largely a pass through to an existing class from Adobe air.Clipboard.generalClipboard. There may be enhancements or workarounds which Ext will add in the future including integration with drag and drop.
Ext.air.Clipboard.setData('air:text', 'Sample set on the clipboard'); var data = Ext.air.Clipboard.getData('air:text');
Ext.air.VideoPanel
Ext.air.VideoPanel enables you to embed flash based video while maintaining the same functionality as an Ext.Panel. VideoPanel’s can also take part in Ext layout management. This means that you can nest your Video’s in a border layout, add toolbars, buttons, just as you have become accustomed to. You just need to provide the recorded FLV to playback or provide a camera connected to the PC. You can even watch the video fullscreen in high definittion!
var vp = new Ext.Viewport({ layout: 'fit', items: [{ id: 'video', xtype: 'videopanel' }] }); Ext.getCmp('video').loadVideo('sample.flv');
AIR and the Future of Ext.air
Adobe AIR enables web developers to use their existing skill set to create desktop applications. AIR is a cross-platform runtime and allows you to develop your application once and then deploy it across Windows, OS X or Linux. (The Linux runtime is currently in beta status.) Adobe AIR 1.5 was shipped last week at AdobeMAX and features database encryption, an updated WebKit (including SquirrelFish) and Flash Player 10.
Ext will be adding support to encrypt your SQLite database soon. Another exciting technology which was included in Adobe AIR 1.5 is PixelBender. PixelBender allows you to apply lightning fast image or video processing filters to your application. An important feature of AIR that many people are unaware of is that you can mix and match Ajax, Flash and Flex technologies. There are several existing open-source ActionScript libraries which you can take advantage of immediately by including them in your application. A new project from Adobe named Alchemy will even let you compile C or C++ code to the ActionScript virtual machine. You could then consume this code in an Ext application on the AIR platform! The entire Ext.air package including samples can be downloaded here. It will also be included in the next release of Ext.
Posted on November 24th, 2008 at 4:03 am
This is GREAT NEWS! Only last night I started playing around with the previous Ext.air and started creating js notifications. Now I can do ExtJS notifications which are always MUCH better.
Keep up the outstanding work guys & gals!
Posted on November 24th, 2008 at 4:04 am
WOW! This is great! I’m so happy you didn’t forget Air, because Ext and Air were really meant for each other!
Posted on November 24th, 2008 at 4:05 am
Absolutely stunning!
Posted on November 24th, 2008 at 4:48 am
Some great news here! I take it that since the Ext.air.VideoPanel allows for nesting we can add all the normal features like fullscreen, stop, play, pause, sound on/off etc?
Way to go
Posted on November 24th, 2008 at 5:17 am
Oh wow, these new features sound great – its been quite some time since i’ve played with ExtJS but i think i may just have to get playing when i’m out of the office.
Love the work guys!
Posted on November 24th, 2008 at 3:18 pm
This is unbelievable! good work guys.
Posted on November 24th, 2008 at 3:34 pm
This is incredible! Ext.air.Notify class and also the exposed methods in Ext.air.NativeWindow class to re-order windows, set a window as always on top, and enable full-screen mode are very useful. It seems that the line separating Ext and Adobe AIR is vanishing. Thank you guys. We really appreciate that.
Posted on November 24th, 2008 at 9:48 pm
JavaScript is now the new COBOL.
Posted on November 24th, 2008 at 10:00 pm
[...] ExtPlayer – An MP3 Player developed with Adobe AIR and Ext JS – In partnership with Adobe, Ext is releasing several new enhancements to the Ext.air package today. These include improvements to existing classes responsible for Sounds, Windowing and Database as well as new classes responsible for Notification, Clipboard and File System Interaction. [...]
Posted on November 25th, 2008 at 6:27 am
Very nice apps!
Posted on November 25th, 2008 at 6:51 am
[...] Aaron Conran has created a new set of AIR classes, as well as an example called ExtPlayer to show them off. [...]
Posted on November 25th, 2008 at 7:29 am
[...] Aaron Conran has created a new set of AIR classes, as well as an example called ExtPlayer to show them off. [...]
Posted on November 25th, 2008 at 12:23 pm
What about the license? Do we need to buy a license when coding Air apps with Ext?
Posted on November 25th, 2008 at 1:37 pm
The gap between browser and desktop application is now very thin.
Posted on November 25th, 2008 at 6:13 pm
[...] : http://extjs.com/blog/2008/11/24/extplayer-air-and-ext/ via [...]
Posted on November 25th, 2008 at 7:07 pm
[...] You can find out more about Ext.Air here [...]
Posted on November 25th, 2008 at 9:05 pm
[...] Aaron Conran has created a new set of AIR classes, as well as an example called ExtPlayer to show them off. [...]
Posted on November 25th, 2008 at 10:40 pm
[...] Aaron Conran has created a new set of AIR classes, as well as an example called ExtPlayer to show them off. [...]
Posted on November 26th, 2008 at 12:12 pm
ExtPlayer – An MP3 Player developed with Adobe AIR and Ext JS…
[...]In collaboration with Adobe, Ext is releasing several new enhancements to the Ext.air package today. These include improvements to existing classes responsible for Sounds, Windowing and Database as well as new classes responsible for Notification,…
Posted on November 26th, 2008 at 2:14 pm
Looks great! Nice song selection for the screenshot too
Posted on November 28th, 2008 at 6:29 pm
This is incredible! Ext.air.Notify class and also the exposed methods in Ext.air.NativeWindow class to re-order windows, set a window as always on top, and enable full-screen mode are very useful. It seems that the line separating Ext and Adobe AIR is vanishing. Thank you guys. We really appreciate that.
Posted on November 29th, 2008 at 7:39 am
[...] знакомить с новинками фреймворка ExtJS. На этот раз команда разработчиков сообщает, что в сотрудничестве с Adobe они развивают библиотеке в [...]
Posted on December 1st, 2008 at 7:13 am
[...] possibile creare applicazioni davvero interessanti. Ne è l’ennesima prova questa nuova applicazione denominata ExtPlayer e realizzata con l’ausilio dei pacchetti Ext.air: un lettore mp3 che [...]
Posted on December 2nd, 2008 at 3:31 pm
[...] a result of collaberation between Ext JS and Adobe, several impressive enhancements to the Ext.air package were just released. These enhancements allow even better control of AIR and [...]
Posted on December 3rd, 2008 at 1:39 am
very cool ! fighting .
Posted on December 16th, 2008 at 10:50 am
Nice work Aaron!
Posted on December 19th, 2008 at 5:23 pm
[...] Más información: ExtPlayer [...]
Posted on December 26th, 2008 at 10:51 am
Cool Application. Addition to number of good AIR based applications.
Posted on December 29th, 2008 at 8:48 pm
Great list to examples at: http://www.flexbasics.com
Posted on January 12th, 2009 at 4:28 am
I executed the player.html i nthe install.zip available in the player blog post.
the music player wont run?
Ext.air not found in base class…?
how doi make this run?
Posted on January 13th, 2009 at 3:24 pm
@sy looks like you are using the wrong link. once you have AIR installed. try this link: http://extjs.com/playpen/extplayer/ExtPlayer.air
Posted on January 15th, 2009 at 7:59 am
[...]Thanks for sharing your work with us! Your theme is just awesome![...]
Posted on January 17th, 2009 at 8:41 pm
interesting article.
i’m trying to develop a radio web site and i wanna use jsext.
http://mucahiduslu.blogspot.com
Posted on January 24th, 2009 at 6:10 am
thanks.
Posted on January 27th, 2009 at 4:14 pm
Hi,
You have misplaced an apostrophe: “Window and App API’s”.
Surely you mean: “Window and App APIs”
Posted on January 31st, 2009 at 11:45 pm
Great info at: http://www.flexbasics.com
Posted on February 27th, 2009 at 11:45 am
Hi,
excute me,can anybody help me?
Background set to transparent。
Posted on March 1st, 2009 at 11:09 pm
I executed the player.html i nthe install.zip available in the player blog post.
the music player wont run?
videolar
Ext.air not found in base class…?
how doi make this run?
Posted on March 2nd, 2009 at 10:46 am
videolar
step no1.down it to disk.example.It is position on C Disk.continue,you open DOS,and Writing adl application.xml.it is run now.
Posted on March 2nd, 2009 at 2:20 pm
nice article nice site 10x
Posted on March 2nd, 2009 at 2:21 pm
thank you
haber haberler
Posted on March 2nd, 2009 at 2:23 pm
Ext.air not found in base class…?
how doi make this run?
Posted on March 9th, 2009 at 8:43 am
videolar Cool Application.
Posted on March 9th, 2009 at 3:30 pm
Posted on March 12th, 2009 at 6:41 pm
ExtPlayer – An MP3 Player developed with Adobe AIR and Ext JS
Posted on April 1st, 2009 at 5:21 pm
Thank You
Posted on April 1st, 2009 at 5:22 pm
Thank You İTs Great
Posted on April 5th, 2009 at 8:10 am
赞！~~~
Posted on April 28th, 2009 at 4:36 am
咋运行不起来啊
Posted on May 25th, 2009 at 11:10 am
Well, this very nice and wonderful.
Posted on May 27th, 2009 at 4:25 am
Очень хорошая статья. Буду ждать продолжения. Тема безусловно интересна всем.
Posted on May 27th, 2009 at 9:58 am
Все замечательно: и по стилю изложения, и по содержанию тоже. Так держать!
Posted on May 30th, 2009 at 8:55 am
Хм… что-то у меня ссылка не открывается, которую указали. Это у всех так?
Posted on June 13th, 2009 at 3:40 pm
thanks very much
Posted on June 16th, 2009 at 2:23 pm
I executed the player.html i nthe install.zip available in the player blog post.
Posted on June 16th, 2009 at 2:24 pm
It is great 10x
Posted on June 27th, 2009 at 5:52 am
its great.D:Dd.
Posted on July 2nd, 2009 at 11:28 am
Ext.air.VideoPanel enables you to embed flash based video while maintaining the same functionality as an Ext.Panel. VideoPanel’s can also take part in Ext layout management. This means that you can nest your Video’s in a border layout, add toolbars, buttons, just as you have become accustomed to. You just need to provide the recorded FLV to playback or provide a camera connected to the PC. You can even watch the video fullscreen in high definittion!
Posted on July 2nd, 2009 at 11:29 am
very good..
Posted on July 2nd, 2009 at 11:30 am
What about the license? Do we need to buy a license when coding Air apps with Ext?
Posted on July 2nd, 2009 at 11:55 am
The gap between browser and desktop application is now very thin.
Posted on July 5th, 2009 at 10:33 am
The gap between browser and desktop application is now very thin
Posted on July 8th, 2009 at 4:45 am
Congratulations on your nice site
Posted on July 17th, 2009 at 4:32 pm
Very good, congratulations article
Posted on July 18th, 2009 at 9:19 am
I am grateful to you for this great content.
Posted on July 19th, 2009 at 10:19 am
Ext.air.VideoPanel enables you to embed flash based video while maintaining the same functionality as an Ext.Panel. VideoPanel’s can also take part in Ext layout management. This means that you can nest your Video’s in a border layout, add toolbars, buttons, just as you have become accustomed to. You just need to provide the recorded FLV to playback or provide a camera connected to the PC. You can even watch the video fullscreen in high definittion!
Posted on July 21st, 2009 at 7:55 am
Very good information.
Posted on July 21st, 2009 at 7:55 am
Danke so fiele.
Posted on July 21st, 2009 at 7:56 am
danke men
Posted on July 21st, 2009 at 7:58 am
Thx so much.
Posted on July 21st, 2009 at 10:45 am
I am grateful to you for this great content.
Posted on July 21st, 2009 at 11:11 am
I am grateful to you for this great content.aöf
Posted on July 22nd, 2009 at 4:31 am
Thank You well my admin
Posted on July 22nd, 2009 at 6:56 am
You just need to provide the recorded FLV to playback or provide a camera connected to the PC. You can even watch the video fullscreen in high definittion!
Posted on July 22nd, 2009 at 6:57 am
Ext.air.VideoPanel enables you to embed flash based video while maintaining the same functionality as an Ext.Panel.
Posted on July 22nd, 2009 at 6:58 am
What it allows?
Posted on July 22nd, 2009 at 6:59 am
Ext.air.Clipboard allows you to interact with the system’s clipboard. Developers can determine if a particular format has data, set the data and get the data. At this point, this is largely a pass through to an existing class from Adobe air.Clipboard.generalClipboard.
Posted on July 22nd, 2009 at 7:00 am
t seems that the line separating Ext and Adobe AIR is vanishing. Thank you guys. We really appreciate that.
Posted on July 22nd, 2009 at 7:06 am
An easy code greate!
var vp = new Ext.Viewport({
layout: ‘fit’,
items: [{
id: 'video',
xtype: 'videopanel'
}]
});
Ext.getCmp(’video’).loadVideo(’sample.flv’);
Posted on July 22nd, 2009 at 7:06 am
xt 2.0.2 introduced an Ext.air.Sound class, which is useful for playing small sounds such as beep and chimes. In contrast, Ext.air.MusicPlayer is meant for long running sounds such as music and podcasts which you would never want multiple files playing at the same time.
Posted on July 22nd, 2009 at 7:08 am
The MusicPlayer enables the developer to add music and podcasts to their AIR-enabled Ext application very quickly.
var mp = new Ext.air.MusicPlayer();
mp.adjustVolume(0.5);
mp.play(url);
Posted on July 22nd, 2009 at 7:14 am
By displaying these notifications at the operating system level it is sure to get the users attention without being lost within a browser tab.
Posted on July 22nd, 2009 at 7:17 am
ExtPlayer – An MP3 Player developed with Adobe AIR and Ext JS is a good work that I have seen.
Posted on July 22nd, 2009 at 7:20 am
You can even watch the video fullscreen in high definittion!
Posted on July 22nd, 2009 at 7:26 am
A new project from Adobe named Alchemy will even let you compile C or C++ code to the ActionScript virtual machine. You could then consume this code in an Ext application on the AIR platform! The entire Ext.air package including samples can be downloaded here. It will also be included in the next release of Ext.
Posted on July 22nd, 2009 at 7:30 am
As you said.You could then consume this code in an Ext application on the AIR platform! The entire Ext.air package including samples can be downloaded here. It will also be included in the next release of Ext.
Posted on July 22nd, 2009 at 7:32 am
A new singleton, Ext.air.App will allow you to set your application to start on login and get the currently active window. Really simple this one!
Ext.air.App.launchOnStartup(true);
Posted on July 22nd, 2009 at 7:34 am
Ext.air.Clipboard.setData(’air:text’, ‘Sample set on the clipboard’);
var data = Ext.air.Clipboard.getData(’air:text’);
Posted on July 22nd, 2009 at 7:34 am
You could then consume this code in an Ext application on the AIR platform! The entire Ext.air package including samples can be downloaded here. It will also be included in the next release of Ext.
Posted on July 22nd, 2009 at 7:36 am
It is the lastone as a useful I think.
Posted on July 25th, 2009 at 10:45 am
oh thank you
Posted on July 28th, 2009 at 6:46 am
thak you for this comment
Posted on August 2nd, 2009 at 5:59 pm
Danke so fiele.
Posted on August 2nd, 2009 at 6:00 pm
Thx so much.
Posted on August 2nd, 2009 at 6:00 pm
Thank you usefull informations.
Posted on August 3rd, 2009 at 5:51 am
thank veryy good
Posted on August 5th, 2009 at 12:23 pm
Cool Application. Addition to number of good AIR based applications.
Posted on August 14th, 2009 at 8:04 am
thank you man
Posted on August 25th, 2009 at 10:52 am
Alara Hotel Alanya It is the lastone as a useful I think.
Posted on August 26th, 2009 at 12:35 am
These new features sound great, I like the applications. Thank you a lot.
Registry Cleaner Reviews
Posted on August 27th, 2009 at 8:30 am
thank you very good
Posted on October 18th, 2009 at 11:32 pm
That ist really great ! Thank you !
Posted on October 18th, 2009 at 11:33 pm
I searched a lot for these applications. Thank you !
Posted on October 18th, 2009 at 11:34 pm
You just need to provide the recorded FLV to playback or provide a camera connected to the PC. You can even watch the video fullscreen in high definittion!
Posted on October 24th, 2009 at 4:48 pm
thank u for sharing..am i late to sat something about it ?
Posted on October 26th, 2009 at 7:11 am
its very nice and amazing.
Posted on October 28th, 2009 at 7:58 pm
Some great news here! I take it that since the Ext.air.VideoPanel allows for nesting we can add all the normal features like fullscreen, stop, play, pause, sound on/off etc?
Posted on October 28th, 2009 at 7:59 pm
You just need to provide the recorded FLV to playback or provide a camera connected to the PC. You can even watch the video fullscreen in high definittion!
Posted on November 1st, 2009 at 7:10 am
great post to read. congrats.
Posted on November 4th, 2009 at 9:52 am
i download the player air ,but how to user it ,please some one help me???
Posted on November 8th, 2009 at 4:35 pm
Great work. I like the application ! Thanks
Posted on November 11th, 2009 at 3:16 pm
Thank you usefull informations.