预加载音频文件/事件? [英] Preload Audio Files / Event?

问题描述

在启动基于 JS 的应用程序之前，我正在预加载我的所有资产:

I am preloading all my assets before I start a JS-based application doing:

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() 甚至会触发适当的事件吗?谢谢！

This works fine when I have just pngs in my Array, yet when I add audio (mp3s) the DOM element gets created, yet it never fires an onload so the app never starts. I tried adding a tmp.load() already but it didn't make any difference - also I couldn't really find any comprehensive information on the web. Is this approach even possible? Does an Audio() even fire an appropriate event? Thanks!

推荐答案

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

You're looking for media events, which says you could use e.g. loadeddata.

我想谈谈其他几点:

• 正则表达式字符组内的字符不需要转义.
• 为什么不使用 jQuery 来创建元素和绑定事件处理程序?

我稍微修改了你的代码:

I altered your code a little bit:

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

这篇关于预加载音频文件/事件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！