在使用播放按钮之前预加载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被下载，然后它开始播放。然而，如果它有1mb，它可能需要一段时间。我需要的是预加载(就像你可以对图像做的那样)。因此，当页面加载时，mp3将被流式传输，如果，例如，10秒后，用户按下"播放"按钮，他不必等到mp3被下载，因为它已经被流式传输了。

任何想法?提前感谢任何提示!

Answer 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 />:

中添加一个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 <audio>元素的preload属性，并退回到<embed>。