Jouer un son en Javascript
Résolu
coeus
Messages postés
3021
Date d'inscription
Statut
Membre
Dernière intervention
-
Janken -
Janken -
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 :
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 ! :-)
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
- A javascript error occurred in the main process - Forum Matériel & Système
- Telecharger javascript - Télécharger - Langages
- Comment jouer a star citizen - Guide
- Javascript arrondi ✓ - Forum Javascript
3 réponses
Salut !
Bon j'ai trouvé une solution à mon problème.
Voici mon nouveau code :
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 !
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. |
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