जावास्क्रिप्ट एचटीएमएल 5 ऑडियो प्रीलोड

Question

पर http अनुरोध रद्द कर दिया गया है मैं जावास्क्रिप्ट के साथ ऑडियो फ़ाइलों को प्रीलोड करने की कोशिश कर रहा हूं। मैं क्रोम, का उपयोग कर रहा हूं जब मेरी फ़ाइलों के http अनुरोध को बढ़ाने वाली फ़ाइलों की संख्या क्रोम द्वारा रद्द कर दी गई है ... क्यों? मैं क्या कर सकता हूँ? यह मेरा कोड है:

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 छवि फ़ाइलों को प्रीलोड कर रहा था। मुझे एक ही समस्या मिल रही थी (अनुरोध रद्द)।

मैंने इस दिनचर्या को एक साथ रखा जो मेरे लिए काम करता है (क्रोम परीक्षण अब तक किया गया है)।

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) के साथ एक सरणी पॉप्युलेट की। मैंने फिर सरणी को संसाधित करने के लिए टाइमआउट में एक स्व-आरंभिक कॉलबैक लॉन्च किया, अनुरोधों के बीच 200ms के लिए रुक गया।

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

एक स्थिर और एक चर बंद होने के भीतर हैं, लेकिन कैशLessonFiles() विधि के बाहर हैं।

AUDIO_LOAD_WAIT = 200, 
audioArray = [] 

मैंने 200ms से कम प्रतीक्षा समय की कोशिश की, लेकिन रद्द किए गए अनुरोध फिर से दिखने लगे।

मुझे लगता है कि धीमे कनेक्शन (मैं फाइबर पर हूं) के अंत में ग्राहकों को फिर से विफलताओं की संभावना होगी, लेकिन यह मेरे उद्देश्यों के लिए काफी अच्छा काम कर रहा है।