HTML 5 Audio Tag 缓冲时间长

Question

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

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

这很好用，但我注意到音频标签在播放文件(Chrome 和 Safari)之前需要很长时间来缓冲，这会导致几秒钟的延迟，从而显着降低用户体验。

在 Chrome 中检查控制台，我注意到音频大多数时候开始一次。 5 MB 已“转移”。

我还检查了是否是由于服务器的延迟并在 VLC-Player 中加载了音频文件。然而，这里马上就开始了，一点儿也没有耽搁。

有谁知道，为什么 Chrome 会这样做？更重要的是:有人知道解决这个问题的方法吗？解决方法或音频标签替代方案？

我将衷心感谢您的帮助!

Answer 1

看看 HTML5 Audio 的“canplaythrough”事件。当音频能够在没有缓冲的情况下播放时触发此事件。您可以将监听器绑定(bind)到该事件，该事件将播放音频。

也许这会比只播放音频要快，后者将等待下载完整的文件。

在那里我演示了如何预加载 HTML5 音频:preloading the next song in a playlist a bit before the current one ends