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

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

这是我的问题和我尝试过的东西

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

playerMarkup=“Play”；
音频标签=$（“音频”）；
音频标签。之前（播放标记）//在每个音频标记之前插入标记
$（“.player”）。在（“单击”，函数（）{
currentAudio=$（this.next（）[0]；
//我试着像这样捕捉错误-没有效果
警报（“正在尝试播放文件”）；
试一试{
currentAudio.play（）；
}捕获（e）{
警报（“播放文件时出错！”）；
}
});
//我也尝试过只处理事件错误-没有效果
音频标签打开（“错误”，功能（e）{
警报（“播放文件时出错！”）；
log（“播放文件时出错！”）；
});

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

获取音频错误

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

---

引用自

当您想要检测“文件未找到错误”时，实际上需要绑定到源标记以侦听错误事件。看看这个

HTML:

本节“错误处理”对其进行了描述。

---

让我知道它是否适合您。

这应该可以处理这两种情况（例如使用

）

函数handleSourceError（e）{alert（'Error loading:'+e.target.src）}
函数句柄中介错误（e）{
开关（如target.error.code）{
案例e.target.error.MEDIA\u ERR\u中止：
警报（“您中止了媒体播放”）；中断；
案例e.target.error.MEDIA\u ERR\u网络：
警报（“网络错误导致媒体下载失败”）；中断；
案例e.target.error.MEDIA\u ERR\u解码：
警报（“由于损坏问题或您的浏览器不支持使用的媒体功能，媒体播放被中止”）；中断；
案例e.target.error.MEDIA\u ERR\u SRC\u不受支持：
警报（'由于服务器或网络故障或格式不受支持，无法加载媒体。'）；中断；
违约：
警报（'发生未知媒体错误'）；
}
}
var toArray=Array.prototype.slice；
toArray.apply（document.getElementsByTagName（'audio'））.forEach（函数（audio））{
audio.addEventListener（“错误”，handleMediaError）；
toArray.apply（audio.getElementsByTagName（'source'））.forEach（函数（source））{
source.addEventListener（'error'，handleSourceError）；
});
});
我忘了说-我在写问题之前尝试了这个解决方案，但它似乎不适用于文件未找到的情况，这不是媒体错误中止、媒体错误网络、媒体错误解码、媒体错误SRC不受支持。它对你有效吗？我无法让我的代码甚至从错误事件处理程序发出警报，而不是向男人发出警报通过开关块运行的操作。太棒了，就是这样-也感谢文档的链接，一旦您知道它是源元素，它就非常有意义。知道如何在React组件中使用它吗？这对我来说非常有用。但是，有没有办法确定导致错误的调用返回的http状态代码，或者错误是什么？@asubanovsky您需要在源元素上添加一个
onError
回调。我的反应技能已经过时了，但我在Vue中做了相同的操作
，只是要指出，使用不带..@rasjani的音频标记时不会触发handleSourceError，这就是handleMediaError的用途。使用这段代码w我会处理这两种情况。这是一个字面上的评论，供那些可能正在阅读这篇文章但没有意识到这两种方法之间的区别的人使用。@rasjani啊，我错了。请继续，先生！
<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!");
    });