how to detect end of audio file using jquery and html5

Question

I\'ve got this jquery code and html to work OK for an English language training site.

$(document).ready(function() {
  $(\"p\").hover(
    function() {
             


        

Answer 1

var myAudio = new Audio('someSound.ogg'); 
myAudio.addEventListener('ended', function() {
    this.currentTime = 0;
    this.play();
}, false);
myAudio.play();

This Worked for jquery audio.

Answer 2

 ***var audioElement = null;***     

 $("p").click(function (event) {

    ***if (audioElement) {
        audioElement.pause();
     }***

var element = $(this);
var elementID = event.target.id;
var oggVar = (elementID +".ogg");   
audioElement = document.createElement('audio');
audioElement.setAttribute('src', oggVar); 
audioElement.load();
audioElement.addEventListener("load", function() { 
    audioElement.play(); 
}, true);
audioElement.play();    

 }); 

Answer 3

You can add event listeners for the ended and playing events. Also, why creating a audio tag via javascript? I would just create an empty hidden audio tag:

<audio id='myAudio' autoplay='autoplay'></audio>

You have two options:

• disable/enable the button/link when audio is playing/stopped (preferred imho)
• ignore clicks when already playing

Then add two eventlisteners to it:

var playing = false;

$('#myAudio').on('playing', function() {
   playing = true;
   // disable button/link
});
$('#myAudio').on('ended', function() {
   playing = false;
   // enable button/link
});

$("p").click(function (event) {
   if(!playing) {
      var element = $(this);
      var elementID = event.target.id;
      var oggVar = (elementID +".ogg");   
      var audioElement = $('#myAudio')[0];
      audioElement.setAttribute('src', oggVar); 
      audioElement.play();
   }

});