播放MP3,而不是使用HTML5音频标签进行下载
在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
解决方案
您非常接近正确。我已经看过你的JSFdle,注意到音频已经流了(我可以在文件下载完成之前播放它)。您可以通过查看浏览器中的网络流量轻松查看:
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.
由于您没有显示有关音频文件的任何信息,我们可以忽略元数据选项,这意味着您希望设置preload="none"
属性。因此,如果您稍微更改您的JSFidel以动态设置:
audioElement.setAttribute('preload', "none");
audioElement.setAttribute('src', 'http://www.mfiles.co.uk/mp3-downloads/Toccata-and-Fugue-Dm.mp3');
这里有一个JSFiddle显示的结果,如果你在Chrome中打开网络标签,你会看到下载直到你开始播放mp3才开始。
相关文章