Fonction JS avec Balise Audio (HTML5) non fonctionnel en Firefox

Résolu
Maltroth
Messages postés
8
Date d'inscription
mercredi 23 mars 2011
Statut
Membre
Dernière intervention
28 mars 2011
- 23 mars 2011 à 18:46
Maltroth
Messages postés
8
Date d'inscription
mercredi 23 mars 2011
Statut
Membre
Dernière intervention
28 mars 2011
- 28 mars 2011 à 15:22
Bon je vous explique, j'ai une balise audio en HTML5 qui fonctionne sur tous les fureteurs(ou presque). Le but du travail était de faire une liste déroulante permettant de changer le chanson joué dans la balise audio. Mais il y a seulement Firefox où ma fonction JavasScript ne semble pas fonctionner.
	
<select id="choixAudio" class="audio" onChange="fct_choixAudio()">
<option value="1.ogg">Twilight Of The Thunder God</option>
<option value="2.ogg">Walk With Me In Hell</option>
<option value="3.ogg">When I Wake</option>
</select>

function fct_choixAudio()
{
var playlist = document.getElementById("audio").getElementsByTagName("audio");
playlist[0].src = document.getElementById("choixAudio").value;
}


Après avoir chercher longuement, j'ai vue que la source changeait en firefox quand même avec un "alert" mais que la chanson restait la même quand même sur le player de la balise...

16 réponses

cs_jopop
Messages postés
1540
Date d'inscription
lundi 26 mai 2003
Statut
Membre
Dernière intervention
1 août 2013
12
24 mars 2011 à 13:32
Salut,

a priori rien à voir avec FF, ton code ne doit fonctionner nulle part. Voilà à quoi doit ressembler ta fonction JS :

	function changeZic() {
var player = document.getElementsByTagName("audio")[0];
var playlist = document.getElementById("choixAudio");
player.pause();
player.src = playlist.value;
player.play();
}


L'erreur était sur l'accès au bon élément (le JS c'est du code, donc ça se debug ;)). Testé sur Chrome et FF. Pour rappel IE8 ne prend pas en charge la balise , et FF n'y lit que les ogg et les wav.
3
Maltroth
Messages postés
8
Date d'inscription
mercredi 23 mars 2011
Statut
Membre
Dernière intervention
28 mars 2011

28 mars 2011 à 14:01
Aucune erreur mais j'ai trouvé la solution dans le code JS :

var playlist = document.getElementById("audio").getElementsByTagName("audio");
playlist[0].src = document.getElementById("choixAudio").value;
playlist[0].load();


C'était seulement le [0] après le deuxième playlist qui manquait... ça fonctionne maintenant !
3
@karamel
Messages postés
1807
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
5 mai 2022
144
23 mars 2011 à 18:58
il faut faire un load

function fct_choixAudio()
{
var playlist = document.getElementById("audio")
playlist.src = document.getElementById("choixAudio").value;
playlist.load()
{
0
Maltroth
Messages postés
8
Date d'inscription
mercredi 23 mars 2011
Statut
Membre
Dernière intervention
28 mars 2011

23 mars 2011 à 21:04
Ça n'a absolument rien changé ...
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
@karamel
Messages postés
1807
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
5 mai 2022
144
24 mars 2011 à 13:31
et au niveau du format audio tu utilise bien de l'ogg
0
@karamel
Messages postés
1807
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
5 mai 2022
144
24 mars 2011 à 20:37
en fait le probleme c'est que tu appel un id qui n'existe pas

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script type="text/javascript">

function fct_choixAudio(lui){
var playlist = document.getElementById("audio")
playlist.src=lui.value;
playlist.load()
playlist.play()
}

</script>
</head>


<select id="choixAudio" class="audio" onchange="fct_choixAudio(this)">
<option value="1.ogg">Twilight Of The Thunder God</option>
<option value="2.ogg">Walk With Me In Hell</option>
<option value="3.ogg">When I Wake</option>
</select>

</html>
0
@karamel
Messages postés
1807
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
5 mai 2022
144
24 mars 2011 à 20:39
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<script type="text/javascript">

Code HTML :

function fct_choixAudio(lui){
var playlist = document.getElementById("audio")
playlist.src=lui.value;
playlist.load()
playlist.play()
}

</script>
</head>


<select id="choixAudio" class="audio" onchange="fct_choixAudio(this)">
<option value="1.ogg">Twilight Of The Thunder God</option>
<option value="2.ogg">Walk With Me In Hell</option>
<option value="3.ogg">When I Wake</option>
</select>

</html>
0
Maltroth
Messages postés
8
Date d'inscription
mercredi 23 mars 2011
Statut
Membre
Dernière intervention
28 mars 2011

25 mars 2011 à 20:40
@jopup : Mon code fonctionne sur IE9 et sur Chrome :) Et oui bien sûr c'est des .ogg que j'ai mis pour FF. Et j'ai testé ton code et ça ne fonctionnait pas =/
@kazma : Tous ça est dans un "div" avec un id "audio", pardon de ne pas l'avoir mis dans le code.
0
cs_jopop
Messages postés
1540
Date d'inscription
lundi 26 mai 2003
Statut
Membre
Dernière intervention
1 août 2013
12
28 mars 2011 à 11:56
Re,

j'ai testé mon code sous FF et il y fonctionne, du coup je vois pas où est le problème. Quand tu débugges ton JS tu trouves une erreur ? où ?
0
cs_jopop
Messages postés
1540
Date d'inscription
lundi 26 mai 2003
Statut
Membre
Dernière intervention
1 août 2013
12
28 mars 2011 à 14:45
T'avais pas testé ni même lu mon code ou bien ? ><
Ou alors t'as pas remarqué que j'avais nommé l'objet JS audio "player" et non "playlist" (qui correspond plutôt à ton tag option).

Par contre je reste surpris que t'aies pas eu d'erreur avec ton précédent code.
0
Maltroth
Messages postés
8
Date d'inscription
mercredi 23 mars 2011
Statut
Membre
Dernière intervention
28 mars 2011

28 mars 2011 à 14:48
Non j'avais vu, mais ça ne réglait tout de même pas mon problème. Tu faisais seulement rajouter un pause et un play ce qui faisait partir la chanson toute seule dès le changement.

Et non, j'ai pas eu d'erreurs, c'est ce qui était le plus chiant ahah.
0
cs_jopop
Messages postés
1540
Date d'inscription
lundi 26 mai 2003
Statut
Membre
Dernière intervention
1 août 2013
12
28 mars 2011 à 14:59
Non, j'accédais au premier élément de ma liste d'éléments de TagName 'audio' via l'indexer :
var player = document.getElementsByTagName("audio")[0];

J'avais même rajouté en commentaire :
L'erreur était sur l'accès au bon élément
0
Maltroth
Messages postés
8
Date d'inscription
mercredi 23 mars 2011
Statut
Membre
Dernière intervention
28 mars 2011

28 mars 2011 à 15:07
Et tu crois que ça ça faisait quoi :

var playlist = document.getElementById("audio").getElementsByTagName("audio");
playlist[0].src = document.getElementById("choixAudio").value;


La même chose :P Mais merci d'avoir essayé de m'aider^^
C'est seulement que j'accédais pas à cet élément là, mais dans le playlist.load()
0
Maltroth
Messages postés
8
Date d'inscription
mercredi 23 mars 2011
Statut
Membre
Dernière intervention
28 mars 2011

28 mars 2011 à 15:11
Je comprend ce que tu veux dire ! Ahahah...
0
cs_jopop
Messages postés
1540
Date d'inscription
lundi 26 mai 2003
Statut
Membre
Dernière intervention
1 août 2013
12
28 mars 2011 à 15:16
Disons que ça vaut plus trop le coup de donner les solutions quand on les lit pas ...
0
Maltroth
Messages postés
8
Date d'inscription
mercredi 23 mars 2011
Statut
Membre
Dernière intervention
28 mars 2011

28 mars 2011 à 15:22
Non je l'avais lu, même essayé, mais je ne l'avais pas compris sur le moment. Donc je n'ai pas modifié mon code en conséquence. Pardon pour la perte de temps !
0