为什么不能 Chrome 可靠地加载 3 个简单的音频文件？

Question

问题： 音频文件经常加载失败。因为它们甚至没有出现在 Chrome 开发工具中的 "Network" 选项卡下。

测试用例：

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);
});

音频文件：

重现步骤：

在 Chrome 浏览器中打开新标签页
打开"Dev Tools"
Select "Network" 选项卡
在当前选项卡中打开测试用例"index.html"
查看"Explanation"然后根据需要刷新

解释：

第一次加载测试用例时，您会注意到所有 3 个音频文件都显示在 "Network" 选项卡中。他们都将成功开始和完成加载。
然而，刷新后，可能 none 的音频文件会再次显示或加载。
奇怪的是，等待一两分钟后，问题暂时消失，下一次刷新将再次正确加载所有音频文件。
但在那之后，加载将像以前一样失败。

Answer 1

我可以复制它们而不显示在“网络”选项卡中（即使设置了 禁用缓存 标志），但文件确实加载和播放正确 - 大多数时间。

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)); 就足够了），这可能是您的预加载永无止境问题的原因。

为什么不能 Chrome 可靠地加载 3 个简单的音频文件？

Why Can't Chrome Reliably Load 3 Simple Audio Files?

html

javascript

google-chrome

html5-audio