预加载音频文件/事件?

Posted

技术标签:

【中文标题】预加载音频文件/事件?【英文标题】:Preload Audio Files / Event? 【发布时间】:2012-02-17 16:43:47 【问题描述】:

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

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

当我的数组中只有 pngs 时,这很好用,但是当我添加音频 (mp3s) 时,DOM 元素被创建,但它永远不会触发 onload,因此应用程序永远不会启动。我已经尝试添加tmp.load(),但没有任何区别——我也无法在网上找到任何全面的信息。这种方法甚至可能吗? Audio() 是否会触发适当的事件?谢谢!

【问题讨论】:

preload 属性对你没有好处吗? 【参考方案1】:

您正在寻找media events,它表示您可以使用例如loadeddata.

我想谈谈其他几点:

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

我稍微修改了你的代码:

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

【讨论】:

感谢 RegExp 的提示

以上是关于预加载音频文件/事件?的主要内容,如果未能解决你的问题,请参考以下文章

预加载音频文件

javascript中的完整预加载音频

如何在 HTML 5 中为音频、视频、css、图像创建预加载器?

在移动设备上预加载音频

用于预加载整个流的 Html 音频标签

预加载音频并在播放期间应用 css