使用“播放”按钮之前预加载 MP3 文件

Question

我有以下代码：

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 被首先下载，因为它已经被流式传输。

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

Answer 1

对于较新的浏览器，您可以使用 进行预加载。设置autoplay = false。对于不支持 的旧版浏览器，您可以使用 。要预加载声音，请将音量设置为 -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;
}

这将在浏览器的缓存中获取声音。然后，要播放它，您可以继续使用 执行当前操作。或者，如果您想利用 HTML5 功能，可以在返回的 元素上调用 .play() 。您甚至可以向 添加一个播放方法：

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/

Answer 2

您可以使用 HTML5 元素preload 属性，并依靠 。