HTML 5 Audio Tag 缓冲时间长答案

【问题标题】：HTML 5 Audio Tag long buffer timeHTML 5 Audio Tag 缓冲时间长
【发布时间】：2015-04-19 11:09:34
【问题描述】：

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

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

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

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

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

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

非常感谢您的帮助！

【问题讨论】：

标签： html performance audio delay html5-audio

【解决方案1】：

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

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

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

【讨论】：

感谢您的快速回复！我已经为“canplay”、“canplyathrough”、“play”和“playing”实现了一个监听器。他们几乎同时开火。我假设音频标签有一个定义的最小值，你知道我该如何改变它吗？还是有其他（可能是 jQuery）播放速度更快的播放器？例如 youtube 视频也可以立即“无”缓冲开始。不幸的是，我也无法预加载下一个文件，因为我的播放器总是需要用户进行选择。
我知道createjs.com/SoundJS、github.com/goldfire/howler.js 和jplayer.org 通常处理网络音频。也许您也可以查看 HTML5 音频的 .buffered 属性，以自行决定何时加载足以满足您的口味。
我已经对您发布的播放器进行了简要介绍，也许他们会解决这个问题。但是我仍然需要进一步测试它们。缓冲属性是个好主意，但不幸的是只读的。我当然可以通过 JS 检查已经缓冲了多少，但是我怎么能强制音频开始呢？
您说的完全正确，它不会改变任何东西。昨天没想到最后，不好意思。在加载 HTML5 音频/视频资源期间，以下事件按此顺序触发：loadstart、durationchange、loadedmetadata、loadeddata、progress、canplay、canplaythrough... 也许您可以收听所有这些事件并且总是 console.log audio.buffered和 audio.networkState 以了解为什么通过 HTML5 而不是通过 VLC 需要这么多时间。
Soo：我做了更多的挖掘，我发现当我简单地将 mp3 包装在 m3u 文件中时不会发生这种延迟（所以只将 url 粘贴到空白文件中）但是我现在面对其他三个问题： 1. 我需要即时将 mp3 包装成 m3u。 2.文件一直循环播放，这是因为它实际上是一个播放列表格式（我猜）。 3. 因此，我无法处理普通媒体播放器所需的回调。你知道这些问题的任何可能的解决方案吗？我自己现在正在对该主题进行大量研究，但我的目标似乎很少见。