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

Detecting HTML5 audio element file not found error

提问by WojtekD

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.

如果音频元素 src 属性指向不存在的文件，我试图让浏览器显示警报，但是如果我附加“错误”事件，我没有得到任何响应。

Here's a fiddle with my problem and with what I have tried http://jsfiddle.net/Xx2PW/7/

这是我的问题和我尝试过的问题http://jsfiddle.net/Xx2PW/7/

The HTML:

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:

和 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?

如何使用 JS 检测文件未播放（因为找不到）的错误？

回答by Arnaud Leyder

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:

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.

它在此MDN 文章- 部分错误处理中进行了描述。请让我知道这对你有没有用。

回答by idbehold

This should handle both cases (e.g. using <audio>with <source>tags or using <audio src="">).
See example fiddle.

这应该处理这两种情况（例如使用<audio>with<source>标签或 using <audio src="">）。
请参阅示例小提琴。

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

回答by Vishnuraj V

Getting audio errors

获取音频错误

$('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);

Quoted from How to check if HTML5 audio has reached different errors

引自如何检查 HTML5 音频是否已达到不同的错误