1. #1
    Sencha - Community Support Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,962
    Vote Rating
    10
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

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

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


    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:

    Code:
    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.
    Attached Files
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  2. #2
    Sencha - Community Support Team mystix's Avatar
    Join Date
    Mar 2007
    Location
    Singapore
    Posts
    6,236
    Vote Rating
    5
    mystix will become famous soon enough

      0  

    Thumbs up


    you da media man!!

  3. #3
    jay@moduscreate.com's Avatar
    Join Date
    Mar 2007
    Location
    Frederick MD, NYC, DC
    Posts
    16,353
    Vote Rating
    78
    jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all jay@moduscreate.com is a name known to all

      0  

    Default


    aww man this is HOT!!

  4. #4
    Sencha User Nash-T's Avatar
    Join Date
    Jun 2007
    Location
    Palo Alto, CA
    Posts
    99
    Vote Rating
    0
    Nash-T is on a distinguished road

      0  

    Default


    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

  5. #5
    Sencha - Community Support Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,962
    Vote Rating
    10
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

    Default


    Quote Originally Posted by Nash-T View Post
    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:

    Code:
    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) :

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

    Code:
    if(Ext.QuickTips.getQuickTip()){
     new audioClass({
           audioEvents :{
               show: 'demos/media/audio/swish.WAV',
          },
          volume : .5
      }).init( Ext.QuickTips.getQuickTip() );
    }
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  6. #6
    Ext JS Premium Member
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    666
    Vote Rating
    0
    Dumbledore is on a distinguished road

      0  

    Default


    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

  7. #7
    Sencha - Community Support Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,962
    Vote Rating
    10
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

    Default


    Quote Originally Posted by Dumbledore View Post

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

    Quote Originally Posted by Dumbledore View Post
    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.
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  8. #8
    Ext JS Premium Member
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    666
    Vote Rating
    0
    Dumbledore is on a distinguished road

      0  

    Default


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

  9. #9
    Sencha - Community Support Team hendricd's Avatar
    Join Date
    Aug 2007
    Location
    Long Island, NY USA
    Posts
    5,962
    Vote Rating
    10
    hendricd will become famous soon enough hendricd will become famous soon enough

      0  

    Question


    Quote Originally Posted by Dumbledore View Post
    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?
    "be dom-ready..."
    Doug Hendricks

    Maintaining ux: ManagedIFrame, MIF2 (FAQ, Wiki), ux.Media/Flash, AudioEvents, ux.Chart[Fusion,OFC,amChart], ext-basex.js/$JIT, Documentation Site.


    Got Sencha licensing questions? Find out more here.


  10. #10
    Ext JS Premium Member
    Join Date
    Mar 2007
    Location
    Germany
    Posts
    666
    Vote Rating
    0
    Dumbledore is on a distinguished road

      0  

    Default


    i am running Firefox 3.5.3