流式传输 MP3 而不是使用 HTML5 音频标签下载它

Posted 2023-02-25

【中文标题】流式传输 MP3 而不是使用 HTML5 音频标签下载它

【英文标题】：Streaming MP3 instead of downloading it with HTML5 audio tag

【发布时间】：2014-06-14 15:44:15

【问题描述】：

在document.ready 函数中，我有这个：

audioElement = document.createElement('audio');

audioElement.setAttribute('src', 'http://www.mfiles.co.uk/mp3-downloads/Toccata-and-Fugue-Dm.mp3');

$('#ToggleStart').click(function () 
    audioElement.play();
);

$('#ToggleStop').click(function () 
    audioElement.pause();
);

问题是在页面加载时会下载 MP3，这会导致加载时间过长，因为 MP3 超过 2MB。我想要的是要流式传输的 MP3。这可能吗？如果可以，我需要改变什么？

jsFiddle here

【参考方案1】：

您已经非常接近正确了。我查看了您的 JSFiddle 并注意到音频已经流式传输（我可以在文件完成下载之前播放文件）。您可以通过检查浏览器中的网络流量轻松看到这一点：

Chrome 显示“部分内容”，但同时正在播放 mp3。您的具体问题似乎是它正在下载和播放太早。因此，如果我们看一下spec，我们可以看到一些选项。

preload = "none" or "metadata" or "auto" or "" (empty string) or empty
Represents a hint to the UA about whether optimistic downloading of the audio stream itself or its metadata is considered worthwhile.
- "none": Hints to the UA that the user is not expected to need the audio stream, or that minimizing unnecessary traffic is desirable.
- "metadata": Hints to the UA that the user is not expected to need the audio stream, but that fetching its metadata (duration and so on) is desirable.
- "auto": Hints to the UA that optimistically downloading the entire audio stream is considered desirable.

由于您没有显示有关音频文件的任何信息，我们可以忽略metdata 选项，这意味着您要设置preload="none" 属性。因此，如果您稍微更改您的 JSFiddle 以动态设置：

audioElement.setAttribute('preload', "none");
audioElement.setAttribute('src', 'http://www.mfiles.co.uk/mp3-downloads/Toccata-and-Fugue-Dm.mp3');

这是显示结果的JSFiddle，如果您在 Chrome 中打开网络选项卡，您会看到在开始播放 mp3 之前下载不会开始。