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

How to make Chrome and/or Firefox play <audio> elements in Karma tests?

本文关键字：播放 元素 音频 测试 Karma Chrome Firefox      更新时间：2023-09-26

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

对于上下文，HTML5 音频脚本处理器在连接到 <audio> 元素后立即获得音频流，但在元素开始播放之前，它都是 0(没有声音(。

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

(我知道测试期间的音频可能非常烦人，默认情况下可能应该禁用，但是有没有办法为像我这样的情况启用它？

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

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

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

我似乎在任何地方都找不到任何关于此的文档，但我碰巧注意到有关CORS的chrome错误，并进行了更多的挖掘和实验。似乎跨域<audio>元素的脚本处理器需要与<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事件，它现在似乎可靠地通过了测试。

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

在这个类似的问题中有几个建议，但它们都试图绕过设计的功能，并且在多个浏览器/设备上可能不是很可靠。

根据您的设置和目标浏览器，您可能需要在测试中考虑"单击开始">按钮。

相关文章：