javascript - 预加载音频文件/事件？

Question

我在开始基于 JS 的应用程序之前预加载我的所有 Assets :

assets = [....]; // files
$.each(assets,function(){
    var r = /\.([^\.]+)$/;
    var ext = r.exec(this); //get file type
    if (ext[1] == 'png'){
        var tmp = new Image();
    } else if (ext[1] == 'mp3'){
        var tmp = new Audio();
    }

    tmp.src = this;
    tmp.onload = function(){
        var i = assets.indexOf(this);
        assets.splice(i,1);
        if (!assets.length){
            console.log('all loaded');
            app.build();
        }
    }
});

当我的数组中只有 png 时，这工作正常，但是当我添加音频 (mp3) 时，DOM 元素被创建，但它永远不会触发 onload所以应用程序永远不会启动。我已经尝试添加一个 tmp.load() 但它没有任何区别 - 而且我真的无法在网上找到任何全面的信息。这种方法甚至可能吗？ Audio() 是否触发了适当的事件？谢谢!

Answer 1

您正在寻找 media events ，它说你可以使用例如加载数据。

我想谈谈其他几点:

• 正则表达式字符组中的字符不需要转义。
• 为什么不使用 jQuery 来创建元素和绑定(bind)事件处理程序？

我稍微修改了你的代码:

$.each(assets, function() {
    var r = /\.([^.]+)$/,
        ext = r.exec(this), //get file type
        tmp = ext[1] === 'png'
                ? $("<img>")
                : $("<audio>"),
        eventName = ext[1] === 'png'
                    ? 'load'
                    : 'loadeddata';

    tmp
      .on(eventName, function() {
          var i = assets.indexOf(this);
          assets.splice(i, 1);

          if (!assets.length){
              console.log('all loaded');
              app.build();
          }
      })
      .attr("src", this); // only set after adding the load callback
                          // to avoid a possible race condition
});