Etape 8 – Ajout de sons pour réagir au jeu
Pour rendre le jeu un peu plus sympathique, nous allons lui ajouter du son. Pour cela, nous ferons appel aux balises HTML5 <audio>.
Vous pouvez télécharger des sons et effets spéciaux sur le site http://www.universal-soundbank.com/.
Internet Explorer sait lire les sons au format MP3. Quant à Chrome et Firefox, ils savent lire les sons au format OGG. Pour assurer la compatibilité avec ces trois navigateurs, vous devrez donc fournir chaque son aux formats MP3 et OGG. Le navigateur choisira le format qui lui convient.
Pour convertir des sons, je vous conseille d’utiliser le freeware Free MP3 WMA Converter en vous rendant sur la page http://www.koyotesoft.com/.
Pour insérer un son dans le document, vous utiliserez le code suivant. Ici, le son a pour identifiant « oui ». Il est fourni aux formats MP3 et OGG via deux balises <source> :
<audio preload= »auto » id= »oui »>
<source src= »oui.mp3″ type= »audio/mp3″>
<source src= »oui.ogg » type= »audio/ogg »>
</audio>
Le jeu va utiliser quatre sons d’identifiants oui, non, bravo et superbravo :
Le son d’identifiant oui sera joué lorsque le joueur clique sur une carte qui peut être rendue visible. Le son d’identifiant non sera joué lorsque le joueur essaye de rendre plus de deux cartes visibles simultanément. Le son d’identifiant bravo sera joué lorsque le joueur apparie deux cartes. Enfin, le son d’identifiant superbravo sera joué lorsque la partie est terminée.
Les balises <audio> sont insérées dans le code HTML, juste après le titre H1 :
<body>
<h1>Memory – Evaluez votre mémoire</h1>
<audio preload= »auto » id= »superbravo »>
<source src= »superbravo.mp3″ type= »audio/mp3″>
<source src= »superbravo.ogg » type= »audio/ogg »>
</audio>
<audio preload= »auto » id= »bravo »>
<source src= »bravo.mp3″ type= »audio/mp3″>
<source src= »bravo.ogg » type= »audio/ogg »>
</audio>
<audio preload= »auto » id= »oui »>
<source src= »oui.mp3″ type= »audio/mp3″>
<source src= »oui.ogg » type= »audio/ogg »>
</audio>
<audio preload= »auto » id= »non »>
<source src= »non.mp3″ type= »audio/mp3″>
<source src= »non.ogg » type= »audio/ogg »>
</audio>
Pour jouer un son, le plus simple consiste à utiliser une instruction jQuery. Par exemple, pour jouer le son d’identifiant oui, vous utiliserez cette instruction :
$('#oui')[0].play();
Avant de pouvoir utiliser ce type d’instruction, vous devez faire référence à la bibliothèque jQuery dans l’en-tête du document en utilisant une balise <script>.
<script src= »http://code.jquery.com/jquery-1.6.1.min.js »></script>
Ici, la bibliothèque jQuery vient du CDN jQuery. Pour ceux qui ne le sauraient pas, CDN signifie Content Delivery Network. Ce terme fait référence à des ordinateurs reliés à Internet qui mettent à disposition du code (ici jQuery) aussi rapidement que possible. Il existe trois « gros » CDN pour jQuery : jQuery, Google et Microsoft. Ici, nous avons choisi d‘utiliser le CDN jQuery, mais rien ne vous empêche de choisir un des deux autres, ou pourquoi pas, d’héberger la bibliothèque jQuery sur votre propre site.
Pour l’instant, nous allons insérer le code qui permet de jouer les sons d’identifiants oui, non et bravo. Nous nous intéresserons au son d’identifiant superbravo par la suite, lors de l’implémentation du code qui détecte la fin de la partie.
Lorsque le joueur clique sur une carte, le son d’identifiant non doit être joué si deux cartes sont déjà visibles. Dans le cas contraire, le code défini à l’étape précédente peut être exécuté :
if (nombre_retourne==2)
$(‘#non’)[0].play();
else {
…
Lorsqu’une carte peut être rendue visible, le son d’identifiant oui doit être joué :
else {
nombre_retourne++;
document.getElementById(id).src = name; // On montre la carte
$(‘#oui’)[0].play();
…
Enfin, lorsque deux cartes viennent d’être appariées, le son d’identifiant bravo doit être joué :
if (memo_carte == name) {
$(‘#bravo’)[0].play() ;
Exécutons ce code. Comme vous pouvez le constater, les trois sons sont maintenant opérationnels. Ici, nous utilisons le navigateur Google Chrome, mais le résultat est identique dans Internet Explorer 10 et Firefox.
