如何强制 HTML5 音频元素缓冲整首歌曲？答案

【问题标题】：How can I force an HTML5 audio element to buffer an entire song?如何强制 HTML5 音频元素缓冲整首歌曲？
【发布时间】：2011-06-13 10:28:04
【问题描述】：

我正在开发一个本地服务器，它将流式传输用户的音频文件，以便他们可以使用 HTML5 音频对象通过 Web 浏览器访问它们。由于这些文件在用户的计算机上，我希望这些文件在加载时会被完全缓冲，但对于某些大文件，歌曲会被缓冲一部分，然后停止，并在一段时间后恢复缓冲。

我的问题是：如何强制音频对象一次缓冲整首歌曲？我可以从 javascript 中做到这一点，我是否必须在音频对象上设置一个属性，或者我还能做些什么吗？

【问题讨论】：

【解决方案1】：

您可以设置 preload="auto" 属性。它不能保证做任何事情，但它应该告诉用户代理尽可能多地缓冲而不用关心远程端。 http://www.whatwg.org/specs/web-apps/current-work/multipage/video.html#attr-media-preload

【讨论】：

【解决方案2】：

我找到的解决方案是这样的：

function load() {
    a.play();
    setTimeout("a.pause()", 10);
}

播放文件并在 10ms 后暂停，然后浏览器将缓冲整首歌曲。

【讨论】：

【解决方案3】：

您可以使用load() 方法。这基本上迫使preload="auto"。但它可能不会缓冲整个事情。

我遇到了音频未预加载到移动设备上的问题（即使使用preload=auto），但这种方法有效。

另一种选择是通过 XMLHttpRequest 将数据加载为二进制 blob，并将 <audio> 元素的 src 属性设置为 blob URI。

（我个人不太喜欢播放/暂停技巧。）

【讨论】：