音频 HTML5 检查是否所有音频元素都已完全加载

Question

我正在构建一个使用音频的测验，并标记了用户的响应时间，因此我希望在用户开始测验之前完全加载所有音频 html 元素。

我只需要某种循环来检查所有音频元素是否已完全加载所有 song/audio。

我看过 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 and/or 不关心旧版浏览器：

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

音频 HTML5 检查是否所有音频元素都已完全加载

Audio HTML5 check if all audio elements have fully loaded

javascript

html

html5-audio