Как я могу добавить несколько источников в аудиотекст HTML5 программно?

Многие примеры демонстрируют множество исходных тегов, вложенных в звуковой тег, в качестве метода преодоления совместимости кодеков в разных браузерах. Что-то вроде этого -

<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.

Я могу манипулировать new_audio и добавлять в него теги <source..., подобно тому, как можно было бы манипулировать любым другим элементом DOM? Я делаю это прямо сейчас, и это работает, а это -

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

Интересно, есть ли более подходящий способ сделать это?

Ответ 1

Зачем добавлять несколько файлов с помощью 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);

Добавьте столько проверок, сколько у вас есть.

Ответ 2

Вы можете использовать те же методы 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);