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