Как программно добавить несколько источников в аудиотег 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();

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


javascript html html5-audio
person Abhishek Mishra    schedule 29.10.2010    source источник

Ответы (2)


arrow_upward
44
arrow_downward

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

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

person robertc    schedule 29.10.2010
comment
Я позволяю пользователю вводить список альтернативных форматов внутри самого атрибута класса, создавая простой в использовании плагин, помогающий создавать звуковые зависания. Поэтому я не знал бы, какие типы предоставили конечные пользователи. Спасибо за совет canPlayType, было бы полезно. - person Abhishek Mishra; 29.10.2010
comment
Я только что заметил - вы, вероятно, не хотите использовать ключевое слово var в своем условном выражении. Вы создаете новую переменную new_audio и не ссылаетесь на существующую. - person Andy West; 01.04.2011
comment
@AndyWest Да, в нем также отсутствовала скобка - довольно плохой код со всех сторон :) - person robertc; 01.04.2011
comment
Ничего страшного ... +1, так как я все равно нашел это полезным. - person Andy West; 01.04.2011
comment
Я попытался сделать ‹audio src=dropbox/link/ahc.mp3›, и это работает... есть идеи, почему? - person bouncingHippo; 23.08.2012
comment
Это хорошее решение, но сообщение ниже лучше отвечает на исходный вопрос. - person justind; 17.11.2013

arrow_upward
27
arrow_downward

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