[2.2.x, 3.x] ux.Media.plugin.AudioEvents

[hendricd]

Easily add audio (WAV/MP3) playback for any Ext.Component/Ext.Element events (eg. collapse, expand, resize, minimize, mouseover, etc).

Latest HTML5 Audio support is built-in, with fallback to Window Media Player plugin for browsers that don't support it.

Add audio support to Ext.MessageBox, a failed Ajax request, a chart event...
Give your entire layout Audio support with a single plugin instance.
Define a custom audio player if you wish as well.

Simply include the uxmedia.js file in your project, and define what audio streams you'd like to play for any event:

var audio = new Ext.ux.Media.plugin.AudioEvents({
              audioEvents :{
                 beforecollapse : 'demos/media/audio/Utopia Restore Down.WAV',
                 beforeexpand : 'demos/media/audio/Utopia Restore Up.WAV',
                 beforeclose : 'demos/media/audio/Utopia Windows Exit.WAV',
                 mouseover : 'demos/media/audio/Utopia Question.WAV'
              },
              volume : .7
            });

new Ext.Panel({
   title           : 'Test'
   autoHeight  : true,
   width         : 400,
   contentEl    : 'startingout'
   plugins       : audio,
   listeners    : {
     afterrender : function(panel){
         this.audioPlugin.init( panel.body.child('img') );  //add mouseover audio event to an Ext.Element
     }
   }
});
   
//To quiet things down:
audio.disable()
//or
audio.setVolume(.2);

A more elaborate online demonstration is available here.

[mystix]

you da media man!!

[jay@moduscreate.com]

aww man this is HOT!!

[Nash-T]

Nice one.
Do you think this can be used to attach unique audio help files to individual tabs/buttons to augment the tooltips?

This is going on my todo list.

Thanks!
-Tim

[hendricd]

Nice one.
Do you think this can be used to attach unique audio help files to individual tabs/buttons to augment the tooltips?

This is going on my todo list.

Thanks!
-Tim

Now your thinking like an 'audiovox'!

For tabPanel:

var audioClass = Ext.ux.Media.plugin.AudioEvents;
....
{xtype : 'tabpanel',
plugins: new audioClass({
              audioEvents :{
                 tabchange : 'demos/media/audio/swish.WAV',
              },
              volume : .4
            });

For a Button( anything that publishes an event) :

 new audioClass({
       audioEvents :{
           click : 'demos/media/audio/swish.WAV',
      },
      volume : .5
  }).init(someButtonComponent);

For the global tooltip:

if(Ext.QuickTips.getQuickTip()){
 new audioClass({
       audioEvents :{
           show: 'demos/media/audio/swish.WAV',
      },
      volume : .5
  }).init( Ext.QuickTips.getQuickTip() );
}

[Dumbledore]

Wow... really nice!

What kind of mp3 is supported? I have problems to play 128k MP3s...

And it seems there is a problem when using this with the Ext.ux.Livegrid. When i load uxmedia.js there is an error when displaying a new livegrid:

B(D, "mask") is undefined

Bye

[hendricd]

What kind of mp3 is supported? I have problems to play 128k MP3s...

Widest CODEC support on recent HTML5-Compatible browsers is for WAV, OGG, and mp3. But for all browsers, it ultimately depends on what the default audio player defined for use by the browser is (for those media types). I chose WAV because it generally enjoys the most cross-browser support (think Window Media Player and QuickTime).

And it seems there is a problem when using this with the Ext.ux.Livegrid. When i load uxmedia.js there is an error when displaying a new livegrid:

B(D, "mask") is undefined

Have no idea. What Ext version you running all this on?
Might check with LiveGrid's author.

[Dumbledore]

i am running Ext 3.0.2...

Must i defined special things for using mp3 or did your component automaticly switch between wav or mp3?

The error with the live grid only occurs when using a loadmask. I will try to find the reason for this.

[update]

The reason is the overwriting for Ext.Element.mask in uxmedia.js...

[hendricd]

i am running Ext 3.0.2...

Must i defined special things for using mp3 or did your component automaticly switch between wav or mp3?

The error with the live grid only occurs when using a loadmask. I will try to find the reason for this.

Again, that depend on what audio plugins/controls are installed on your browser(s). What are you running and versions?

[Dumbledore]

i am running Firefox 3.5.3