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

Question

问题：音频文件经常无法加载。 因为它们甚至都不显示在Chrome Dev Tools的“网络”标签下。

测试用例：

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

重现步骤：

1. 在Chrome浏览器中打开新标签页
2. 打开“开发工具”
3. 选择“网络”标签
4. 在当前标签中打开测试用例“ index.html”
5. 请参阅“说明”，然后根据需要刷新

说明：

• 第一次加载测试用例时，您会注意到所有3个音频文件都显示在“网络”选项卡中。 它们将全部开始并成功完成加载。
• 但是，刷新后，可能没有音频文件显示或再次加载。
• 奇怪的是，等待一两分钟后，问题暂时消失，下次刷新将再次正确加载所有音频文件。
• 但是之后，加载将像以前一样失败。

Answer 1

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

是的，我想我只是将这个行为误解为一个问题，因为我看到HTML5视频游戏经常卡在“预加载”阶段，而且似乎应该归咎于这些音频文件，因为删除它们可以解决问题。

我发现如果执行测试用例中的操作，仅创建Audio对象但不将其添加到DOM中， 通常我会从其中获得可canplay事件，但并非总是如此-大约是十分之一，两倍，甚至三倍他们会不火canplay 。 但是，如果我将它们附加到DOM，则总是会发生canplay事件。

因此，如果您不将它们添加到DOM中（仅document.body.appendChild(new Audio(path));就足够了），则可能是导致预加载永不结束问题的原因。