La librairie p5.sound permet à p5.js d’utiliser les fonctionnalité audio, y compris l’entrée audio, la lecture, l’analyse et la synthèse.
Les bases de la gestion des fichiers son se trouvent dans le chapitre : / p5.js / 11 / média : charger des sons.

1 / Charger le son / Jouer le son / Stopper le son

var son;

function setup() {
 son = loadSound('sons/caisse.mp3');
 createCanvas(780, 300);
 background(236,36,94);
 cursor(HAND);
}

function mousePressed() {

 if (son.isPlaying() ) { 
 son.stop();
 background(236,36,94);
 } else {
 son.play();
 background(255);
 }
}

2 / Charger le son dans preload() ainsi il est prêt à être joué dans le setup()

var son;

function preload() {
 son = loadSound('sons/bip.mp3');
 cursor(HAND);
}

function setup() {
 createCanvas(780, 300);
 son.loop(); // son est prêt
 background(236,36,94);
}

function mousePressed() {
 if ( son.isPlaying() ) { 
 son.pause(); // .play() rejoue à partir de .pause() position
 background(36,236,94);
 } else {
 son.play();
 background(236,36,94);
 }
}

3 / Il n’y a pas 1 format supporté par tous les navigateurs. Le format mp3 est natif dans Firefox et Opera…
Pour assurer la compatibilité il faut prévoir plusieurs formats. Ogg est un format open-source qui est une alternative à mp3.
Pour convertir en oog, http://media.io
Le script définit les formats proposés et la fonction loadsound() utilise le premier format supporté par le navigateur

var son;
function preload() {
 soundFormats('ogg', 'mp3'); 
 son = loadSound('sons/siffle');
}

function setup() {
 createCanvas(780, 300);
 cursor(HAND);
 son.play();
 background(236,36,94);
}

function mousePressed() {
 if ( son.isPlaying() ) { 
 son.pause();
 background(36,236,94);
 } else {
 son.play(); 
 background(236,36,94);
 }
}

4 / Changer le volume du son (déplacement de la souris en x / Changer la vitesse du son (déplacement de la souris en y

var son;

function preload() {
 
 son = loadSound('sons/piano1.mp3');
}

function setup() {
 createCanvas(780, 300);

 //boucle le son
 son.loop();
}

function draw() {
 background(255);

 // Volume entre 0 & 1
 var volume = map(mouseX, 100, width-100, 0, 1);
 volume = constrain(volume, 0, 1);
 son.amp(volume);

 // Vitesse entre 0.01 & 4
 // Changer la vitesse => Change la hauteur
 var speed = map(mouseY, 100, height-100, 0, 4);
 speed = constrain(speed, 0.01, 4);
 son.rate(speed);

 // Dessine des cercles pour montrer ce qui se passe
 noStroke();
 fill(236,36,94);
 text(volume,mouseX,150);
 ellipse(mouseX, 100, 48, 48);
 noStroke();
 fill(36,236,94);
 ellipse(100, mouseY, 48, 48);
 text(speed,150,mouseY);
}

5 /  Il est possible de régler le panoramique stéréo avec son.pan(), valeurs entre -1.0 (à gauche) et 1.0 (à droite). Par défaut 0.0 (au centre)

var son;

function preload() {
 son = loadSound('sons/piano3.mp3');
}

function setup() {
 createCanvas(780, 300); 
 son.loop();
}

function draw() {
 background(255);
 var panning = map(mouseX, 0.0, width, -1.0, 1.0);
 panning = constrain(panning, -1.0, 1.0);
 son.pan(panning);
 noStroke();
 fill(236, 36,94);
 ellipse(mouseX, 100, 48, 48);
}

Suite…