11486 sujets

JavaScript, DOM et API Web HTML5

Pause lecture audio à la fermeture du popup (modal) : résolu

Bonjour,
pour un ami j'ai créé un site de parolier
les paroles s'affichent à l'ouverture d'une fenêtre modale (popup 100% css, il s'agit donc d'une div en avant plan et non d'un popup en js qui appelle une page externe
jusque là c'est très facile et ça marche
sur ce popup il y a aussi le morceau en écoute en html 5 :

<audio preload="auto">
<source src="cendrillon.mp3" id="cendrillon">
</audio>

le but est que lorsque l'on ferme le popup (en cliquant sur une croix) le morceau s'arrête (en fait se met en pause car la fonction stop n'existe pas en audio html5, mais c'est pas grave) :

<a onclick="document.getElementById("cendrillon").pause();" href="#fermer" title="Fermer la fenêtre" class="droite"><font color="#000000"><font size="+2">X</font></font></a>

après plusieurs essais sans id, j'ai fini par donner une id à mon morceau, mais ça marche tjs pas
le morceau continue

j'ai essayé une autre voie en bidouillant à partir du script trouvé ici : http://forum.alsacreations.com/topic-1-66697-1.html

en faisant :

<audio src="cendrillon.mp3" id="cendrillon">
<a href="#fermer" title="fermer"><img src="" alt="fermer" id="btnpause"></a>
<script>
document.getElementById('btnpause').onclick = function() {
document.getElementById('cendrillon').pause();
return false;
}
</script>

je n'y arrive tjs pas, le morceau continue de jouer après avoir fermé la fenêtre

une idée ?
merci d'avance Smiley cligne
Modifié par jacq (18 Mar 2016 - 17:14)
je complète

sur conseil j'ai placé l'ID dans la balise Audio mais ça ne change rien
personne a une idée Smiley decu
merci
Salut,

Le site est en ligne, pouvons nous tester en live ?
Modifié par JENCAL (16 Mar 2016 - 12:12)
que veux-tu dire ?
la musique ne s'arrête pas à la fermeture de la fenêtre pourtant (test avec cendrillon, seule avec le code)
les balises audio sont selon moi fermées partout (?)
merci
Bonjour,

Pour avoir le « stop » en HTML 5 .il faut mettre en pause et mettre le currentTime a zeros.
mais comme le currentTime n’est pas supporter par tous les navigateurs (firefox par ex).la solution est de vider l’attribut src de ta balise audio, quand tu appui sur la croix et et la recharger aussitot (pour etre pret pour une nouvelle lecture).
Bonjour,

Pour avoir le « stop » en HTML 5 .il faut mettre en pause et mettre le currentTime a zeros.
mais comme le currentTime n’est pas supporter par tous les navigateurs (firefox par ex).la solution est de vider l’attribut src de ta balise audio, quand tu appui sur la croix et et la recharger aussitot (pour etre pret pour une nouvelle lecture).

edit: je ne sais pas comment enlever le double post Smiley eek
Modifié par BYJMG (17 Mar 2016 - 09:02)
il est vrai que je teste sur Firefox
on m'avait en effet proposé de vider la source avec la valeur 'remove'
mais ça ne donnait rien non plus

<a onclick="document.getElementById("cendrillon").remove();" href="#fermer" title="Fermer la fenêtre" class="droite"><font color="#000000"><font size="+2">X</font></font></a>

aurais-tu une idée de code différent ?
merci bcp
Si tu veux mon avis, le moyen encore le plus simple pour être vraiment sûr de faire stop, c'est de carrément supprimer l'élément <audio> du DOM, et en recréer un nouveau à chaque rouverture de la pop-up. C'est simple et stupide, mais ça marche même avec un IE9 ou un vieux Safari.
bonjour,

comment faire cela ?
j'ai essayé avec la fonction 'remove' voir mon poste précédent) sans succès
as-tu un code à me proposer ?
merci Smiley cligne
jacq a écrit :
bonjour,

comment faire cela ?
j'ai essayé avec la fonction 'remove' voir mon poste précédent) sans succès
as-tu un code à me proposer ?
merci Smiley cligne


quand je regarde ton poste précédent

<a onclick="document.getElementById("cendrillon").remove();" href="#fermer" title="Fermer la fenêtre" class="droite">


on retrouve un problème avec les quote, utilise des 'simple' quote pour ton id cendrillon. sinon ça pète.
Sujet clos
Aller à