问题:音频文件经常无法加载。因为它们甚至不会显示在 Chrome 开发工具的“网络”选项卡下。
测试用例:
index.html
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="main.js"></script>
</head>
<body>
</body>
</html>
main.js
['audio1.ogg', 'audio2.ogg', 'audio3.ogg'].forEach((path) => {
new Audio(path);
});
音频文件:
- https://github.com/Joncom/chrome-audio-bug/raw/master/audio1.ogg
- https://github.com/Joncom/chrome-audio-bug/raw/master/audio2.ogg
- https://github.com/Joncom/chrome-audio-bug/raw/master/audio3.ogg
重现步骤:
- 在 Chrome 浏览器中打开新标签页
- 打开“开发工具”
- 选择“网络”标签
- 在当前选项卡中打开测试用例“index.html”
- 查看“说明”，然后根据需要刷新
说明:
- 第一次加载测试用例时，您会注意到所有 3 个音频文件都显示在“网络”选项卡中。它们都将成功启动和完成加载。
- 但是刷新后，可能不会显示或再次加载任何音频文件。
- 奇怪的是，等待一两分钟后，问题会暂时消失，下次刷新将再次正确加载所有音频文件。
- 但之后，加载将像以前一样失败。
最佳答案
我可以复制它们，但它们不会显示在“网络”选项卡中(即使设置了禁用缓存标志)，但文件确实会正确加载和播放 - 大多数时间。
Yes, I think I just mistook this behavior for a problem, because I'm seeing an HTML5 video game frequently get stuck at the "preloading" phase, and it seems these audio files are to blame, because removing them fixes the issue.
我发现，如果我执行测试用例中的操作，只需创建 Audio 对象，但不将其添加到 DOM，通常我从它们那里得到了 canplay 事件，但并非总是如此 - 大约十分之一的乘以一个、两个，甚至全部三个都不会触发 canplay。但如果我将它们附加到 DOM，我总是会收到 canplay 事件。
因此，如果您没有将它们添加到 DOM 中(只需 document.body.appendChild(new Audio(path)); 就足够了)，这可能是预加载的原因 - 永远不会-结束问题。
关于javascript - 为什么 Chrome 无法可靠地加载 3 个简单的音频文件？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41299609/