HTML5 Audio Player with Flash Fallback - error in Flash version when firing too soon?

Question

I want to use this great little audio player on a website: http://www.brianhadaway.com/html5-audio-player-with-flash-fallback/

It is working fine for me in HTML5: http://carolineelisa.com/audiotest/

But when I force the Flash player to be used (var isFlash = true; in http://carolineelisa.com/audiotest2/js/jquery.audiocontrol.js) then I get a File not found error on first load: http://carolineelisa.com/audiotest2/

The button then works after that, so perhaps the following is not working because the Flash player is not ready?

$(document).ready(function(){
$(this).audiocontrol();
$(‘.audioButton’).click();
});

Any tips for waiting for the Flash player before 'clicking' the button (if indeed this is the problem) would be fantastic. Thank you!

Answer 1

Please note these two lines in jquery.audiocontrol.js.

91. addListeners(window);
92. audio.playFlash(currentTrack + options.defaultMediaExtension);

in addListeners function three event handlers are being added which are meant for html5 audio, but here window is being passed to that function. As a result event listeners are getting added for window. Then audio.playFlash causes an error as the player is not ready like you have mentioned. But this error invokes onError function and it shows the error message written for html5audio element.

EDIT: I explored the code further and found out that it is happening because of the following code in the index page, line 12

$(document).ready(function(){
    $(this).audiocontrol();
    $('.audioButton').click();
});

Triggering of the click event results in immediately playing the audio, which will work only for html5 audio. It takes a few seconds to embed the swf as swfobject.js is loaded dynamically. So this code should be like

$(document).ready(function(){
    $(this).audiocontrol( { readyCallback:function(){ $('.audioButton').click();  } } );
}); 

and in jquery.audiocontrol.js, after line 125 add ( for html5 audio)

if(options.readyCallback){
    options.readyCallback.call();
}

and in line 136, pass it as the callback function of embedSWF. The last parameter of embedSWF is a callback function which will be invoked when the SWF is ready,

swfobject.embedSWF(options.flashAudioPlayerPath, options.playerContainer, 
                 "0", "0", "9.0.0", "swf/expressInstall.swf", false, false, 
                 {id:options.flashObjectID}, options.readyCallback);

EDIT: Don't know why the external interface function is not available even after getting ready callback. I doubt its because of the 0 width and 0 height. Anyway giving the function loadFlash (line 141) as given below fixed the issue. Its working now.

function loadFlash() {
    swfobject.embedSWF(options.flashAudioPlayerPath, options.playerContainer, 
             "1", "1", "9.0.0", "swf/expressInstall.swf", false, false, 
             {id:options.flashObjectID}, 
             function(){
        if(options.readyCallback){
            setTimeout(options.readyCallback, 150);
        }
});

}