Suivez les fils RSS
 

Des livres incontournables pour tout maîtriser

  • CSS avancées - vers HTML5 et CSS3
  • HTML5
  • CSS2
  • PHP5 avanc�
  • Memento MySQL
  • Memento CSS 3
  • Memento XHTML
  • WordPress 3 100% pratique
  • jQuery et jQuery UI
Rechercher dans le sujet :
Forum
» JavaScript, DOM et API Web HTML5
» [Résolu]Changer source mp3 d'un élément audio
Auteur
kim_doudou
#
Citer
7 Posts
 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 ! smile
Modifié par kim_doudou (12 Feb 2012 - 22:47)
^
Vaxilart
#
Citer
612 Posts
 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.
http://simonboudrias.com 
^
kim_doudou
#
Citer
7 Posts
 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 smile

^
Prévenir un modérateur
Répondre au sujet
Aller à