solicitud http cancelada en JavaScript precarga de audio html5

Question

Estoy intentando cargar archivos de audio con javascript. Estoy usando chrome, Cuando la cantidad de archivos que crecen, la solicitud http de mis archivos se cancela por cromo ... ¿por qué? ¿que puedo hacer? Este es mi código:

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

yo estaba tratando de hacer lo mismo. Estaba precargando 12 archivos de audio y 12 de imagen en preparación para actividades interactivas basadas en ellos. Me estaba dando el mismo problema (solicitudes canceladas).

Arreglo esta rutina que funciona para mí (pruebas de Chrome realizadas hasta el momento).

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 rutina solo carga los archivos de imagen sin un manejo especial. Los archivos de imagen fueron más complicados. En lugar de simplemente configurar la fuente de todos los archivos de audio en el bucle, rellené una matriz con el elemento de audio y el nombre de archivo de origen asociado (.mp3). Luego lancé una devolución de llamada de autoiniciación en un tiempo de espera para procesar la matriz, deteniéndome durante 200 ms entre las solicitudes.

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

Una constante y una variable están dentro del cierre, pero fuera del método cacheLessonFiles().

AUDIO_LOAD_WAIT = 200, 
audioArray = [] 

He intentado esperar menos de 200ms, pero las solicitudes canceladas comenzaron a reaparecer.

Me imagino que los clientes en el extremo de las conexiones más lentas (estoy en fibra) probablemente obtendrían fallas de nuevo, pero esto funciona lo suficientemente bien para mis propósitos.