¿Cómo puedo agregar varias fuentes a una etiqueta de audio HTML5, programáticamente?

Question

Muchos ejemplos demuestran múltiples etiquetas de origen anidadas en la etiqueta de audio, como un método para superar la compatibilidad del códec en diferentes navegadores. Algo como esto -

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

Mientras que con JavaScript, yo también estoy autorizado para crear un elemento de audio como este -

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

Dónde puedo fijar su fuente en el hotel .src - new_audio.src="....";

No pude encontrar cómo agregar varias fuentes en un elemento de audio a través de JavaScript, algo similar a las etiquetas de origen que se muestran en el fragmento de HTML.

¿Manipulo el new_audio y agrego las etiquetas <source... dentro de él, al igual que se manipularía cualquier otro elemento DOM? Estoy haciendo esto ahora y funciona, que es -

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

Me pregunto si hay una forma más adecuada de hacerlo?

Answer 1

¿Por qué añadir varios archivos con JavaScript cuando se puede detectar los tipos soportados? Yo sugeriría en su lugar detectar el mejor tipo, simplemente estableciendo el 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); 

Agregue tantos controles como tipos de archivos tenga.

Answer 2

Se pueden utilizar los mismos métodos DOM como con cualquier otro elemento:

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