在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仍然会预加载资源.