Menu

Jouer un son en Javascript [Résolu/Fermé]

Messages postés
3077
Date d'inscription
samedi 13 janvier 2007
Dernière intervention
19 juin 2013
- - Dernière réponse :  Passant - 17 mars 2019 à 07:18
Bonjour,

Je développe un site personnel. Je veux que les boutons de mon menu principal aient un feedback sonore lors du mouseover et du mousedown. Jusque-là, pas de problème. Voici mon code en gros :

<body>
	<embed src="sound/menu_hover.wav" autostart="false" width="0" height="0" id="hoverSound" enablejavascript="true">

	<div id="menu">
		<ul>
			<li><a href="#">Option</a></li>
			<li><a href="#">Option</a></li>
			<li><a href="#">Option</a></li>
		</ul>
	</div>
</body>

<script type="text/javascript">
	function menuHover() {
		document.getElementById("hoverSound").Play();
	}
	var menu = document.getElementById("menu").getElementsByTagName("li");
	for (x in menu) {
		menu[x].onmouseover = menuHover;
	}
</script>


Le problème, c'est que quand je teste le mouseover, le son arrive toujours avec une seconde de délai. Mais évidemment, je veux que l'utilisateur entende le son au moment exact où son curseur passe sur le lien.

Je me suis assuré que le fichier son lui-même n'ait pas de délai ; dans Audacity, la forme d'onde commence au tout début, sans moment vide.

Est-ce normal que le son agisse ainsi sur un navigateur ? Y a-t-il un moyen de le contourner sans utiliser Flash ?

Merci beaucoup de votre aide ! :-)


Afficher la suite 

3 réponses

Meilleure réponse
Messages postés
3077
Date d'inscription
samedi 13 janvier 2007
Dernière intervention
19 juin 2013
391
2
Merci
Salut !

Bon j'ai trouvé une solution à mon problème.

Voici mon nouveau code :

<body>
 <bold><audio src="./sound/menu_hover.wav" style="" id="hoverSound">
  Your browser does not support the audio element.
 </audio></bold>

 <div id="menu">
  <ul>
   <li><a href="#">Accueil</a></li>
   <li><a href="#">Amathysme</a></li>
   <li><a href="#">Blogue</a></li>
   <li><a href="#">Intensités relatives</a></li>
  </ul>
 </div>
</body>

<script type="text/javascript">
 function menuHover() {
  document.getElementById('hoverSound').play();
 }

 var menu = document.getElementById("menu").getElementsByTagName("li");
 for (x in menu) {
  zelink = menu[x].getElementsByTagName("a");
  zelink[0].onmouseover = menuHover;
 }
</script>


Vous remarquez donc que j'ai remplacé le <embed> par un tag HTML5 <audio>. À date ça me paraît assez bien.
Ça marche nickel dans Firefox, c'est un peu instable dans Chrome mais sans plus, et j'attends d'avoir Internet Explorer 9 pour tester dans ce browser.

Donc voilà, en espérant que ça pourra aider quelqu'un d'autre !
Merci !
Nommez vos sujets de manière pertinente pour de meilleures chances de réponses !
Et n'oubliez pas de mettre votre sujet à "Résolu" s'il l'est effectivement ! Tourlou !


EDIT : Ajout des balises de code (la coloration syntaxique).
Explications disponibles ici : ICI

Merci d'y penser dans tes prochains messages.

Dire « Merci » 2

Heureux de vous avoir aidé ! Vous nous appréciez ? Donnez votre avis sur nous ! Evaluez CommentCaMarche

CCM 46507 internautes nous ont dit merci ce mois-ci

Merci d'avoir pris la peine d'écrire la solution !!!!!
Messages postés
422
Date d'inscription
mercredi 24 septembre 2008
Dernière intervention
30 mai 2015
81
0
Merci
essaie d'avoir le fichier son le plus léger possible, et le moins compressé possible (la décompression consomme des ressources côté client, donc du temps).

essaie de lire le fichier au chargement de la page avec play et faire immédiatement après un pause (et non un stop) ou alors essaie de lire au chargement tout le fichier avec un volume à zéro.

en tout cas, ce que tu essaies de faire, n'est pas évident du tout.
Messages postés
3077
Date d'inscription
samedi 13 janvier 2007
Dernière intervention
19 juin 2013
391
0
Merci
Salut et merci de ta réponse !

Malheureusement ça ne change pas le résultat...
Le son que j'essaie de jouer pèse moins de 5 Ko en format wav, et à peine plus de 1 Ko en mp3. C'est juste un petit "clic".

J'avais vu que le <embed> faisait office de "pre-loader" pour le son... Mais est-ce que c'est vraiment efficace ? Est-ce que le son reste dans le cache par la suite ? Est-ce que ça change seulement quelque chose qu'il y soit ?

Tant de questions... :-(

Thanks as always !