javascript - 流式传输 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 之前下载不会开始。