13

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

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

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

当我们尝试同时加载超过 6 个音轨时,就会出现问题,如以下链接所示:

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

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

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

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

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

谢谢,请帮忙!

4

5 回答 5

4

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

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

于 2015-09-30T09:31:53.607 回答
3

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

阅读更多 @ ehow.com

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

于 2013-12-05T12:09:50.603 回答
3

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

于 2015-08-01T14:40:17.160 回答
0

备查:

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

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

于 2014-07-23T04:15:55.167 回答
0

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

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

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

于 2017-10-11T08:49:13.627 回答