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

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

1 个答案: