未找到检测HTML5音频元素文件错误 [英] Detecting HTML5 audio element file not found error

问题描述

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

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.

下面是我的问题，小提琴和我曾尝试 http://jsfiddle.net/Xx2PW/7/

Here's a fiddle with my problem and with what I have tried 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？

How can I detect an error of the file not being played (because of not being found) with JS?

推荐答案

您确实需要绑定到源标记，用于收听错误事件的时候愿意来检测未找到文件错误。看看这个小提琴。

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>

脚本：

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

据在此<一个描述href=\"https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video#Playing_Ogg_videos_using_a_Java_applet\"相对=nofollow> MDN文章 - 部分错误处理。
让我知道它是否适合你。

It is described in this MDN article - section error handling. Let me know if it works for you.

这篇关于未找到检测HTML5音频元素文件错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！