播放MP3，而不是使用HTML5音频标签进行下载-前端问题

Streaming MP3 instead of downloading it with HTML5 audio tag(播放MP3，而不是使用HTML5音频标签进行下载)

本文介绍了播放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音频标签进行下载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！