仅 Chrome 加载 6 个 HTML5 音频标签

Posted 2023-03-05

【中文标题】仅 Chrome 加载 6 个 HTML5 音频标签

【英文标题】：Chrome only Loading 6 HTML5 audio tags

【发布时间】：2013-06-04 23:22:44

【问题描述】：

我们正在 wavestack.com 开展项目，我们正在处理一个给我们带来困难的问题。

我们的页面应该同时从流媒体源加载许多音频标签。您可以在以下链接中查看概念：

http://wavestack.com/songs/nTNonwsCSg932CtzPLk1FA==

当我们尝试同时加载超过 6 首曲目时，问题就出现了，如以下链接所示：

http://wavestack.com/songs/hp7G8CSsg45t3fV5YNeqbQ==

此页面在 Firefox 和 IE10 上运行良好，但在 Chrome 中不可用。

我们还注意到一些奇怪的事情：

我在控制台中打印一个计数器的值，当音频标签触发事件“canplaythtough”时，计数器的值会增加，我们总共得到 6 个，而应该是 7 个。奇怪的是当您在第 472 行设置断点（如附图所示）然后恢复时，它确实命中了 7 次

最后，CHROME 不会同时加载超过 6 个曲目，但是当您在 canplaythrough 的处理程序中放置断点时，它会奇怪地加载。

谢谢，请帮忙！

【问题讨论】：

你最终做了什么？我目前面临着类似的问题。

【参考方案1】：

默认情况下，Chrome 允许您同时下载五个或六个文件，因为这是大多数 Windows 安装中的默认值。如果您需要下载五个以上的文件，Chrome 会将一些目标文件放入队列中，然后在五个插槽之一可用时立即下载它们。 Chrome 不允许您更改应用程序本身的并发下载数量。但是，通过编辑 Windows 注册表，您可以将 Chrome 或任何其他 Web 浏览器中的同时下载数量设置为您选择的任意数量。

阅读更多@ehow.com

解决方案：您可以用来增加并发连接数的一个技巧是托管来自不同子域的视频文件。这些将被视为单独的请求，每个域都将被限制为并发最大值。

【参考方案2】：

供将来参考：

同时加载它们是不好的做法，因为网速较慢的人根本无法使用您的网站。所有的下载都会使每次下载都很慢。

最好使用 javascript 动态创建音频元素。

【参考方案3】：

我认为这个问题可以通过将音频标签的preload属性设置为metadata来解决。

【参考方案4】：

像这样设置音频（和视频）标签的预加载属性：<audio controls preload="none">

这样媒体文件不会在页面加载时下载（尤其要考虑移动性能）。当用户按下播放时，相关文件将正常下载。

【讨论】：

这不起作用。即使您使用 preload="none" 加载所有音频标签并在点击事件上处理此属性：当您想要播放音频时添加 preload="auto" 并在您不想再播放时切换回“none”，从而避免并行下载...仍然有问题。

【参考方案5】：

在 html 页面上加载所有音频标签的最简单方法是使用 async。

<audio async preload src="hit1.mp3"></audio>

我正在开发一个网络应用程序（游戏），所以这对我来说是一个完全合理的解决方案。