36

多くの例では、さまざまなブラウザー間でのコーデックの互換性を克服する方法として、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();

もっと適切な方法があるのだろうか？

4

2 に答える 2

44

サポートされているタイプだけを検出できるのに、なぜ 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);

ファイルの種類と同じ数のチェックを追加します。

于 2010-10-29T15:41:30.393 に答える
27

他の要素と同じ 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);
于 2010-10-29T15:37:07.723 に答える