Jouer un son en Javascript

Résolu/Fermé

Javascript

coeus Messages postés 3021 Date d'inscription samedi 13 janvier 2007 Statut Membre Dernière intervention 19 juin 2013 - 6 janv. 2011 à 15:23
Janken - 11 mai 2020 à 05:45

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 ! :-)

A voir également:

Jouer un son javascript
Jouer a pokemon sur android - Guide
Telecharger javascript - Télécharger - Langages
Javascript round ✓ - Forum Javascript
Comment jouer a star citizen - Guide
Jouer à pokemon sur mac - Forum MacOS

3 réponses

Réponse 1 / 3

coeus Messages postés 3021 Date d'inscription samedi 13 janvier 2007 Statut Membre Dernière intervention 19 juin 2013 119
Modifié le 17 mars 2019 à 13:39

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 !

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

Merci d'y penser dans tes prochains messages.

Passant
17 mars 2019 à 07:18

Merci d'avoir pris la peine d'écrire la solution !!!!!

Anonyme
6 mai 2020 à 13:58

Tu à oublié le

</body>

Janken > Anonyme
Modifié le 11 mai 2020 à 05:45

en même temps ce n'est pas nécessaire en HTML5 qui s'est bien éloigné de SGML...
Ce n'est donc pas considéré une erreur de ne pas refermer les balises si elles sont à la fin (et d'ailleurs pas besoin de head ou de body non plus) ce qui reste le cas pour HTML4 et XML ce dernier demandant une syntaxe stricte pour fonctionner...

Cela veut dire que les interpréteurs font eux-même la correction.
Donc ceci est bien correct en HTML5

<!DOCTYPE html>
<section>
<article id=main>
<h1>titre
<p>ma page est valide HTML5
<span>pas beau ni clair mais valide

Discussions similaires

Programmation Javascript

appel bout de code html dans une autre page

html Afficher/cacher une DIV sur clique <a>

Comment detruire une balise html en javascrip

javascript -> Alert() -> close()

Javacript, 2 chiffres après la virgule