L’ajout de sons n’est pas très difficile, mais il convient de respecter quelques règles pour éviter tout problème.
Choisir le bon format, et le bon navigateur
Première contrainte : le son est très dépendant du navigateur que vous utilisez. Il peut passer sur un navigateur, et pas sur l’autre. Le format du son est essentiel. Des problèmes ont été rencontrés par exemple sur le navigateur Safari, avec le format ogg.
Charger les sons et les ajouter au gestionnaire de sons
Une fois nos fichiers son au format ogg, nous les ajoutons tout d’abord dans le répertoire assets. Si l’on souhaite séparer sons et images, on peut organiser le répertoire assets avec un sous-répertoire pour regrouper l’ensemble des sons,
Le changement des sons est assez similaire à ce qui se faisait pour les images. Dans la partie preload()on va d’abord charger les sons, en leur attribuant un identifiant.
Supposons que l’on a placé deux fichiers guile.mp3 et gun.mp3 correspondants respectivement à une musique de fond et à un bruitage de coup de feu dans le répertoire assets. Nous chargeons ces deux fichiers en leur associant comme identifiants musiquedefond et coupDeFeu avec les lignes suivantes dans preload() :
// on charge deux fichiers audio avec les identifiants coupDeFeu et background
this.load.audio('coupDeFeu', 'assets/gun.mp3');
this.load.audio('background', 'assets/guile.mp3'); Une fois chargés, on va les ajouter dans le gestionnaire de sons. Dans la fonction create() on ajoute les instructions suivantes pour inclure des sons dans le gestionnaire sound de phaser et récupérer alors une variable de type son pour chacun des sons. Ces variables permettront de manipuler les sons.
var son_feu;
var musique_de_fond;
// ajout des sons au gestionnaire sound
// recupération de variables pour manipuler le son
son_feu = this.sound.add('coupDeFeu');
musique_de_fond = this.sound.add('background'); Lire ou stopper un son
Il ne reste plus qu’à lancer le son avec la méthode play() de la variable en question. On peut lancer cette méthode où l’on souhaite :
- soit au démarrage dans la fonction create(),
- soit dans update() si un événement se produit.
Par exemple, pour lancer la musique associée à background dès le début, on écrira dans la fonction create() l’instruction suivante:
// lancement du son background
musique_de_fond.play(); Et si on veut le stopper :
// arret du son background
musique_de_fond.stop(); Ce n’est pas plus difficile que ca.
Aller plus loin : manipuler les sons
La documentation complète du gestionnaire de sons est disponible sur :
https://photonstorm.github.io/phaser3-docs/Phaser.Sound.HTML5AudioSound.html
Cette documentation présente les principales méthodes disponibles mais également les options que l’on peut utiliser avec la méthode play(). On retrouve notamment les options suivantes :
mute | booléen | faux | Indique si le son lancé doit être en mode silencieux ou pas |
volume | nombre | 1 | valeur du volume entre 0 (volume coupé) et 1 (max) |
rate | nombre | 1 | vitesse de lecture (1 est la norme) |
detune | nombre | 0 | désaccordage du son, en cents (unité musicale. Réserve aux ingénieurs du son) |
seek | nombre | 0 | position en secondes ou commencer le son. |
loop | booléen | false | Le son doit-il être joué en boucle ou non. |
delay | nombre | 0 | Temps, en secondes, avant lancement du son. |
