Comment puis-je ajouter plusieurs sources à une balise audio HTML5, par programmation?

Question

De nombreux exemples illustrent plusieurs balises source imbriquées dans la balise audio, en tant que méthode pour surmonter la compatibilité des codecs entre différents navigateurs. Quelque chose comme ça -

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

Alors avec JavaScript, je suis aussi autorisé à créer un élément audio comme celui-ci -

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

Là où je peux définir sa source par la propriété .src-new_audio.src="....";

Je n'ai pas réussi à trouver comment ajouter plusieurs sources dans un élément audio via JavaScript, quelque chose de similaire aux balises source affichées dans l'extrait HTML. Est-ce que je manipule le new_audio et y ajoute les balises <source... à l'intérieur, comme on manipulerait n'importe quel autre élément DOM? Je fais cela maintenant et il fonctionne, ce qui est -

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

Je me demande s'il y a un moyen plus approprié de le faire?

Answer 1

Pourquoi ajouter plusieurs fichiers avec JavaScript quand vous pouvez détecter les types pris en charge? Je suggérerais au lieu de détecter le meilleur type alors juste en réglant le 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); 

Ajoutez autant de contrôles que vous avez de types de fichiers.

Answer 2

Vous pouvez utiliser les mêmes méthodes DOM comme avec tout autre élément:

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