richiesta http cancellata su javascript html5 preload audio

Question

Sto provando a precaricare i file audio con javascript. Sto usando chrome, Quando il numero di file che crescono nella richiesta http dei miei file viene annullato da chrome ... perché? cosa posso fare? Questo è il mio codice:

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

stavo cercando di fare la stessa cosa. Stavo pre-caricando 12 file audio e 12 file di immagini in preparazione per attività interattive basate su di essi. Stavo ricevendo lo stesso problema (richieste annullate).

Ho messo insieme questa routine che funziona per me (test di Chrome fatto finora).

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

La routine carica solo file di immagine senza una gestione speciale. I file di immagine erano più complicati. Invece di impostare semplicemente la sorgente per tutti i file audio nel loop, ho popolato una matrice con l'elemento audio e il nome del file sorgente associato (.mp3). Ho quindi lanciato una richiamata autoiniziata in un timeout per elaborare l'array, sospendendo per 200ms tra le richieste.

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

Una costante e una variabile sono all'interno della chiusura, ma all'esterno del metodo cacheLessonFiles().

AUDIO_LOAD_WAIT = 200, 
audioArray = [] 

Ho provato tempi di attesa inferiori a 200 ms, ma le richieste annullate hanno iniziato a riapparire.

Immagino che i client alla fine di connessioni più lente (sono in fibra ottica) probabilmente avranno di nuovo dei guasti, ma questo funziona abbastanza bene per i miei scopi.