Fonction JS avec Balise Audio (HTML5) non fonctionnel en Firefox [Résolu]

Signaler
Messages postés
8
Date d'inscription
mercredi 23 mars 2011
Statut
Membre
Dernière intervention
28 mars 2011
-
Messages postés
8
Date d'inscription
mercredi 23 mars 2011
Statut
Membre
Dernière intervention
28 mars 2011
-
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

Messages postés
1540
Date d'inscription
lundi 26 mai 2003
Statut
Membre
Dernière intervention
1 août 2013
12
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.
Messages postés
8
Date d'inscription
mercredi 23 mars 2011
Statut
Membre
Dernière intervention
28 mars 2011

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 !
Messages postés
1771
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
20 novembre 2020
107
il faut faire un load

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

Ça n'a absolument rien changé ...
Messages postés
1771
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
20 novembre 2020
107
et au niveau du format audio tu utilise bien de l'ogg
Messages postés
1771
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
20 novembre 2020
107
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>
Messages postés
1771
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
20 novembre 2020
107
<!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>
Messages postés
8
Date d'inscription
mercredi 23 mars 2011
Statut
Membre
Dernière intervention
28 mars 2011

@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.
Messages postés
1540
Date d'inscription
lundi 26 mai 2003
Statut
Membre
Dernière intervention
1 août 2013
12
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ù ?
Messages postés
1540
Date d'inscription
lundi 26 mai 2003
Statut
Membre
Dernière intervention
1 août 2013
12
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.
Messages postés
8
Date d'inscription
mercredi 23 mars 2011
Statut
Membre
Dernière intervention
28 mars 2011

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.
Messages postés
1540
Date d'inscription
lundi 26 mai 2003
Statut
Membre
Dernière intervention
1 août 2013
12
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
Messages postés
8
Date d'inscription
mercredi 23 mars 2011
Statut
Membre
Dernière intervention
28 mars 2011

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()
Messages postés
8
Date d'inscription
mercredi 23 mars 2011
Statut
Membre
Dernière intervention
28 mars 2011

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

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 !