Blog

ExtPlayer - An MP3 Player developed with Adobe AIR and Ext JS

November 24, 2008 | 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.

There are 143 responses. Add yours.

D

4 years ago

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!

Steven

4 years ago

WOW! This is great! I’m so happy you didn’t forget Air, because Ext and Air were really meant for each other!

soze

4 years ago

Absolutely stunning!

Gary Gilbert

4 years ago

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

Phunky

4 years ago

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!

mile

4 years ago

This is unbelievable! good work guys.

Sefa Keles

4 years ago

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.

Flat Tire

4 years ago

JavaScript is now the new COBOL.

Daily del.icio.us for November 23rd through Novemb

4 years ago

[...] 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. [...]

Frank

4 years ago

Very nice apps!

Ajaxian » ExtPlayer: Ext AIR classes get an

4 years ago

[...] Aaron Conran has created a new set of AIR classes, as well as an example called ExtPlayer to show them off. [...]

Ajax Girl » Blog Archive » ExtPlayer:

4 years ago

[...] Aaron Conran has created a new set of AIR classes, as well as an example called ExtPlayer to show them off. [...]

Sensible Mind

4 years ago

What about the license? Do we need to buy a license when coding Air apps with Ext?

Bob

4 years ago

The gap between browser and desktop application is now very thin.

Ext Air, de nouvelles classes dont ExtPlayer | Le

4 years ago

[...] : http://extjs.com/blog/2008/11/24/extplayer-air-and-ext/ via [...]

AIR Tutorials and News » AirTutorials Archiv

4 years ago

[...] You can find out more about Ext.Air here [...]

Javascript News » Blog Archive » ExtPl

4 years ago

[...] Aaron Conran has created a new set of AIR classes, as well as an example called ExtPlayer to show them off. [...]

ExtPlayer: Ext AIR classes get an update | Eroarea

4 years ago

[...] Aaron Conran has created a new set of AIR classes, as well as an example called ExtPlayer to show them off. [...]

Web 2.0 Announcer

4 years ago

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,...

JC

4 years ago

Looks great! Nice song selection for the screenshot too

Estetik

4 years ago

?????????? ExtJS ??? ????????? Adobe AIRAlpha-Beta

4 years ago

[...] ????????? ? ????????? ?????????? ExtJS. ?? ???? ??? ??????? ????????????? ????????, ??? ? ?????????????? ? Adobe ??? ????????? ?????????? ? [...]

ExtPlayer: Lettore mp3 con AIR ed Ext | Fidicaro.n

4 years ago

[...] 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 [...]

Hello.World » Ext.air - Blurring the line be

4 years ago

[...] 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 [...]

luven

4 years ago

very cool ! fighting .

David Davis

4 years ago

Nice work Aaron!

ExtJS - Librería Javascript » Blog Archive &

4 years ago

[...] Más información: ExtPlayer [...]

Rich Apps Consulting

4 years ago

Cool Application. Addition to number of good AIR based applications.

Jackson Brown

4 years ago

Great list to examples at: http://www.flexbasics.com

sy

4 years ago

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?

blake

4 years ago

@sy looks like you are using the wrong link. once you have AIR installed. try this link: http://extjs.com/playpen/extplayer/ExtPlayer.air

Manga

4 years ago

[...]Thanks for sharing your work with us! Your theme is just awesome![...]

Mucahid Uslu

4 years ago

interesting article.
i’m trying to develop a radio web site and i wanna use jsext.
http://mucahiduslu.blogspot.com

söve

4 years ago

thanks.

Ben

4 years ago

Hi,

You have misplaced an apostrophe: “Window and App API’s”.

Surely you mean: “Window and App APIs”

Jerry Mason

4 years ago

Great info at: http://www.flexbasics.com

loiy

4 years ago

Hi,
excute me,can anybody help me?
Background set to transparent?

videolar

4 years ago

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?

loiy

4 years ago

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.

eloksal

4 years ago

nice article nice site 10x

haber

4 years ago

thank you

haber haberler

?i?me oyun park?

4 years ago

Ext.air not found in base class…?
how doi make this run?

video

4 years ago

videolar Cool Application.

kaka

4 years ago

transeksuel

4 years ago

ExtPlayer - An MP3 Player developed with Adobe AIR and Ext JS

forum

4 years ago

Thank You

turkce mirc

4 years ago

Thank You ?Ts Great

Ares

4 years ago

??~~~

kang

4 years ago

???????

HawK.TwO

4 years ago

Well, this very nice and wonderful.

?a?????a

4 years ago

????? ??????? ??????. ???? ????? ???????????. ???? ?????????? ????????? ????.

???????? ?????????

4 years ago

??? ????????????: ? ?? ????? ?????????, ? ?? ?????????? ????. ??? ???????!

?????? ???????

4 years ago

??... ???-?? ? ???? ?????? ?? ???????????, ??????? ???????. ??? ? ???? ????

bayrak

4 years ago

thanks very much

konteyner

4 years ago

I executed the player.html i nthe install.zip available in the player blog post.

online sinema izle

4 years ago

It is great 10x

kabin

4 years ago

its great.D:Dd.

oteller

4 years ago

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!

tatil hotel

4 years ago

very good..

haberler

4 years ago

What about the license? Do we need to buy a license when coding Air apps with Ext?

medyum

4 years ago

The gap between browser and desktop application is now very thin.

alt?n

4 years ago

The gap between browser and desktop application is now very thin

rent a car

4 years ago

Congratulations on your nice site

aöf

4 years ago

Very good, congratulations article

cinsellik

4 years ago

I am grateful to you for this great content.

radyo dinle

4 years ago

Devletbaba

4 years ago

Very good information.

Oyun

4 years ago

Danke so fiele.

Televizyon

4 years ago

danke men

Erdogan

4 years ago

Thx so much.

siki?

4 years ago

I am grateful to you for this great content.

siki? videolar?

4 years ago

I am grateful to you for this great content.aöf

dereiçi

4 years ago

Thank You well my admin

istanbul transfer

4 years ago

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!

istanbul tours

4 years ago

Ext.air.VideoPanel enables you to embed flash based video while maintaining the same functionality as an Ext.Panel.

ataturk airport shuttle

4 years ago

What it allows?

ataturk airport transfer

4 years ago

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.

istanbul hotels shuttle

4 years ago

t seems that the line separating Ext and Adobe AIR is vanishing. Thank you guys. We really appreciate that.

ataturk hotels transfer

4 years ago

An easy code greate!
var vp = new Ext.Viewport({
layout: ‘fit’,
items: [{
id: ‘video’,
xtype: ‘videopanel’
}]
});
Ext.getCmp(‘video’).loadVideo(‘sample.flv’);

istanbul tours

4 years ago

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.

shuttle istanbul

4 years ago

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);

ataturk airport transfer

4 years ago

By displaying these notifications at the operating system level it is sure to get the users attention without being lost within a browser tab.

istanbul turkey hotels

4 years ago

ExtPlayer - An MP3 Player developed with Adobe AIR and Ext JS is a good work that I have seen.

istanbul shuttle bus

4 years ago

You can even watch the video fullscreen in high definittion!

ataturk airport transfer

4 years ago

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.

istanbul transfer

4 years ago

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.

istanbul transfer

4 years ago

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);

sultanahmet hotels

4 years ago

Ext.air.Clipboard.setData(‘air:text’, ‘Sample set on the clipboard’);
var data = Ext.air.Clipboard.getData(‘air:text’);

traveller guide

4 years ago

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.

istanbul shuttle service

4 years ago

It is the lastone as a useful I think.

Forum Sitesi

4 years ago

oh thank you

Estetik Plastik Cerrahi

4 years ago

thak you for this comment

3u5

4 years ago

Danke so fiele.

n9k

4 years ago

Thx so much.

m6v

4 years ago

Thank you usefull informations.

aksaray üniversitesi

4 years ago

thank veryy good

medyum

4 years ago

Cool Application. Addition to number of good AIR based applications.

forum sitesi

4 years ago

thank you man

hal? y?kama

4 years ago

thank you very good

Mundduschen

4 years ago

That ist really great ! Thank you !

Santa Luzia

4 years ago

I searched a lot for these applications. Thank you !

OttoMane

4 years ago

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!

tatil

4 years ago

thank u for sharing..am i late to sat something about it ?

haber

4 years ago

its very nice and amazing.

Yasam Kocu

4 years ago

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?

Laptop

4 years ago

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!