在使用播放按钮之前预加载 MP3 文件答案

【问题标题】：Preload MP3 File before using the Play button在使用播放按钮之前预加载 MP3 文件
【发布时间】：2011-12-08 19:38:45
【问题描述】：

我有以下代码：

function playSound(source) {
    document.getElementById("sound_span").innerHTML =
        "<embed src='" + source + "' hidden=true autostart=true loop=false>";
}

<span id="sound_span"></span>
<button onclick="playSound('file.mp3');"></button>

单击播放后，MP3 将被下载，然后开始播放。但是，如果它有 1 MB 左右，则可能需要一段时间。我需要的是一个预加载的（就像你可以对图像做的那样）。因此，当页面加载时，mp3 将被流式传输，例如，如果 10 秒后，用户按下“播放”按钮，他不必等到 mp3 被首先下载，因为它已经被流式传输。

有什么想法吗？提前感谢您的任何提示！

【问题讨论】：

标签： javascript stream mp3

【解决方案1】：

对于较新的浏览器，您可以使用 <audio /> 进行预加载。设置autoplay = false。对于不支持<audio /> 的旧版浏览器，您可以使用<bgsound />。要预加载声音，请将音量设置为-10000。

function preloadSound(src) {
    var sound = document.createElement("audio");
    if ("src" in sound) {
        sound.autoPlay = false;
    }
    else {
        sound = document.createElement("bgsound");
        sound.volume = -10000;
    }
    sound.src = src;
    document.body.appendChild(sound);
    return sound;
}

这将在您的浏览器缓存中获取声音。然后玩它，你可以继续用<embed /> 做你正在做的事情。或者，如果您想利用 HTML5 功能，您可以在返回的 <audio /> 元素上调用 .play()。您甚至可以在<bgsound /> 中添加播放方法：

function loadSound (src) {
    var sound = document.createElement("audio");
    if ("src" in sound) {
        sound.autoPlay = false;
    }
    else {
        sound = document.createElement("bgsound");
        sound.volume = -10000;
        sound.play = function () {
            this.src = src;
            this.volume = 0;
        }
    }
    sound.src = src;
    document.body.appendChild(sound);
    return sound;
 }

然后像这样使用它：

var sound = loadSound("/mySound.ogg");  //  preload
sound.play();

唯一需要注意的是 FireFox 不支持 mp3。您必须将文件转换为 ogg。

工作演示：http://jsfiddle.net/PMj89/1/

【讨论】：

非常感谢您的回复。看到了工作演示，真的很棒！

【解决方案2】：

您可以使用 HTML5 <audio> 元素的 preload 属性，然后使用 <embed>。

【讨论】：