Detecting HTML5 audio element file not found error
audio, html, html5-audio, javascript
Solution
You actually need to bind to the source tag for listening to error event when willing to detect "file not found error". Have a look at this fiddle.
HTML:
<p id="player1">Non existent audio files - click to play</p>
<audio preload="none" controls>
<source id="wav" src="http://example.com/non-existant.wav" />
<source id="mp3" src="http://example.com/non-existant.mp3" />
<source id="ogg" src="http://example.com/non-existant.ogg" />
</audio>
Script:
$("#player1").on("click", function () {
//I've tried catching the error like this - no effect
alert("Trying to play file.");
try {
$('audio')[0].play();
} catch (e) {
alert("Error playing file!");
}
});
$("audio").on("error", function (e) {
alert("Error at audio tag level!");
});
// try this then
$("#wav").on("error", function (e) {
alert("Error with wav file!");
});
$("#mp3").on("error", function (e) {
alert("Error with mp3 file!");
});
$("#ogg").on("error", function (e) {
alert("Error with ogg file!");
});
It is described in this MDN article - section error handling. Let me know if it works for you.
Problem
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. Here's a fiddle with my problem and with what I have tried http://jsfiddle.net/Xx2PW/7/ The HTML: ``` <p>Non existent audio files - should return an error <audio preload="auto"> <source src="http://example.com/non-existant.wav" /> <source src="http://example.com/non-existant.mp3" /> <source src="http://example.com/non-existant.ogg" /> </audio> </p> <p>Existing audio file - should just play <audio preload="auto"> <source src="http://jplayer.org/audio/m4a/Miaow-07-Bubble.m4a" /> </audio> </p> ``` And the JS: ``` playerMarkup = "<a class=\"player\">Play</a>"; 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!"); }); ``` How can I detect an error of the file not being played (because of not being found) with JS?