単一のHTML5オーディオ要素を持つ複数のサウンド

Question

私はいくつかのサウンドを再生する必要のあるWebアプリケーションを持っています。このアプリは、主にモバイルデバイス向けです。それは私が必要とする各サウンドの<audio>要素を作成し、それぞれのplay()メソッドを起動します。私は、1つのaudio要素で全ての音を持っていることを好むだろう、それぞれが別のソースであること、の線に沿って何か：

<audio controls="controls" preload="auto" id="audioPlayer"> 
    <source src="click1.ogg" type="audio/ogg" /> 
    <source src="click2.ogg" type="audio/ogg" /> 
</audio> 

と.play("click1.ogg")のようなものを呼び出すことにより、各ソースをトリガします。

javascriptでソースを変更して新しいソースが読み込まれるまで待つことはできません。サウンドはページにロードする必要があります。
上記のような解決策がありますか、別のサウンドのさまざまなオーディオ要素を使用する必要がありますか？
2番目の質問として、複数のオーディオ要素を定義してパフォーマンスを上げていますか？

Answer 1

は、さまざまなオーディオ要素を使用してください。オーディオ要素のソースタグは、ブラウザとシステムの互換性のために作成されます。ブラウザとシステム（ogg、mpeg、aviまたはwmv）によって提供される形式を自動的に選択します。

あなたの2番目の質問に...オーディオ要素のすべてのソースの1つのソースだけが読み込まれるため、パフォーマンスが低下しません。

Answer 2

私はそれが良い答えですので、私は投票したマイク！ここで私は彼が提案したことをどのようにしたのかの例です。

http://jsfiddle.net/earlonrails/tTF89/6/

HTML

<audio controls="controls" width="300px" id="audioPlayer"> 
    <!-- load broken audio --> 
    <source type="audio/mpeg" src="http://www.google.com/4/0/4" /> 
</audio> 

javascriptの

var urlOne = 'http://www.tonycuffe.com/mp3/tail%20toddle.mp3', 
    urlTwo = 'http://freeplaymusic.com/search/download_file.php?id=4&dur=0&type=mp3'; 

function attrs(element, attributes) { 
    for (var prop in attributes) { 
     element.setAttribute(prop, attributes[prop]); 
    } 
} 

function reloadAudioTag(path, player, holder) { 
    if (player) player.parentNode.removeChild(player); 

    var player = document.createElement('audio'), 
     source = document.createElement('source'); 

    source.type = "audio/mpeg" 
    attrs(player, { 
     "width": "300px", 
      "controls": "controls", 
      "autoplay": "autoplay", 
      "id": 'audioPlayer' 
    }); 
    player.appendChild(source); 
    if (holder) { 
     holder.insertBefore(player, holder.childNodes[0]); 
    } else { 
     document.body.appendChild(player); 
    } 
    source.src = path; 
    player.load(); 
    return player; 
} 

console.log("called!"); 
reloadAudioTag(urlOne, document.getElementById("audioPlayer")); 
console.log("Still going!"); 
setTimeout(function() { 
    reloadAudioTag(urlTwo, document.getElementById("audioPlayer")); 
    console.log("Finished!"); 
}, 5000);