<audio> HTML5 (encore...)

Résolu
stefman78260 Messages postés 48 Date d'inscription   Statut Membre Dernière intervention   -  
stefman78260 Messages postés 48 Date d'inscription   Statut Membre Dernière intervention   -
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

Réponse 1 / 4
gilbert1995 Messages postés 414 Date d'inscription   Statut Membre Dernière intervention   29
 
<!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
Réponse 2 / 4
stefman78260 Messages postés 48 Date d'inscription   Statut Membre Dernière intervention   2
 
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
Réponse 3 / 4
gilbert1995 Messages postés 414 Date d'inscription   Statut Membre Dernière intervention   29
 
document.getElementById('lecteur').currentTime= 0;
document.getElementById('lecteur').play();
0
Réponse 4 / 4
stefman78260 Messages postés 48 Date d'inscription   Statut Membre Dernière intervention   2
 
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