流式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在这里

Answer 1

你非常接近正确.我已经看过你的JSFiddle,并注意到音频已经流了(我可以在它完成下载之前播放该文件).您可以通过检查浏览器中的网络流量轻松查看此内容:

Chrome会显示"部分内容",但会同时播放mp3.您的具体问题似乎是下载和播放太早.因此,如果我们看看规格,我们可以看到一些选项.

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之前没有开始.