Audio

Cette page explore le chargement et l’ajout de son dans un sketch existant, en repartant du sketch créé à la fin de la partie précédente Inputs.

Travailler avec des fichiers externes

Une des contraintes du prototypage rapide sur votre machine comme nous l’avons fais jusque là repose sur l’impossiblité de charger des ressources externes comme des fichiers audio directement dans le navigateur. Il nous faut pour cela faire tourner un serveur, comme si nous travaillions directement en ligne. La documentation de p5 possède une (longue) page consacrée à la question : https://github.com/processing/p5.js/wiki/Local-server

L’approche recommandée (sans passer par le terminal) consiste à utiliser MAMP, un logiciel simple qui permet de simuler un serveur en un clic.

  1. Commencez par télécharger MAMP ici : https://www.mamp.info/en/downloads/
  2. Installez puis lancez MAMP (version gratuite, non-pro)
  3. Ouvrez les préférences et rendez-vous dans l’ongler Serveur Web
  4. Changez le Document Root, pour y mettre un chemin vers un dossier un peu plus facile à trouver, par exemple Documents/WEB
  1. Copiez maintenant le dossier de travail dans lequel vous travaillez vers ce nouveau dossier dans Documents/WEB
  2. Retournez dans MAMP et cliquez sur Démarrer les Serveurs

Une page devrait s’ouvrir dans votre navigateur web, expliquant la configuration de MAMP. Naviguez vers la page à la racine, qui devrait être http://localhost:8888/ et vous devriez voir votre dossier.

Ouvrez-le. Vous accédez maintenant à votre page web en simulant un serveur, et devriez pouvoir faire tout ce que vous pourriez faire en passant par un serveur web.

Charger la bibliothèque p5.sound

Pour charger la bibliothèque de son qui accompagne p5, il suffit de rajouter la balise script juste après celle de p5.js et avant votre sketch, comme ceci : 

  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/p5.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/addons/p5.dom.min.js"></script>    
  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.6.0/addons/p5.sound.min.js"></script>    
  <script src="sketch.js"></script>

On reprend ici aussi p5.dom pour pouvoir continuer à utiliser des boutons dans notre sketch — pour repartir du sketch précédent. Mais l’ordre de chargement entre p5.dom et p5.sound n’a pas d’importance.

Charger un fichier audio

Nous allons repartir du sketch avec lequel nous avons terminé la partie précédente. Pour rappel, le voici : 

var slider_taille;
var button;

function setup() {
  createCanvas(500,500);

  slider_taille = createSlider(0, 100, 10);

  // création du bouton et de son intitulé
  button = createButton('Effacer le dessin');
  // au click sur le bouton, on exécute une fonction (l’on définit plus bas)
  button.mousePressed(eraseCanvas);
}

function draw() {
  var taille = slider_taille.value();

  fill('#03A9F4');
  noStroke();
  if(mouseIsPressed) {
    ellipse(mouseX,mouseY,taille,taille);
  }
}

function eraseCanvas() {
  background(255);
}

L’idée est de jouer un son quand le dessin est effacé, au clic sur le bouton.

Commencez par récupérer le fichier audio suivant : meduse-tentacule_piste-53. Bien sur, vous pourrez ensuite utiliser n’importe quel fichier audio, du moment qu’il est au format mp3, ogg ou wav.

Placez le fichier audio dans un sous-dossier sons situé à côté de index.html. Vous devriez avoir la structure suivante :

Lorsque nous souhaitons utiliser des ressources externes dans p5, il faut les charger avant le setup dans une fonction qui s’intitule preload. Cela dit au programme de bien attendre que les fichiers ont été récupérés avant de se lancer.

Comme pour les sliders et les boutons, comme nous comptons utiliser le son à différents endroits du programme, il faut déclarer une variable qui le contiendra tout en haut : 

var mon_son;

function preload() {
  mon_son = loadSound('sons/meduse-tentacule_piste-53.ogg');
}

Jouer un fichier audio

Une fois le fichier chargé, il suffit d’indiquer quand nous souhaitons le lire en mentionnant mon_son.play();.
Par exemple, en le plaçant dans la fonction eraseCanvas:

function eraseCanvas() {
  background(255);
  mon_son.play();
}

La documentation de p5.sound (qui se trouve ici : https://p5js.org/reference/#/libraries/p5.sound) et montre que l’on peut faire un certain nombre de choses avec les sons.

Par exemple, pour régler le volume d’un son, il suffit d’appeler setVolume avec une valeur à virgule sur le son directement :

  mon_son.setVolume(0.2);
  mon_son.play();