暂停 HTML5 音频元素会导致整个文件被下载

Posted 2023-02-25

【中文标题】暂停 HTML5 音频元素会导致整个文件被下载

【英文标题】：Pausing a HTML5 Audio element causes the entire file to be downloaded

【发布时间】：2012-04-11 10:46:27

【问题描述】：

我有一个页面上有很多音频元素，其中一些很长（最多约 2 小时）。本质上，它们是这样创建和控制的：

var a = new Audio();
a.preload = 'metadata';
a.src = 'long-track.mp3';

a.play();

当它播放时，浏览器（在本例中为 Chrome）正确地发出范围请求，并且服务器返回“206 Partial Content”，看起来每次大约 2 分钟的数据。加载约 2mb 的数据后，它会停止请求数据。到现在为止还挺好。然后，执行：

a.pause();

这会导致浏览器下载文件的整个剩余部分。 (!!?!~@!!!?) 显然，如果用户决定收听几首曲目的前几秒，这可能是个问题：他们会开始下载 GB不需要的数据。

我看到过一些其他问题在问how to force the full file to be buffered，但实际上我想要的恰恰相反。

【参考方案1】：

虽然应该有，但没有官方功能可以做到这一点，但似乎普遍的共识是，以下代码是做你想做的最好的方法

a.src = '';
a.load();

jPlayer implements this method 停止音频缓冲。唯一的问题是，there may be cross-browser problems 使用这种方法。如果失败了，您可以尝试从页面中删除音频元素，您尝试过吗？

【讨论】：

你知道当用户想要取消暂停时它是如何工作的吗？

一旦你这样做了，那个特定的播放就不能恢复了。我想这只有在你有自己的音频元素 GUI 而不是使用原生 播放器时才可行。您可以通过以下方式创建恢复功能：记下停止的时间，然后在恢复时：创建新的音频元素，并从前一个时间开始播放。