CODEWITHSUNDEEP
jqueryhtmlaudio
danny
danny

Reputation: 417

Determine when HTML5 audio is paused or track is finished using jQuery

I am working on an HTML5 audio tag and I want to trigger an event when the song is finished. Is this possible with jQuery?

My jQuery code is:

      $(document).ready(function(){

var music = new Audio("sample.mp3");
$('#play').click(function(){
    music.play();
});

$('#pause').click(function(){
 music.pause();
});

         });

My HTML5 is:

<input type="button" value="Play" id="play" />
<input type="button" value="Pause" id=pause" />

Upvotes: 3

Views: 14429

Answers (3)

Abdo-Host
Abdo-Host

Reputation: 4103

<audio class="ah-audio-player" preload="auto">
  <source type="audio/mpeg" src="sound.mp3">
</audio>

-

var audio_player = $('.ah-audio-player');
audio_player.on('ended', function () {
    alert('end');
});

Upvotes: 0

Emmanuel N
Emmanuel N

Reputation: 7449

Use HTML 5 onended event handler

<audio src="sample.mp3" onended="yourFunction()"></audio>

For jQuery bind ended event handler 

 $(music).bind("ended", function(){ ... });

Upvotes: 14

Dave Hogan
Dave Hogan

Reputation: 3221

.bind("ended", function(){ });

Or 

 music.addEventListener("ended", function() { });

Upvotes: 3

Related Questions