javascript - 测试audio标签是否真正加载了mp3

Question

编辑:这已被标记为 How do you check if a HTML5 audio element is loaded? 的重复项.

我认为这至少与上面的内容不重复，因为上面的问题涉及您只想在加载完成后执行某些操作的情况，因此您等待加载完成事件。我正在谈论区分已完成加载有效数据的事物和另一个已完成加载无效内容的事物。

我正在通过 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 中生成音频标签，如果这会让事情变得更容易。

Answer 1

HTMLMediaElement 具有 error property这应该反射(reflect)出解析内容失败:

The HTMLMediaElement.error is the MediaError object for the most recent error, or null if there has not been an error. When an error event is received by the element, you can determine details about what happened by examining this object.

如果某些内容已加载(由事件或readyState属性确定)并且error属性为null，则内容应该有效。