如何让 Chrome 和/或 Firefox 在 Karma 测试中播放 <audio> 元素？

Posted 2023-03-07

【中文标题】如何让 Chrome 和/或 Firefox 在 Karma 测试中播放 <audio> 元素？

【英文标题】：How to make Chrome and/or Firefox play <audio> elements in Karma tests?

【发布时间】：2016-02-01 15:46:01

【问题描述】：

我正在开发一个库，该库可以从 html5 <audio> 和 <video> 元素中提取音频并将其发送到远程服务器以进行语音到文本的处理。 （例如自动字幕。）当我手动测试时，一切都按预期工作，但是当 karma 运行我的测试时，它总是会因为 <audio> 元素而失败。

就上下文而言，HTML5 audio script processors 在连接到 <audio> 元素后立即获得音频流，但在元素开始播放之前全为 0（无声音）。

当我在 karma 中运行测试时，该元素似乎永远不会开始播放；即使我在元素上调用了.play()，我也只是得到 0。另外，我没有听到扬声器发出任何声音，这应该是同时发生的。

（我在测试期间收到的音频可能非常烦人，并且可能应该默认禁用，但有没有办法在像我这样的情况下启用它？）

如果您有兴趣查看代码，它位于https://github.com/watson-developer-cloud/speech-javascript-sdk，但它仍然有点混乱，并且当前配置为跳过可能会失败的测试。如有必要，我会尝试设置一个精简的示例，但我希望我不需要。

如果它有所作为，我会使用 OS X。我还没有在 Windows 或 Linux 上尝试过。

【参考方案1】：

找到它，至少对于 Firefox。 <audio> 元素显然具有比我意识到的更强大的 CORS 规则！我在我的文件服务器上设置了一个Access-Control-Allow-Origin: * 标头，因为我知道它位于与 Karma 运行我的测试不同的端口上，但显然这还不够。

我似乎无法在此任何地方找到任何文档，但我碰巧注意到一个关于 CORS 的 chrome 错误，并进行了更多的挖掘和实验。似乎跨域 <audio> 元素的 scriptProcessors 需要与 <img> 标签在 <canvas> 中使用其内容所需的相同 crossOrigin 属性。

所以，最后，从

  var audioElement = new Audio();
  audioElement.src = "http://localhost:9877/audio.wav";

到

  var audioElement = new Audio();
  audioElement.crossOrigin = "anonymous";
  audioElement.src = "http://localhost:9877/audio.wav";

在 Firefox 中为我解决了这个问题，chrome 有时可以工作，但似乎还有其他一些问题（可能与加载时间有关？）。

我相信 chrome 中的第二个问题是我立即调用 .play()，然后在它发出 ended 事件时结束我的测试。但是当缓冲区为空时，该事件似乎也会触发，我认为是一个错误。我将其更改为在调用.play() 之前等待canplaythrough 事件，现在它似乎可靠地通过了测试。

【参考方案2】：

某些浏览器实现会阻止自动播放<audio> 元素的尝试，除非发生了用户交互（出于显而易见的原因）。

this similar question 中有几个建议，但它们都试图规避设计的功能，并且在多个浏览器/设备上可能不太可靠。

根据您的设置和所针对的浏览器，您可能需要在测试中考虑 “点击开始” 按钮。