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/

Answer 2

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

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

2 个答案: