使用"播放"按钮之前预加载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

您可以<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功能,可以调用.play()返回的<audio />元素.你甚至可以添加一个播放方法<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/