Question

I am having a problem detecting when an tag is finished playing an mp3. When I do something like this:

     myAudio.addEventListener("ended", function() 
     {
          alert("ended");
     });

It only occurs the first time the audio is played. When I play the audio again, nothing happens. The same thing happens when I use the onended=doThis(); method. I’ve heard maybe there is a way to do it in jQuery, but I haven’t been able to get it to work. I’ve also heard there might be a way to fix it by changing the audio div id every time the mp3 is played, but this doesn’t work for me because I need the id to stay the same.

Did anyone get any ideas?

Answer 1

The ended event is created based on .currentTime attribute.
http://w3c.github.io/html/semantics-embedded-content.html#eventdef-media-ended

So, all you have to do is set the .currentTime to zero again.

myAudio.addEventListener("ended", function(){
     myAudio.currentTime = 0;
     console.log("ended");
});