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