Question

How does one get the HTML5 Audio tag to work in a webworks app with the Autoplay option?

Ex:
On document load Audio element’s src changed via javascript then audioElement.play() – this doesn’t work, you have to bind the click of another link or button to audioElement.play() and click AGAIN…

Any ideas?

function playSongNow(currentID) {
    var audioElement = document.createElement('audio');
    audioElement.setAttribute('autoplay', 'true');
    audioElement.setAttribute('preload', 'true');
    audioElement.setAttribute('src', 'http://' + sessionStorage.url + ':' + sessionStorage.port + '/rest/stream.view?u=' + sessionStorage.user + '&p=' + sessionStorage.pass + '&v=1.6.0&c=BerrySonic&id=' + currentID);
    audioElement.load();
    audioElement.addEventListener("load", function() {
        audioElement.play();
        $(".duration span").html(audioElement.duration);
        $(".filename span").html(audioElement.src);
    }, true);
    $('.play').click(function() {
        audioElement.play();
    });
    $('.pause').click(function() {
        audioElement.pause();
    });
    $('.volumeMax').click(function() {
        audioElement.volume=1;
    });
    $('.volumestop').click(function() {
        audioElement.volume=0;
    });
    $('.stop').click(function() {
        audioElement.pause();
        audioElement.currentTime = 0;
    });
    $('.playatTime').click(function() {
        audioElement.currentTime= 35; //Testing skipping so used 35
        audioElement.play();
    });
}

playSongNow is called by the HTML:

<a onclick="playSongNow('2f6d656469612f52616964426f782f4d757369632f4164656c652f32312f4164656c65202d2052756d6f7572204861732049742e6d7033');"><li>Rumour Has It</li></a>

NEW: Actually I think I’ve narrowed the issue down to :

audioElement.addEventListener("load", function() {
    audioElement.play();
    $(".duration span").html(audioElement.duration);
    $(".filename span").html(audioElement.src);
}, true);

I tried using “canplaythrough”
But neither works to determine when enough data has passed in to actually play because if you do:

audioElement.load();
audioElement.play();

I tried the following event:

audioElement.addEventListener('canplay', function() {
    alert('canplay');
    audioElement.play();
});

And this works but this doesn’t mean that the audio can play without buffering does it? It also immidiately fires the “canplaythrough” event.

Some guidance on these events would be handy.

Answer 1

You can handle this with the ended event like the following :

audioElement.addEventListener('ended', function(){
playSongNow(......)
}, false);