Правильная загрузка для <audio>

Question

Я оглядывался, и я начинаю волноваться, что это невозможно.
Есть ли способ, чтобы сделать стандартный <audio> тег откаты ...

<audio> 
    <source src='song.ogg' type='audio/ogg'></source> 
    <source src='song.mp3' type='audio/mp3'></source> 
</audio> 

... есть событие OnLoad. Я огляделся, и все, что я мог найти, это некоторые хаки, которые могут или не могут работать (они не для меня в Chrome) и событие canplaythrough.
Причина, по которой я хочу, это потому, что я делаю презентацию, в которой есть много аудиоклипов для воспроизведения в определенных точках. Я не хочу, чтобы презентация начиналась до тех пор, пока все аудио не загрузится (в противном случае ситуация может выйти из синхронизации). Я хочу, чтобы клипы загружались по одному за раз, чтобы я мог создать своего рода панель загрузки. Я действительно не хочу прибегать к использованию Flash-звука, потому что это должно продемонстрировать чистые веб-технологии.

Итак, у меня есть эта функция loadAudio, которая циклически проходит через массив загружаемых аудиофайлов audioQueue. loadAudio вызывается один раз, а затем он вызывает себя, пока не будут загружены все файлы. Проблема: я не нашел правильное событие для запуска загрузки следующего файла.

loadAudio = function(index) 
{ 
mer = audioQueue[index]; 
var ob = "<audio id='" + mer + "'><source src='resources/sounds/" + mer + ".ogg' type='audio/ogg'></source><source src='resources/sounds/" + mer + ".mp3' type='audio/mp3'></source></audio>"; 
$("#audios").append(ob); 
$("#" + mer).get(0).addEventListener('A WORKING EVENT RIGHT HERE WOULD BE NICE', function() { alert("loaded"); 
    if (index + 1 < audioQueue) { loadAudio(index + 1); } }, false); 
} 

So. Есть ли вероятность правильной загрузки звука? Я в основном готов сделать что угодно, пока все еще есть HTML и Javascript.

Answer 1

Вы можете использовать loadeddata - MediaEvent. Например, вы можете поместить все ваши аудио файлы в массиве и сделать что-то вроде:

var files = ['a.mp3', 'b.mp3']; 

$.each(files, function() { 
    $(new Audio()) 
     .on('loadeddata', function() { 
      var i = files.indexOf(this); 
      files.splice(i, 1); 
      if (!files.length) { 
       alert('Preloading done!'); 
      } 
     }) 
     .attr('src', this); 
}); 

EDIT: это будет немного более современный подход, как в 2016 году:

var files = ['a.mp3','b.mp3']; 

Promise 
    .all(files.map(function(file) { 
     return new Promise(function(resolve) { 
      var tmp = new Audio(); 
      tmp.src = file; 
      tmp.addEventListener('loadeddata', resolve); 
     }); 
    })).then(function() { 
     alert('Preloading done!'); 
    }); 

Answer 2

Я сделал небольшую PONG-игру с WebGL и некоторые аудио-теги для звуков. Я позаимствовал аудио-реализацию из реализации Opera Emberwind HTML5: https://github.com/operasoftware/Emberwind/blob/master/src/Audio.js

Их решение отлично работало для меня (Chrome, Opera и Firefox). Может быть, это может вас заинтересовать? У них есть код, который попытается найти воспроизводимый формат из строки 22 и ниже.