javascript - 在 Javascript 中预加载音频时出现问题

Question

我正在尝试为我正在处理的 GameAPI 制作跨设备/浏览器图像和音频预加载方案。音频文件将预加载，并在完成后发出回调。

问题是，音频不会在页面加载缓慢时开始加载，但通常会在第二次尝试时正常工作，可能是因为它缓存了它并且知道它存在。

我已将范围缩小到 audio.load() 函数。摆脱它可以解决问题，但有趣的是，我的摩托罗拉机器人需要该功能。

您对 HTML5 音频预加载有哪些经验？

这是我的代码。是的，我知道在单独的函数中加载图像可能会导致竞争条件 :)

var resourcesLoading = 0;

function loadImage(imgSrc) {
    //alert("Starting to load an image");
    resourcesLoading++;

    var image = new Image();
    image.src = imgSrc;

    image.onload = function() {
        //CODE GOES HERE
        //alert("A image has been loaded");
        resourcesLoading--;
        onResourceLoad();
    }
}

function loadSound(soundSrc) {
    //alert("Starting to load a sound");
    resourcesLoading++;

    var loaded = false;

    //var soundFile = document.createElement("audio");
    var soundFile = document.createElement("audio");
    console.log(soundFile);
    soundFile.autoplay = false;
    soundFile.preload = false;

    var src = document.createElement("source");
    src.src = soundSrc + ".mp3";
    soundFile.appendChild(src);

    function onLoad() {
        loaded = true;

        soundFile.removeEventListener("canplaythrough", onLoad, true);
        soundFile.removeEventListener("error", onError, true);

        //CODE GOES HERE
        //alert("A sound has been loaded");
        resourcesLoading--;
        onResourceLoad();
    }

    //Attempt to reload the resource 5 times
    var retrys = 4;

    function onError(e) {
        retrys--;

        if(retrys > 0) {
            soundFile.load();
        } else {
            loaded = true;

            soundFile.removeEventListener("canplaythrough", onLoad, true);
            soundFile.removeEventListener("error", onError, true);

            alert("A sound has failed to loaded");
            resourcesLoading--;
            onResourceLoad();
        }
    }

    soundFile.addEventListener("canplaythrough", onLoad, true);
    soundFile.addEventListener("error", onError, true);
}

function onResourceLoad() {
    if(resourcesLoading == 0)
        onLoaded();
}

很难诊断问题，因为它没有显示任何错误，只是偶尔失败。

Answer 1

我成功了。解决方案实际上相当简单:

基本上，它是这样工作的:

channel.load();
channel.volume = 0.00000001;
channel.play();

如果不是很明显，load 函数会告诉支持它的浏览器和设备开始加载，然后声音会立即尝试使用 play >volume 几乎为零。因此，如果 load 函数还不够，那么“需要”播放声音这一事实就足以触发我测试的所有设备上的负载。

load 函数现在可能实际上是多余的，但基于与音频实现的不一致，拥有它可能不会有什么坏处。

编辑:在 Opera、Safari、Firefox 和 Chrome 上测试后，将 volume 设置为 0 似乎仍会预加载资源。