<audio> HTML5 (encore...)

Résolu/Fermé
stefman78260 Messages postés 48 Date d'inscription mercredi 15 juin 2011 Statut Membre Dernière intervention 24 décembre 2013 - 19 mai 2012 à 20:11
stefman78260 Messages postés 48 Date d'inscription mercredi 15 juin 2011 Statut Membre Dernière intervention 24 décembre 2013 - 23 mai 2012 à 18:11
Bonjour,

Existe-t-il un moyen de stoper la musique et non de la mettre en pause ?

Je m'explique:
Un son se joue lorsque je passe la souris sur une image, jusque là tout va bien, quand je quitte l'image, le son s'arrête, là tout va bien, mais si je passe à nouveau ma souris sur l'image, le son continue et ne reprend pas depuis le début...

Mon code:
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>TEST</title>
</head>

<body>
<div></div>
<audio src="music.wav" id="lecteur" preload="auto"></audio>
<audio src="music2.wav" id="lecteur2" preload="auto"></audio>
    <div align="center">
   	<a href="index.html"><img src="images/mon_image1.png" onMouseOver="document.getElementById('lecteur').play()" onMouseOut="document.getElementById('lecteur').pause()"></img></a>
    <a href="index.html"><img src="images/mon_image2.png" onMouseOver="document.getElementById('lecteur2').play()" onMouseOut="document.getElementById('lecteur2').pause()"></img></a>
    </div>


</body>
</html>


Quelqu'un a une idée ?
Merci.

A voir également:

4 réponses

gilbert1995 Messages postés 414 Date d'inscription samedi 12 septembre 2009 Statut Membre Dernière intervention 30 mai 2013 29
20 mai 2012 à 03:22
<!doctype html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>TEST</title>
</head>

<body>
<div></div>
<audio src="music.wav" id="lecteur" preload="auto"></audio>
<audio src="music2.wav" id="lecteur2" preload="auto"></audio>
<div align="center">
<a href="index.html"><img src="images/mon_image1.png" onMouseOver="document.getElementById('lecteur').play()" onMouseOut="document.getElementById('lecteur').stop()"></img></a>
<a href="index.html"><img src="images/mon_image2.png" onMouseOver="document.getElementById('lecteur2').play()" onMouseOut="document.getElementById('lecteur2').stop()"></img></a>
</div>


</body>
</html>
0
stefman78260 Messages postés 48 Date d'inscription mercredi 15 juin 2011 Statut Membre Dernière intervention 24 décembre 2013 2
20 mai 2012 à 13:21
Bonjour gilbert1995, et merci d'avoir répondu,

malheureusement, j'ai déjà testé avec ".stop()" le son se lance, il comprend donc le ".play()" mais lorsque je quitte l'image, le son continue.

Bien entendu j'ai testé sur Google Chrome, IE et mozilla.
Sur ces trois navigateurs le problème est le même (d'ailleurs IE ne lit absolument pas le fichier .wav ;-) ). J'ai fais le test avec des fichiers .wav et .mp3 et dans tous les cas, la lecture démarre bien, mais ne se stop pas.

Par contre, avec tous les navigateurs, le ".pause()" fonctionne, mais ne résout pas mon soucis.

Le seul "bidouillage" que j'ai pu faire est de faire recharger la page quand la souris quitte l'image, ce qui n'est pas top... ça reste du bidouillage.... ^^
0
gilbert1995 Messages postés 414 Date d'inscription samedi 12 septembre 2009 Statut Membre Dernière intervention 30 mai 2013 29
20 mai 2012 à 23:35
document.getElementById('lecteur').currentTime= 0;
document.getElementById('lecteur').play();
0
stefman78260 Messages postés 48 Date d'inscription mercredi 15 juin 2011 Statut Membre Dernière intervention 24 décembre 2013 2
23 mai 2012 à 18:11
Merci, c'était presque ça, mais tu m'a mis sur la bonne voie ce qui m'a permis d'arriver au résultat souhaité !

Je met le code que j'ai exactement utilisé pour les autres ;-)

<a href="index.html"><img src="image.png" onMouseOver="document.getElementById('lecteur').play()" onMouseOut="document.getElementById('lecteur').pause();document.getElementById('lecteur').currentTime= 0;" ></img></a>


Je m'entêtais à chercher à stopper la musique au lieu de tout simplement lui dire de se mettre en pause puis de retourner à 0 !

Merci beaucoup gilbert1995 !
0