Comment ajouter un son au clic de la souris ?

Comment ajouter un son au clic de la souris ?

18 mars 2019 0 Par Miss Dev

Grâ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é.

applause-hands

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]
  <img src="http://initiativedeveloppeur.fr/wp-content/uploads/2019/03/applause-hands.jpg" alt="">
  <audio controls="controls" id='applause' src="http://initiativedeveloppeur.fr/wp-content/uploads/2019/03/sf_public_jeunes_75p_applaudissements_01.mp3">
  </audio>  

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]
function playSound() {
    applause.play();
} 

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]
 audio {
      display: none;
}

img {
  cursor: pointer;
  width: 15%;
  margin-left: 40%;
}

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.