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

1 つの定数と 1 つの変数がクロージャ内にありますが、cacheLessonFiles() メソッドの外にあります。

AUDIO_LOAD_WAIT = 200,
audioArray = []

待機時間を 200 ミリ秒未満にしてみましたが、キャンセルされたリクエストが再び表示されるようになりました。

接続が遅い (私は光ファイバーを使用している) クライアントでは、再び障害が発生する可能性が高いと思いますが、これは私の目的には十分に機能しています。

于 2014-03-25T23:47:00.393 に答える