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