播放MP3,而不是使用HTML5音频标签进行下载 [英] Streaming MP3 instead of downloading it with HTML5 audio tag

查看:23
本文介绍了播放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才开始。

这篇关于播放MP3,而不是使用HTML5音频标签进行下载的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆