適切なオンロード<audio>

Question

私は周りを見てきましたが、これは不可能であることを心配し始めています。

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

フォールバックを標準<audio>タグを作るためにどのような方法がありますが... ... onloadイベントがあります。私は周りを見回しましたが、私が見つけられるのは、うまく動作しないかもしれないハック（Chromeでは私にとってはそうでない）とcanplaythroughイベントです。
私がこれをしたいのは、ある時点で多くのオーディオクリップを再生するプレゼンテーションを作っているからです。すべてのオーディオが読み込まれるまでプレゼンテーションを開始しないようにします（そうしないと、同期が外れる可能性があります）。私は一度に1つのクリップをロードして、一種のローディングバーを作成することができます。純粋なウェブ技術を実証することになっているので、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のように、このだろうもう少し現代的なアプローチ：

​​

Answer 2

私はWebGLとサウンドのいくつかのオーディオタグで小さなPONGゲームをやった。 OperaのEmberwind HTML5実装からオーディオ実装を借用しました。https://github.com/operasoftware/Emberwind/blob/master/src/Audio.js

私の解決策はChrome（Opera、Firefox）です。多分それはあなたにとって興味深いかもしれませんか？彼らには、22行目以降の再生可能なフォーマットを見つけるためのコードがあります。