HTML 5音频标签长缓冲时间

Question

我目前在一个项目中使用HTML 5音频标签。我从外部源加载一个MP3文件，然后像这样启动它：

$("#audioPlayer").attr("src",audioStreamURL);
document.getElementById("audioPlayer").play()

这段代码可以正常工作，但我发现 Audio-Tag 在播放文件之前需要缓冲很长时间（Chrome 和 Safari），这会导致几秒钟的延迟，从而显著降低用户体验。

在 Chrome 的控制台中查看，我发现音频大多数情况下在传输约 5 MB 后才开始播放。

我还检查了服务器的延迟是否是原因，并在 VLC 播放器中加载了音频文件。然而，在这里它立即开始，没有任何延迟。

有人知道为什么 Chrome 这样做吗？更重要的是，有人知道解决这个问题的方法吗？或者有无 Audio-Tag 的替代方案？

我真的非常感谢您的帮助！

- Marc Becker

Answer 1

请看HTML5音频的"canplaythrough"事件。当音频能够无需缓冲即可播放时，此事件将触发。您可以绑定一个监听器到该事件上，以便播放音频。也许这比直接播放音频更快，因为后者需要等待完整的文件下载。

在这里，我演示了如何预加载HTML5音频：预加载播放列表中下一首歌曲。

- dsuckau

---

我已经浏览了你发布的玩家，并且也许他们会解决这个问题。然而，我仍然需要进一步测试它们。缓冲属性是一个很好的想法，但不幸的是只读的。当然，我可以通过JS检查已经缓冲了多少，但是如何强制音频开始播放呢？ - Marc Becker

Soo: 我进行了更深入的研究，发现当我简单地将mp3包装在m3u文件中时（即只需将url粘贴到空文件中），就不会出现这种延迟。但是，现在我面临着三个其他问题：1.我需要实时将mp3包装到m3u中。2.文件一直循环播放，这是因为它实际上是一个播放列表格式（我猜）。3.因此，我无法处理普通媒体播放器所需的回调。你知道这些问题的可能解决方案吗？我正在该主题上做很多研究，但似乎我的目标相当罕见。 - Marc Becker

另外，我需要流式传输m4a文件而不是mp3，但这是目前为止最有希望的方法。 - Marc Becker

我对播放m3u文件没有经验，但我认为这不应该是正确的方法，感觉很不对。也许你可以再次发布所有相关的代码，包括如何构建音频标签。还有可能提供一个在线示例... - dsuckau

你曾经解决过这个问题吗？我现在也遇到了同样的问题。在Chrome中，音频启动非常快，但是在为移动设备开发时，它会不必要地缓冲很长时间（例如首先下载5-10 MB）。 - David Schumann