오디오 HTML5는 모든 오디오 요소가 완전히로드되었는지 확인합니다.

Question

오디오를 사용하고 사용자의 응답 시간에 표시되는 퀴즈를 작성하므로 사용자가 시작하기 전에 모든 오디오 HTML 요소를 완전히로드해야합니다. 놀리다.

모든 오디오 요소에 모든 노래/오디오가 완전히로드되었는지 확인하는 일종의 루프가 필요합니다.

나는 readyState 등을 보았지만 페이지의 모든 오디오 루프 내에서 그 사용법을 찾을 수 없습니다. 가능한 경우 자바 스크립트 또는 jQuery 솔루션을 싶습니다.

나는 그것을 할 것입니다 아래와 같이 무언가를 생각하지만, 아니 :

var ready_count = 0; 
var x = document.getElementsByClassName("question-audio"); 
    for (var i = 0; i < x.length; ++i) { 
     var item = x[i]; 
     item.addEventListener("readystatechange", function() { 
     if (item.readyState == 4) { 
      ready_count++; 
     } 

    } 
if(ready_count == x.length){ 
    //do something 
} 

어떤 도움 감사합니다. 당신이 jQuery를하지 않아도 및/또는 이전 버전의 브라우저 걱정하지 않는 경우

function audioReady(){ 
    return $.when.apply($, $('audio').map(function(){ 
    var ready = new $.Deferred(); 
    $(this).one('canplay', ready.resolve); 
    return ready.promise(); 
    })); 
} 

하기 :

function audioReady(){ 
    var audio = [].slice.call(document.getElementsByTagName('audio')); 
    return Promise.all(audio.map(function(el){ 
    return new Promise(function(resolve, reject){ 
     el.addEventListener('canplay', resolve); 
    }); 
    })); 
} 

어느 쪽이든, 당신이 수행 할 수 있습니다

Answer 1

는 여기에 jQuery를 버전입니다 이 기능을 다음과 같이 사용하십시오 :

audioReady().then(function(){ 
    // do something 
});