Come posso aggiungere più fonti a un tag audio HTML5, a livello di programmazione?

Question

Un sacco di esempi dimostrano più tag sorgente nidificati nel tag audio, come metodo per superare la compatibilità del codec tra diversi browser. Qualcosa di simile -

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

Mentre con JavaScript, sto anche permesso di creare un elemento audio come questo -

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

Dove posso impostare la sorgente dalla struttura .src-new_audio.src="....";

Non riesco a trovare come aggiungere più sorgenti in un elemento audio tramite JavaScript, qualcosa di simile ai tag sorgente mostrati nello snippet HTML.

Maneggio lo new_audio e aggiungo i tag <source... al suo interno, proprio come si manipolerebbe qualsiasi altro elemento DOM? Sto facendo questo proprio ora e funziona, che è -

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

mi chiedo se c'è un modo più appropriato per farlo?

Answer 1

Perché aggiungere più file con JavaScript quando si può semplicemente rilevare i tipi supportati? Suggerirei invece di individuare il tipo migliore, quindi impostare semplicemente il 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); 

Aggiungere tanti controlli quanti sono i tipi di file.

Answer 2

È possibile utilizzare gli stessi metodi DOM come con qualsiasi altro 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);