1. #21
    Sencha Premium Member
    Join Date
    Sep 2008
    Posts
    710
    Vote Rating
    5
    Bucs is on a distinguished road

      0  

    Default


    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:
    Code:
    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?!

  2. #22
    Sencha Premium Member
    Join Date
    Sep 2008
    Posts
    710
    Vote Rating
    5
    Bucs is on a distinguished road

      0  

    Default


    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:
    Code:
    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?!

  3. #23
    Sencha Premium Member
    Join Date
    Sep 2008
    Posts
    710
    Vote Rating
    5
    Bucs is on a distinguished road

      0  

    Default


    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

  4. #24
    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


    @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:

    Code:
    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.
    "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.


  5. #25
    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 mikhail.tatsky View Post
    hendricd, do you have github account?


    hendricd@
    "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.


film izle

hd film izle

film sitesi

takipci kazanma sitesi

takipci kazanma sitesi

güzel olan herşey

takipci alma sitesi

komik eğlenceli videolar