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

Question

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

<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();

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

Answer 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);

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

Answer 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);