Предварительная загрузка аудио файлов / событий? - PullRequest
Новая
       5

Предварительная загрузка аудио файлов / событий?

1 голос
/ 17 февраля 2012

Я предварительно загружаю все свои ресурсы перед тем, как запустить приложение на основе 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();
        }
    }
});

Это прекрасно работает, когда у меня в массиве всего png с, но при добавлении аудио) элемент DOM создается, но он никогда не запускает onload, поэтому приложение никогда не запускается.Я уже пытался добавить tmp.load(), но это не имело никакого значения - также я не мог найти исчерпывающую информацию в Интернете.Возможен ли такой подход?Audio() даже запускает соответствующее событие?Спасибо!

1 Ответ

2 голосов
/ 17 февраля 2012

Вы ищете медиа-события , в которых говорится, что вы можете использовать, например, 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
});
...