web-dev-qa-db-fra.com

Comment puis-je ajouter plusieurs sources à une étiquette audio HTML5, programmatique?

Beaucoup d'exemples démontrent plusieurs balises source imbriquées dans la balise audio, en tant que méthode permettant de surmonter la compatibilité du codec sur 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>

Pendant que JavaScript, je suis également autorisé à créer un élément audio comme celui-ci -

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

Où je peux définir sa source par le .src biens - new_audio.src="....";

Je n'ai pas trouvé 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 ajouter le <source... Tags à l'intérieur, comme on manipule tout autre élément DOM? Je fais ça maintenant et ça marche, 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?

javascripthtmlhtml5-audio
34
Abhishek Mishra

Pourquoi ajouter plusieurs fichiers avec JavaScript lorsque vous pouvez simplement détecter les types pris en charge? Je vous suggérerais de détecter le meilleur type, puis de définir simplement 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);

Ajouter autant de vérifications que vous avez des types de fichiers.

44
robertc