11545 sujets

JavaScript, DOM et API Web HTML5

[Résolu]Changer source mp3 d'un élément audio

Hello,

Je m'initie à la manipulation de l'élément HTML5 audio. Le souci que je rencontre est lorsque je veux changer le fichier audio qui est lu.

J'ai trouvé ceci sur le site d'Opéra :

We can also change the source file by adding a new value to the src attribute:

audio.setAttribute("src", "http://yourserver/morerock.ogg");




Voici donc ma balise audio, j'y met 2 sources, un fichier ogg et un fichier mp3, comme ceci :

<audio id="player">
	<source src="sons/son1.ogg" type="audio/ogg"></source>
        <source src="sons/son1.mp3" type="audio/mpeg"></source>
</audio>



Et ce que je fais côté javascript :


audio = document.getElementById("player");

if(audio.canPlayType('audio/ogg'))
		{
			audio.setAttribute("src", "un_autre_fichier.ogg");
		}
		else
		{
			audio.setAttribute("src","un_autre_fichier.mp3");
		}


Cela fonctione sur firefox, chrome et opéra qui prennent le fichier ogg mais sur IE, la source mp3 n'est pas changée. A noter que cela fonctionne sur safari qui prends le fichier mp3.

Je suis donc un peu perdu, merci d'avance ! Smiley smile
Modifié par kim_doudou (12 Feb 2012 - 22:47)
Le problème est que ton code JS modifie ton code html ainsi:


<audio id="player" src="un_autre_fichier.ogg">
	<source src="sons/son1.ogg" type="audio/ogg"></source>
        <source src="sons/son1.mp3" type="audio/mpeg"></source>
</audio>


Ainsi, tu ne modifie pas les éléments sources, mais seulement l'attribut src de la balise audio. Peut-être que cela cause un problème à IE.

Sinon, tu pourrais aussi vérifier le support de canPlayType sous IE.
Yes, merci Vaxilart.

Je ne me rendais pas compte de la manière dont le code JS agissait sur le code HTML.
J'ai donc retiré les deux balises "<source>" et j'utilise les attributs "src" et "type" de la balise audio.

Voici ce que j'ai fait du coup : 

		if(audio.canPlayType('audio/ogg'))
		{
			audio.setAttribute("src", "fichier_son.ogg");
			audio.setAttribute("type", "audio/ogg");
		}
		else if(audio.canPlayType('audio/mpeg'))
		{
			audio.setAttribute("src","fichier_son.mp3");
			audio.setAttribute("type","audio/mpeg");
		}


Je sais pas si c'est la meilleure façon de procéder mais au moins ça fonctionne.
Merci encore Smiley smile
Sujet clos
Aller à