Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do you detect when HTML5 audio has finished playing (more than once)? [duplicate]

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?

like image 783
evenodd Avatar asked Jun 19 '12 14:06

evenodd


People also ask

Which attribute is used to repeat or replay the audio files in HTML5?

The loop attribute is a boolean attribute. When present, it specifies that the audio will start over again, every time it is finished.

What is the correct HTML5 element for playing audio files?

The HTML <audio> element is used to play an audio file on a web page.

Can multiple audio sources can be played in HTML?

By adding more "<audio>" tags you can add more audio players in the browser using HTML5...

What are the 2 tags for embedding audio in HTML?

To embed audio in HTML, we use the <audio> tag. Before HTML5, audio cannot be added to web pages in the Internet Explorer era. To play audio, we used web plugins like Flash. After the release of HTML5, it is possible.


Video Answer


1 Answers

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"); }); 
like image 82
Cristi Pufu Avatar answered Oct 05 '22 00:10

Cristi Pufu