javascript - 检测 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

当愿意检测“文件未找到错误”时，您实际上需要绑定(bind)到源标记以监听错误事件。看看这个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 中有描述- 部分错误处理。让我知道它是否适合您。