CODEWITHSUNDEEP
jqueryhtml5-audio
user1574598
user1574598

Reputation: 3881

How to trigger a JQuery event when Audio has finished playing HTML5

I'm trying to fathom out how to trigger an event when my audio has stopped playing. I am using the HTML5 <audio> tag. So far I can get the audio to give me its duration using the duration property, but I'm unable to do much with this at the moment. All's I want to do is pass a "play" string into a html() method so it doesn't keep displaying "pause" when my audio is finished playing.

Toggle function:

$("#toggleButton").on("click", function(evt) {
    if(audio.paused) {
        audio.play();
        $(this).html("Pause");
    }
    else {
        audio.pause();
        $(this).html("Play");
    }
});

I am also struggling to find documentation regarding audio methods and properties. I've tried searching "audio" on both the JQuery and Mozilla network and they return nothing back.

Upvotes: 4

Views: 12853

Answers (2)

Sergio
Sergio

Reputation: 28837

Try this:

audio.addEventListener('ended', function(){
    $("#toggleButton").html("Play");
});

Upvotes: 13

wicker95
wicker95

Reputation: 131

Your audio tag should trigger an "onended" event when the sound is complete. Hook on to that event, and update your button graphic as appropriate. Browser support, as always, may vary.

Upvotes: 1

Related Questions