title: Detecting HTML5 audio element file not found error
body: <p>I am trying to make a the browser display an alert if an audio element src attribute points to a non existent file, however I do not get any response if I attach the the  "error" event.</p>
  
  <p>Here's a fiddle with my problem and with what I have tried <a href="http://jsfiddle.net/Xx2PW/7/">http://jsfiddle.net/Xx2PW/7/</a></p>
  
  <p>The HTML:</p>
  
  <pre><code>&lt;p&gt;Non existent audio files - should return an error
      &lt;audio preload="auto"&gt;
          &lt;source src="http://example.com/non-existant.wav" /&gt;
          &lt;source src="http://example.com/non-existant.mp3" /&gt;
          &lt;source src="http://example.com/non-existant.ogg" /&gt;
      &lt;/audio&gt;
  &lt;/p&gt;
  &lt;p&gt;Existing audio file - should just play
      &lt;audio preload="auto"&gt;
          &lt;source src="http://jplayer.org/audio/m4a/Miaow-07-Bubble.m4a" /&gt;
      &lt;/audio&gt;
  &lt;/p&gt;
  </code></pre>
  
  <p>And the JS:</p>
  
  <pre><code>playerMarkup = "&lt;a class=\"player\"&gt;Play&lt;/a&gt;";
  audioTags = $("audio");
  
  audioTags.before(playerMarkup); //insert markup before each audio tag
  
  $(".player").on("click", function () {
      currentAudio = $(this).next()[0];
      //I've tried catching the error like this - no effect
      alert("Trying to play file.");
      try {
          currentAudio.play();
      } catch (e) {
          alert("Error playing file!");
      }
  });
  
  //I've also tried just handling the event error - no effect
  audioTags.on("error", function (e) {
      alert("Error playing file!");
      console.log("Error playing file!");
  });
  </code></pre>
  
  <p>How can I detect an error of the file not being played (because of not being found) with JS?</p>