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

[Bucs]

Doug, I am having a little difficulty understanding best way to implement the AudioEvents component. I have a control that simply displays content. If the controls 'audioUrl' config param is set on init, then that means the control should play an audio file that mimics the HTML content displayed. I was attaching the AudioEvents class up to the panel's after render event, but this seemed to conflict (IE only) with the afterrender listener that I am setting to display the HTML content. So, I am now thinking that I need to use the callback param of the load event (for the HTML content) to initiate and play the appropriate content.

Here is my control with relevant parts bolded:

AMD.Control.PanelContentTask = Ext.extend(Ext.Panel, {
    /* ===================================================================================== */
    // BEGIN: STATIC CONFIG PROPERTIES  
    id: 'pnlContentTask'
    ,title: 'Loading...'
    ,width: 610
    ,height: 355
    ,layout: 'form'
    ,frame: false
    ,iconCls: 'formColors'
    ,listeners   : {
        render: function (pnl) {
            this.displayContent(pnl);

        },
        removed: function(cmp, ownCt) {

        }
    }


    // END  : STATIC CONFIG PROPERTIES    
    /* ===================================================================================== */

    /* ===================================================================================== */
    // BEGIN: CUSTOM PROPERTIES    
    , contentUrl: ''
    , audioUrl  : ''

    // END  : CUSTOM PROPERTIES    
    /* ===================================================================================== */

    /* ===================================================================================== */
    // BEGIN: COMPONENT INIT 

    , initComponent: function() {

        // Setup title and content 
        if(this.inTitle != '') this.title = this.inTitle;
        if(this.inContentUrl != '') this.contentUrl = this.inContentUrl;

        // Build toolbar
        var tb = new Ext.Toolbar({
            items: [
                {
                    xtype: 'tbfill'
                },
                {
                    id      : 'btnProceed',
                    xtype   : 'button',
                    text    : 'Start Next Task Now',
                    iconCls : 'next',
                    disabled: false,
                    handler : this.markTaskComplete
                }
            ]
        });


        // Setup Audio Events if audio parameter specified  // was setting up AudioEvents in here, now just setting param
        if(this.inContentAudioUrl != '') 
        {
            this.audioUrl = this.inContentAudioUrl;        

        }

        // Setup button bar buttons
        this.bbar = tb;

        AMD.Control.PanelContentTask.superclass.initComponent.call(this);

    }

    // END  : COMPONENT INIT
    /* ===================================================================================== */

    /* ===================================================================================== */
    // BEGIN: CUSTOM METHODS    


    , displayContent: function(pnl){

        // Perform Load
        pnl.load({
            url: this.contentUrl,
            indicatorText: 'Please wait...',
            text: 'Please wait...',
            timeout: 30,
            scripts: true,
            callback: this.setupAudio(pnl)
            //scope: yourObject, // optional scope for the callback
            //nocache: false                        
        }); 
        
        pnlMgr = pnl.getUpdater();
            

    }

    , setupAudio: function(pnl){

            if(Ext.capabilities.hasAudio && Ext.capabilities.hasAudio.wav){
                //Give Ext.MessageBox Audio
                alert('load WAV audio file now and play.');
            }
            else
            {
                if(Ext.capabilities.hasAudio && Ext.capabilities.hasAudio.mp3){
                    alert('load MP3 audio file now and play.');
                }
                else
                {
                    alert('Attempt to play with a down-level plugin (probably IE)');
                }
            }


    }

  //................ other stuff .................


});

Ext.reg('x-mod-control-panelContenttask', AMD.Control.PanelContentTask);

the problem with this is that I no longer have the events to attach to as I want to play the audio file immediately in the callback. So does this mean I should just use the uxmedia to attempt to play the audio files? I realize this requires the flash plugin but at this point it might be the easiest thing to do.

If I don't do that, then I need to somehow instantiate the AudioEvents class inside those capability routines and play the correct file. I can have different versions, that's not a problem....but the problem is that I don't know how to pass the audioUrl to the AudioEvents class as I do not need to play the file upon an event instance, but rather I just need to play it NOW. The only way I see to pass the actual file to play is via an event listener in the config.

HELP?!

[Bucs]

Doug, I am having a little difficulty understanding best way to implement the AudioEvents component. I have a control that simply displays content. If the controls 'audioUrl' config param is set on init, then that means the control should play an audio file that mimics the HTML content displayed. I was attaching the AudioEvents class up to the panel's after render event, but this seemed to conflict (IE only) with the afterrender listener that I am setting to display the HTML content. So, I am now thinking that I need to use the callback param of the load event (for the HTML content) to initiate and play the appropriate content.

Here is my control with relevant parts bolded:

AMD.Control.PanelContentTask =  Ext.extend(Ext.Panel, {
    /*  =====================================================================================  */
    // BEGIN: STATIC CONFIG PROPERTIES  
    id:  'pnlContentTask'
    ,title: 'Loading...'
    ,width: 610
     ,height: 355
    ,layout: 'form'
    ,frame: false
     ,iconCls: 'formColors'
    ,listeners   : {
        render:  function (pnl) {
            this.displayContent(pnl);

         },
        removed: function(cmp, ownCt) {

        }
     }


    // END  : STATIC CONFIG PROPERTIES    
    /*  =====================================================================================  */

    /*  =====================================================================================  */
    // BEGIN: CUSTOM PROPERTIES    
    , contentUrl: ''
     , audioUrl  : ''

    // END  : CUSTOM PROPERTIES    
     /*  =====================================================================================  */

    /*  =====================================================================================  */
    // BEGIN: COMPONENT INIT 

    , initComponent:  function() {

        // Setup title and content 
         if(this.inTitle != '') this.title = this.inTitle;
         if(this.inContentUrl != '') this.contentUrl = this.inContentUrl;

         // Build toolbar
        var tb = new Ext.Toolbar({
             items: [
                {
                    xtype: 'tbfill'
                 },
                {
                    id      : 'btnProceed',
                     xtype   : 'button',
                    text    : 'Start Next Task  Now',
                    iconCls : 'next',
                     disabled: false,
                    handler : this.markTaskComplete
                 }
            ]
        });


        // Setup Audio  Events if audio parameter specified  // was setting up AudioEvents in  here, now just setting param
        if(this.inContentAudioUrl != '')  
        {
            this.audioUrl =  this.inContentAudioUrl;        

        }

        //  Setup button bar buttons
        this.bbar = tb;

         AMD.Control.PanelContentTask.superclass.initComponent.call(this);

     }

    // END  : COMPONENT INIT
    /*  =====================================================================================  */

    /*  =====================================================================================  */
    // BEGIN: CUSTOM METHODS    


    , displayContent:  function(pnl){

        // Perform Load
        pnl.load({
             url: this.contentUrl,
            indicatorText: 'Please wait...',
             text: 'Please wait...',
            timeout: 30,
             scripts: true,
            callback: this.setupAudio(pnl)
             //scope: yourObject, // optional scope for the callback
             //nocache: false                        
        }); 
        
         pnlMgr = pnl.getUpdater();
            

    }

    ,  setupAudio: function(pnl){

             if(Ext.capabilities.hasAudio && Ext.capabilities.hasAudio.wav){
                 //Give Ext.MessageBox Audio
                alert('load WAV audio  file now and play.');
            }
            else
             {
                if(Ext.capabilities.hasAudio &&  Ext.capabilities.hasAudio.mp3){
                    alert('load MP3  audio file now and play.');
                }
                else
                 {
                    alert('Attempt to play with a down-level  plugin (probably IE)');
                }
            }


     }

  //................ other stuff .................


});

Ext.reg('x-mod-control-panelContenttask',  AMD.Control.PanelContentTask);

the problem with this is that I no longer have the events to attach to as I want to play the audio file immediately in the callback. So does this mean I should just use the uxmedia to attempt to play the audio files? I realize this requires the flash plugin but at this point it might be the easiest thing to do.

If I don't do that, then I need to somehow instantiate the AudioEvents class inside those capability routines and play the correct file. I can have different versions, that's not a problem....but the problem is that I don't know how to pass the audioUrl to the AudioEvents class as I do not need to play the file upon an event instance, but rather I just need to play it NOW. The only way I see to pass the actual file to play is via an event listener in the config.

HELP PLEASE?!

[Bucs]

Doug, just an FYI...that SoundManager2 JS library I mentioned in prior post is extremely robust and effective at doing everything I have mentioned here in terms of methods and event handling. Plays very nice with the extension lib and you can simply use component listeners to get all the event component event hooks. It is currently in the process of baking in HTML5 support as well. I had to go this route as opposed to using your extension due to the event handling capabilities.

In my opinion, you should consider wrapping this as you did the JWPlayer component. Flash is going to be around for a while (see YouTube comments) and it has wide browser compatibility as you know.

Whatever the case, your forum support is top notch along with the components you provide to the community So thanks for all that

[hendricd]

@Bucs-- The anatomy of a Panel (and its load methods) is causing some confusion.

Since the body of a Panel is the target for loaded content, you would simply bind the AudioEvent plugin to its (body) Updater after you have configured a suitable fallback mediaCfg post-audio feature detection.

Remember, the plugin can be bound to anything that fires events.

See below:

AMD.Control.PanelContentTask =  Ext.extend(Ext.Panel, {
    /*  =====================================================================================  */
    // BEGIN: STATIC CONFIG PROPERTIES  
    id:  'pnlContentTask'
    ,title: 'Loading...'
    ,width: 610
     ,height: 355
    ,layout: 'form'
    ,frame: false
     ,iconCls: 'formColors'
    
    // END  : STATIC CONFIG PROPERTIES    
    /*  =====================================================================================  */

    /*  =====================================================================================  */
    // BEGIN: CUSTOM PROPERTIES    
    , contentUrl: ''
     , wavUrl  : 'media/mediaStream.wav'
    , mp3Url  : 'media/mediaStream.mp3'
    // END  : CUSTOM PROPERTIES    
     /*  =====================================================================================  */

    /*  =====================================================================================  */
    // BEGIN: COMPONENT INIT 

    , initComponent:  function() {

        // Setup title and content 
         if(this.inTitle != '') this.title = this.inTitle;
         if(this.inContentUrl != '') this.contentUrl = this.inContentUrl;

         // Build toolbar
        var tb = new Ext.Toolbar({
             items: [
                {
                    xtype: 'tbfill'
                 },
                {
                    id      : 'btnProceed',
                     xtype   : 'button',
                    text    : 'Start Next Task  Now',
                    iconCls : 'next',
                     disabled: false,
                    handler : this.markTaskComplete
                 },
                 {
                     text : 'Stop',
                     handler : function(){
                            var updater = this.getUpdater();
                            updater.audioPlugin &&  updater.audioPlugin.stopAudio();

                            //or
                            //this.audioPlugin &&  this.audioPlugin.stop();
                      },
                     scope : this

                 }
            ]
        });

        //  Setup button bar buttons
        this.bbar = tb;

         AMD.Control.PanelContentTask.superclass.initComponent.call(this);

        this.on('afterrender', this.startup, this);

     }

    // END  : COMPONENT INIT
    /*  =====================================================================================  */

    /*  =====================================================================================  */
    // BEGIN: CUSTOM METHODS    


    , displayContent:  function(contentUrl, audioUrl){

        if(audioUrl){    //each page's audio file will likely be different, right?
             this.audioPlugin.stop();
             this.audioPlugin.audioEvents.update = audioUrl;
        }

        var pnlMgr = this.getUpdater();

        // Perform Load
        pnlMgr.update({
             url: contentUrl || this.contentUrl,  //load the next page?
            indicatorText: 'Please wait...',
            text: 'Please wait...',
            timeout: 30,
            scripts: true                   
        }); 
        
    }

    ,initAudio: function(){

          var stream, 
               caps = Ext.capabilities,
               mediaCfg;

          if(caps && caps.hasAudio){  //HTML5 support ?
               stream = caps.hasAudio.wav ? this.wavUrl : 
                     ( caps.hasAudio.mp3 ? this.mp3Url : null );
          }
          if(!stream){  //Fallback to a WAV player
               mediaCfg = {
                   mediaType : 'WAV'   //use the widest available WAV support (OR ANY other profile you wish to support)
                   start     : false
               };
               stream = this.wavUrl;
          }
          this.audioPlugin = new Ext.ux.Media.plugin.AudioEvents({
                 mediaCfg : mediaCfg,
               hideMode  : 'offsets',    //remove if you intend to render controls somewhere
               controls : false,    //true if you itend to render player controls somewhere
                height  : 60,
                style  : 'padding-top:12px',
                audioEvents :{
                    update: stream,  //the url the event will play
                    failure : 'media/oops.wav'
                },
                volume : .5
            });  
          
            this.audioPlugin.init( this.getUpdater() );  //bind to Updater's update event

     },

    startup : function(){
          this.initAudio();
           this.displayContent();  //load the first page

    }

  //................ other stuff .................


});

Ext.reg('x-mod-control-panelContenttask',  AMD.Control.PanelContentTask);

Tweak it.

[hendricd]

hendricd, do you have github account?

hendricd@