httpリクエストがjavascriptでキャンセルされましたhtml5 audio preload

Question

私はjavascriptでオーディオファイルをプリロードしようとしています。私はクロムを使用しています 私のファイルの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"); 
} 

Answer 1

私は同じことをしようとしました。私はそれらに基づいてインタラクティブな活動の準備のために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 = [] 

待機時間は200ms未満でしたが、キャンセルされたリクエストが再び表示され始めました。

遅い接続の最後のクライアント（私はファイバを使用しています）は、もう一度障害が発生する可能性が高いと思いますが、これは私の目的にとって十分です。