title: how to detect end of audio file using jquery and html5
body: <p>I've got this jquery code and html to work OK for an English language training site. </p>
  
  <pre><code>$(document).ready(function() {
    $("p").hover(
      function() {
        $(this).css({"color": "purple", "font-weight" : "bolder"});
      },
      function() {
        $(this).css({"color": "black", "font-weight" : ""});
      }
    ); 
    $("p").click(function (event) {
      var element = $(this);
      var elementID = event.target.id;
      var oggVar = (elementID +".ogg");   
      var audioElement = document.createElement('audio');
      audioElement.setAttribute('src', oggVar); 
      audioElement.load();
      audioElement.addEventListener("load", function() { 
          audioElement.play(); 
      }, true);
      audioElement.play();    
    }); 
  });
  
  &lt;div&gt;
    &lt;p id="one"&gt; this is the first paragraph&lt;/p&gt;
  ....   
    &lt;p id="four"&gt; this is the fourth paragraph&lt;/p&gt; 
  ....   
  &lt;/div&gt;
  </code></pre>
  
  <p>the problem is that if text is clicked on while an audio file is playing (or double clicked) then the second file (or the same file) starts playing. So I end up with two files playing simultaneously. I need to prevent this. I think that the 'ended' event is relevant but, despite looking some examples, I can't see quite how to detect if a file is playing and wait until it's finished before allowing a second file to start (or even prevent it from playing at all). Any help would be much appreciated :)    </p>