How to detect an audio has finished playing in a web page?

Question

In my project, I need to embed audio (ex: mp3, etc) into a web page. When user visits the page, the audio will begin playing. When the audio ends, the questionnaire (form fields) will appear for the user to answer.

Is there is way to check if the audio has finished playing using jquery, so that the questionnaire can appear after the user has listened to the entire audio?

I know one way to check is to determine the audio length, then I can set a timer to display the questionnaire, but I'm hoping jquery has some sort of event handler that allows me to accomplish this.

I see that jquery has many audio plugins, and I can't be sure which will do what I want here: http://plugins.jquery.com/plugin-tags/audio

Any ideas are greatly appreciated.

Thanks.

Answer 1

If you are using the html5 audio tag, there is the "onended" event handler. I don´t know if the browsers support it yet.

Something like:

<audio src="xpto.mp3" onended="DoSomething();"></audio>

In the last case you can use a swf that can play the sound, and alert your javascript when it reaches the end.

Answer 2

You can also add a jQuery event listener like so:

$("audio").on("ended", function() {
    console.log("All Done!");
});