Jouer un sample sur clic avec jquery

Un script simple, qui vide à activer un son sur base d’un clic avec jquery.

Le html

Le code est composé d’un élément comportant la class .jouerson, avec un élément visible (ici un simple texte), et un tag audio avec le lien correct vers un son court. Le tag audio n’a pas d’attribut "controls" donc il est invisible, ce qui nous convient.

  1. <div class="jouerson">
  2.     Play me !
  3.     <audio>
  4.         <source src="beat.wav" type="audio/mp3">
  5.     </audio>
  6.  </div>

Télécharger

Le javascript

Le javascript est écrit en jquery. Il faut évidemment charger Jquery avant d’afficher ce script.
Le script cherche à l’intérieur de l’élément sélectionné par la classe un tag audio, et s’il le trouve, le remet à zéro (au cas où il serait déjà en cours de lecture) et le joue.
On peut utiliser plusieurs éléments avec cette même classe dans la page.

  1. $(".jouerson").click(function(){
  2.     var a=$(this).find("audio").get(0); // trouver le tag audio
  3.     a.currentTime=0; // remettre au début du son
  4.     a.play(); // jouer
  5.     return false;
  6. });

Télécharger