title: Triggering Event When Audio Has Finished Playing
body: <p>I have not seen much documentation on the <code>&lt;audio&gt;</code> tag in HTML5.  I am trying to trigger an event when audio has finished playing.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;audio id="audio"&gt;
      &lt;source src="'.$query['audioPronunciation'].'" type="audio/mp3"&gt;
      Your browser does not support the audio element.
  &lt;/audio&gt;
  </code></pre>
  
  <p>JavaScript / jQuery Play &amp; Pause:</p>
  
  <pre><code>function audio() {
      if ($("#audioControl").hasClass("glyphicon-play")) {
          $("#audioControl").addClass("glyphicon-pause").removeClass("glyphicon-play");
          $("#audio").trigger("play");
      } else if ($("#audioControl").hasClass("glyphicon-pause")) {
          $("#audioControl").removeClass("glyphicon-pause").addClass("glyphicon-play");
          $("#audio").trigger("pause");
      }
  }
  </code></pre>
  
  <p>JavaScript / jQuery, 'when ended'</p>
  
  <pre><code>$("#audio").addEventListener('ended', function() {
      alert("Audio has finished playing!");
  </code></pre>
  
  <p>});</p>