Aller au contenu
Code B1

Travailler avec du son

Un son se charge comme une image : on dépose le fichier (un MP3, par exemple) dans le dossier du sketch, puis on le charge dans setup() avec await, pour être sûr qu’il est arrivé avant de s’en servir. Cette page suit la syntaxe de p5.js 2.0 (voir Travailler avec des images pour async et await).

Le web est plein de sons à télécharger et à utiliser dans vos projets.

Charger un son et le jouer au clic

Section intitulée « Charger un son et le jouer au clic »
let monSon;


async function setup() {
  monSon = await loadSound("mes-sons/1927.mp3");
  createCanvas(windowWidth, windowHeight);
  background(255);
}


function mousePressed() {
  if (monSon.isPlaying()) {
    monSon.pause();    // on le met en pause
    background(255);
  } else {
    monSon.play();     // on le joue
    background(0);
  }
}

await attend que le fichier soit chargé : quand on arrive dans mousePressed(), monSon contient bien le son, prêt à être joué.

Le son est lancé au clic, et pas dans setup(). Les navigateurs interdisent en effet à une page de faire du bruit avant que l’on ait cliqué ou tapé une touche. Un monSon.play() placé dans setup() risque donc de rester muet.

Avec la même logique, vous pouvez faire une balle qui émet un son quand elle rebondit sur un bord de votre sketch : un monSon.play() à l’endroit où la vitesse change de sens.

Le volume et la boucle

Section intitulée « Le volume et la boucle »

La fonction amp() règle le volume de chaque son, indépendamment des autres : de 0 (muet) à 1 (le volume du fichier).

monSon.amp(0.5);

La fonction loop() joue un son en boucle.

monSon.loop();

Générer un visuel en fonction du son (mesurer l’amplitude)

Section intitulée « Générer un visuel en fonction du son (mesurer l’amplitude) »

p5.Amplitude mesure à chaque image le volume du son qui est en train d’être joué. getLevel() le donne sous forme d’un nombre, de 0 (silence) à 1 (le plus fort).

let monSon;
let amplitude;


async function setup() {
  monSon = await loadSound("mes-sons/1927.mp3");
  amplitude = new p5.Amplitude();
  monSon.connect(amplitude);
  createCanvas(400, 400);
}


function mousePressed() {
  monSon.play();
}


function draw() {
  background(240);
  let niveau = amplitude.getLevel();
  circle(200, 200, niveau * 800);
}

Cliquez : le cercle grossit avec le son, et se réduit à un point dans le silence. Le niveau dépasse rarement 0,5 : on le multiplie donc par un grand nombre pour obtenir un diamètre visible.

Pour aller plus loin :

Ces ressources datent d’avant p5.js 2 : elles utilisent preload() et parfois setVolume(). Pour les adapter, voir ci-dessous.

Et preload() ?

Section intitulée « Et preload() ? »

Les anciens exemples (et l’ancienne version de cette page) chargent le son dans preload(). C’était la méthode de p5.js 1.x, supprimée dans p5.js 2.0.

Avant — p5.js 1.x
function preload() {
  monSon = loadSound("mes-sons/1927.mp3");
}


function setup() {
  createCanvas(windowWidth, windowHeight);
}
Maintenant — p5.js 2.0
async function setup() {
  monSon = await loadSound("mes-sons/1927.mp3");
  createCanvas(windowWidth, windowHeight);
}

On déplace les lignes de preload() dans setup(), on ajoute await devant chaque loadSound(), et async devant function setup().