How can I tell when an HTML5 audio element has finished playing?

Question

How can I tell when an HTML5 audio element has finished playing?

Does it throw events I can listen to or something similar? I need to react when an audio track ends.

Thanks!

Answer 1

Using HTML:

<audio id="music" src="blah.mp3" onended="yourFunction()"></audio>

Using Javascript:

document.querySelector("#music").addEventListener("ended", yourFunction, false);

Using jQuery:

$("#music").on("ended", yourFunction);

Read more about Media events on MDN

Answer 2

According to W3Schools, you can use the onended event to detect if the audio has finished playing.

In jQuery:

$("#player").bind('ended', function(){
    // done playing
    alert("Player stopped");
});

For a demonstration see: http://jsfiddle.net/9PCEf/2/