7

我正在尝试使用 javascript 预加载音频文件。我正在使用chrome，当我的文件的http请求增长的文件数被chrome取消时......为什么？我能做些什么？这是我的代码：

filesToLoad = 44;
filesLoaded = 0;

for ( var ni = 1; ni < filesToLoad; ni++) {

    console.log("start::: " + ServerPath + 'audio/' + ni + '.mp3');
    loadAudio(ServerPath + 'audio/' + ni + '.mp3');
}

function loadAudio(uri) {
    var audio = new Audio();
    audio.addEventListener('canplaythrough', isAppLoaded, true); // It
    audio.src = uri;
    return audio;
}

function isAppLoaded() {
    filesLoaded++;
    if (filesLoaded >= filesToLoad) {
        cb();
    }
    console.log("load::: " + ServerPath + 'audio/' + filesLoaded + '.mp3');
}

function cb() {
    alert("loaded");
}
4

1 回答 1

0

我试图做同样的事情。我预加载了 12 个音频和 12 个图像文件，以准备基于它们的交互活动。我遇到了同样的问题（请求被取消）。

我整理了这个对我有用的例程（到目前为止已完成 Chrome 测试）。 

    cacheLessonFiles: function (lessonWords, cacheImg, cacheAudio) {
        var
        fileName = '',
        img = {},
        audio = {},
        wordIDs = Object.keys(lessonWords)
        ;
        wordIDs.forEach(function (wordID) {
            if (cacheImg) {
                fileName = lessonWords[wordID].img || wordID;
                img = new Image();
                img.onload = function () {
                    console.log('cache: finished caching ' + this.src);
                };
                img.src = "/img/" + fileName + imageSuffix;
            }
            if (cacheAudio) {
                fileName = lessonWords[wordID].saySpanish || wordID;
                audio = new Audio();
                audio.onloadeddata = function () {
                    console.log('cache: finished caching ' + this.src);
                };
                audioArray.push({a: audio, f:"/audio/" + fileName + audioSuffix});
            }
        });
        setTimeout(loadAudio, AUDIO_LOAD_WAIT);
    },

该例程仅加载图像文件而无需特殊处理。图像文件更棘手。我不只是为循环中的所有音频文件设置源，而是使用音频元素和关联的源文件名 (.mp3) 填充了一个数组。然后我在超时时启动了一个自启动回调来处理数组，在请求之间暂停 200 毫秒。

function loadAudio () {
    var
    aud = audioArray.pop()
    ;
    aud.a.src = aud.f;
    if (audioArray.length > 0) {
        setTimeout(loadAudio,  AUDIO_LOAD_WAIT);
    }
}

一个常量和一个变量在闭包内，但在 cacheLessonFiles() 方法之外。

AUDIO_LOAD_WAIT = 200,
audioArray = []

我尝试了小于 200 毫秒的等待时间，但取消的请求开始重新出现。

我想象连接较慢的客户端（我在光纤上）可能会再次出现故障，但这对于我的目的来说已经足够好了。

于 2014-03-25T23:47:00.393 回答