Question

I just want to play several audio files sequentially using HTML5 Audio function. At the end of each play, the “ended” event fires to load next audio. But in Safari 5.1 for desktop (on Mac), i found the “ended” event only fired at the end of the first play. After loading and playing the second audio, the “ended” event didn’t fire again even when the audio play did finished (I tracked this by “timeupdate” event). Even when I manually played any other audio files, the “ended” event didn’t fire again. But in Chrome and mobile safari, this problem seems not existed and the audio player can play from the first audio to the last audio continuously. Is this the bug of Safari 5.1 for Mac OS X? (I didn’t test it in Windows)

Currently, I can only use “timeupdate” event to check if the play ended or not.

Answer 1

Yes this is an annoying bug. You can work around this by changing the id of the audio element for each file. Here is some sample code to get an idea:

<div id="audioDiv">
 <audio id="audio0" src="">
  <h1>Your browser does not support the audio tag.</h1>
 </audio>
</div>

<script>
var audioCounter = 0;

function next() {
 audioCounter++;
 document.getElementById('audioDiv').innerHTML = '<audio id="audio' + audioCounter + '" src="file.mp3"></audio>';
 document.getElementById('audio' + audioCounter).addEventListener('ended', next, false);
 document.getElementById('audio' + audioCounter).play();
 }

</script>