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



EDIT这已被标记为如何检查是否加载了HTML5音频元素的副本?。

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

我正在通过 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。

在网络检查器中,我可以看到它试图获取不同的网址(都是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中生成音频标签,如果这让事情变得更容易的话。

HTMLMediaElement有一个错误属性,该属性应反映解析内容的失败:

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

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

最新更新