使用播放按钮前预加载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，因为它已经被流式传输。

有任何想法吗？感谢您提供的任何提示！

- Gabriel

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 />添加一个播放方法:

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();

唯一的问题是火狐浏览器不支持mp3格式。你需要将文件转换为ogg格式。

演示链接：http://jsfiddle.net/PMj89/1/

- gilly3

---

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

Answer 2

你可以使用HTML5 <audio> 元素的preload 属性，并且还可以借助<embed>元素进行回退处理。

- Ry-