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

Question

在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

Answer 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之前无法启动。