测试音频标签是否实际加载了 mp3答案

【问题标题】：Test whether audio tag has actually loaded an mp3测试音频标签是否实际加载了 mp3
【发布时间】：2017-12-06 17:15:56
【问题描述】：

我不认为这至少是上面的重复，因为上面的问题是关于你只想在加载完成后做某事的情况，所以你等待完成加载事件。我说的是区分一个已完成加载有效数据的事物和另一个已完成加载无效数据的事物。

我正在通过 Squid 代理服务器模拟本地网络上的 mp3 阻塞，以便我们可以代表我们的用户自动测试这一点，这些用户经常在有 mp3 阻塞防火墙的学校工作（这会破坏我们的网站）。

为了测试 mp3 是否被阻止，我有一堆 audio 标签，其中有一个 source 指向我想模拟被阻止的不同域，如下所示：

      <audio class="domain-test" controls>
        <source src="<%= url %>">
        Your browser does not support the audio element.
      </audio>

使用音频标签的优点是src（如 img src）不受 CORS 限制，因此我可以尝试从我们使用的所有不同域加载 mp3。

在网络检查器中，我可以看到它试图获取不同的 url（它们都是 mp3），并且我可以看到 403:Forbidden 状态的响应，所以我可以看到我的防火墙正在阻止它们。如果我单击音频标签上的播放按钮，则没有任何反应。到目前为止一切顺利：它们被阻止了。

但是，我如何在我的 javascript 中判断它是否失败？我以为我可以测试音频标签的readyState，就像这样（这是在带有jQuery的javascript中）：

audioTag = $("audio.domain-test");
if(audioTag[0].readyState == 0){
  blocked = true;
}

但是，readyState 返回 4，这意味着“有足够的数据可用 - 并且下载速率足够高 - 媒体可以不间断地播放到最后。” （见https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/readyState）

我认为这可能是因为当您尝试加载 mp3 时，防火墙会向您显示一个 html 页面，上面写着“抱歉，这已被阻止”，并且该 html 页面正在作为其实际数据加载到音频标签中，所以它认为它实际上已经加载好了。但是，数据实际上并不是 mpeg 数据，所以当你按下播放时什么都不会发生。

在 jQuery 或原生 JS 中，有什么更好的方法来测试音频标签源是否实际加载正确？

目前我正在将音频标签渲染到我的页面上，然后在页面加载时运行我的 js 测试，但我可以在我的 javascript 中生成音频标签，如果这样可以更容易的话。

【问题讨论】：

可能是this?
我不认为这是 stackoverflow.com/questions/8059434/… 的副本。另一个问题是关于您只想在完成加载后做某事的情况，因此您等待完成加载事件。我说的是区分已完成加载有效数据的事物和已完成加载无效数据的事物。
同意，这个答案是针对不同的问题。翻阅一些文档并找到this。我认为这更类似于您正在寻找的内容。
@infamoustrey 谢谢。我刚试过，错误事件没有触发。我想我需要把它作为一个不同的问题再次写出来，它现在会被忽略。
@MaxWilliams 也尝试abort 事件。如果这些都没有触发，恐怕唯一的选择是使用您通过 fetch/xmlhttprequest 加载的启用 cors 的内容，并从那里检查真实的内容和状态。

【解决方案1】：

HTMLMediaElements 有一个 error property 应该反映解析内容失败：

HTMLMediaElement.error 是最近错误的 MediaError 对象，如果没有错误，则为 null。当元素接收到错误事件时，您可以通过检查此对象来确定发生的详细信息。

如果已加载某些内容（由事件或 readyState 属性确定）并且错误属性为 null，则内容应该是有效的。

【讨论】：