Comment ajouter un son au clic de la souris ?
18 mars 2019Grâce au site tinytuba.com, nous allons répondre à la question Comment ajouter un son au clic de la souris ? Ce site en donne un bon exemple. C’est un site très simple comme vous pouvez le constater.
Les besoins
Avant de rentrer dans le code, il faut récupérer une image et un son. Vous pouvez choisir ce que vous voulez.
Ici, j’ai trouvé une image d’un applaudissement, ainsi que le son associé.
Ensuite, les langages : ce sont ceux du front-end soit HTML et JavaScript pour les besoins ici et CSS pour enjoliver un peu.
L'heure du codage
Une fois les préparations faites, on commence par le squelette c’est-à-dire le HTML.
On ajoute une balise img et une balise audio. Puis on crée un id distinct pour le son (ici, applause). Il faut aussi prévoir un onClick au niveau de la balise image suivi du nom de la fonction que l’on va écrire en Javascript par la suite. Et… c’est tout au niveau HTML.
[HTML]
Le onclick sert donc à appeler une fonction en Javascript. Vous pouvez l’appeler comme vous voulez. Ici ce seras playSound (mieux vaut écrire les fonctions en anglais). Dans cette fonction, il suffit simplement d’écrire le nom de l’id de la balise audio écrite en HTML suivi de la fonction pré-existante play().
[JS]
Mettons maintenant un peu de mise en forme avec le CSS . On cache tout d’abord le fichier audio qui sera joué lors du clic. Puis, on règle la taille de l’image et sa position si nécessaire.
[CSS]
Résultat
Vous pouvez voir le résultat ici : Codepen [JS] , voir aussi avec JQuery – Codepen [JQuery].
À vous de jouer maintenant. N’hésitez pas à partager le résultat.
