檢測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); 
    }); 
});