播放MP3,而不是使用HTML5音频标签进行下载

2022-04-08 00:00:00 audio mp3 javascript

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才开始。

相关文章