检测HTML5音频元素文件未找到错误

Question

我试图做一个浏览器中显示一个警告，如果音频元素src属性指向一个不存在的文件，但我没有得到任何回应，如果我附上了“错误”事件。

这里是我的问题，小提琴，并与我曾尝试http://jsfiddle.net/Xx2PW/7/

的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> 

而且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!"); 
}); 

我怎样才能检测到的错误文件没有被播放（因为没有被发现）与JS？

Answer 1

实际上，你需要绑定的源标记，用于收听错误事件时，愿意检测被引用的“未找到文件错误”。看看这个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> 

脚本：

$("#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!"); 
    }); 

正是在这种MDN article描述 - 部分错误处理。 让我知道它是否适合你。

Answer 2

获取音频错误

$('audio').addEventListener('error', function failed(e) { 
    // audio playback failed - show a message saying why 
    // to get the source of the audio element use $(this).src 
    switch (e.target.error.code) { 
    case e.target.error.MEDIA_ERR_ABORTED: 
     alert('You aborted the video playback.'); 
     break; 
    case e.target.error.MEDIA_ERR_NETWORK: 
     alert('A network error caused the audio download to fail.'); 
     break; 
    case e.target.error.MEDIA_ERR_DECODE: 
     alert('The audio playback was aborted due to a corruption problem or because the video used features your browser did not support.'); 
     break; 
    case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED: 
     alert('The video audio not be loaded, either because the server or network failed or because the format is not supported.'); 
     break; 
    default: 
     alert('An unknown error occurred.'); 
     break; 
    } 
}, true); 

从How to check if HTML5 audio has reached different errors

Answer 3

这应该处理这两种情况（例如使用<audio>与<source>标签或使用<audio src="">）。
见example fiddle。

function handleSourceError(e) { alert('Error loading: '+e.target.src) } 
function handleMediaError(e) { 
    switch (e.target.error.code) { 
     case e.target.error.MEDIA_ERR_ABORTED: 
      alert('You aborted the media playback.'); break; 
     case e.target.error.MEDIA_ERR_NETWORK: 
      alert('A network error caused the media download to fail.'); break; 
     case e.target.error.MEDIA_ERR_DECODE: 
      alert('The media playback was aborted due to a corruption problem or because the media used features your browser did not support.'); break; 
     case e.target.error.MEDIA_ERR_SRC_NOT_SUPPORTED: 
      alert('The media could not be loaded, either because the server or network failed or because the format is not supported.'); break; 
     default: 
      alert('An unknown media error occurred.'); 
    } 
} 

var toArray = Array.prototype.slice; 
toArray.apply(document.getElementsByTagName('audio')).forEach(function(audio){ 
    audio.addEventListener('error', handleMediaError); 
    toArray.apply(audio.getElementsByTagName('source')).forEach(function(source){ 
     source.addEventListener('error', handleSourceError); 
    }); 
});