音頻HTML5檢查所有音頻元素是否已完全加載

Question

我正在構建使用音頻的測驗，並在用戶的響應時間上標記，所以我希望所有音頻html元素都能在用戶啓動之前完全加載測驗。

我只需要一些循環，檢查所有的音頻元素是否完全加載了所有的歌曲/音頻。

我看過readyState等，但我無法找到它在頁面上的所有音頻循環內使用。如果可能，我想要一個JavaScript或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 
} 

任何幫助表示讚賞。

Answer 1

這裏是一個jQuery版本：

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

如果你沒有jQuery和/或不關心舊的瀏覽器：

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

無論哪種方式，你就可以使用功能，例如：

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