web-dev-qa-db-ja.com

プログラムでHTML5オーディオタグに複数のソースを追加するにはどうすればよいですか？

多くの例では、異なるブラウザー間でのコーデックの互換性を克服する方法として、audioタグにネストされた複数のソースタグを示しています。このようなもの -

<audio controls="controls">
  <source src="song.ogg" type="audio/ogg" />
  <source src="song.mp3" type="audio/mpeg" />
  Your browser does not support the audio element.
</audio>

JavaScriptを使用している間は、次のようなオーディオ要素を作成することもできます-

var new_audio = document.createElement("audio");

.srcプロパティ-new_audio.src="....";でソースを設定できる場所

JavaScriptを介してオーディオ要素に複数のソースを追加する方法を見つけることができませんでした。これは、HTMLスニペットに表示されるソースタグに似ています。

他のDOM要素を操作するのと同じように、new_audioを操作し、その中に<source...タグを追加しますか？私は今これをやっていて、うまくいきます-

new_audio.innerHTML = "<source src='audio/song.ogg' type='audio/ogg' />";
new_audio.play();

もっと適切な方法はありますか？

javascripthtmlhtml5-audio
34
Abhishek Mishra

サポートされているタイプのみを検出できるのに、JavaScriptで複数のファイルを追加するのはなぜですか？代わりに、最良のタイプを検出してからsrcを設定することをお勧めします。

var source= document.createElement('source');
if (audio.canPlayType('audio/mpeg;')) {
    source.type= 'audio/mpeg';
    source.src= 'audio/song.mp3';
} else {
    source.type= 'audio/ogg';
    source.src= 'audio/song.ogg';
}
audio.appendChild(source);

ファイルタイプの数だけチェックを追加します。

44
robertc

他の要素と同じDOMメソッドを使用できます。

var source= document.createElement('source');
source.type= 'audio/ogg';
source.src= 'audio/song.ogg';
audio.appendChild(source);
source= document.createElement('source');
source.type= 'audio/mpeg';
source.src= 'audio/song.mp3';
audio.appendChild(source);
26
bobince