Utiliser des sons

Faire jouer un morceau de musique

Ce programme permet de faire jouer un morceau de musique préchargé.
  • Dans Processing3 en mode P5js, ajouter les deux bibliothèques P5dom et P5sound: Voir
  • Enregistrez ce morceau de musique et glissez-déposez le dans le sketch
  • Ecrivez le programme suivant : 

 var music1;
 var bouton_play;
 var myCanvas;
function preload() {
music1=createAudio('data/MagikStudio_-_Piano_Love.mp3');
}
function setup() {
myCanvas=createCanvas(300, 300);
bouton_play=createButton('play');
bouton_play.position(310, 20);
bouton_play.mousePressed(jouer);
background(0);
}

function draw() {
}

function jouer() {
music1.play();
}

Travail à réaliser

Le son

Nous entendons des sons : c'est-à-dire des vibrations, propagées dans l'air ou dans l'eau, qui stimulent notre oreille. Dans la nature, tout ce qui vibre génère un son : les feuilles agitées par le vent, l'eau qui coule, les cordes d'un violon ou d'une guitare, les cordes vocales ... cochlea.org

Une onde sonore est une vibration des molécules autour de leur position d'équilibre (ou état de repos) qui se propage à la suite de la perturbation du milieu, le plus souvent l'air, mais qui peut aussi être solide ou liquide. Captée par notre oreille, cette vibration met en mouvement le tympan, point de départ de la stimulation de l'oreille et de la perception de l’information sonore.

Caractéristiques d’un son : fréquence, intensité

La fréquence correspond au nombre de vibrations par seconde : s'il y en a peu on entend un son grave, s'il y en a davantage on entend un son aigu. On exprime la fréquence en Hertz (Hz).

L’intensité dépend de l’amplitude de la vibration : plus elle est importante, plus le son est fort ; plus l’amplitude est faible, plus le son est faible. On l’exprime couramment en décibel (dB).

Lors de la lecture d'un son, intensité et fréquence sont des valeurs qui varient, nous utiliserons ces variables pour dessiner dans le canvas des formes qui en dépendront.

Utiliser l'intensité (amplitude)

Dans le programme ci-dessous on représente une ellipse dont la taille et les couleurs dépendent de l'intensité

On utilise l'instruction map(variable,début1,fin1,début2,fin2); qui permet d'échantilloner les valeurs d'une variable(variant dans l'intervalle [début1;fin1]) dans un autre intervalle [début2;fin2]. Ce qui est très utile puisque l'intensité est une variable qui prend ses valeurs dans [0;1](trop petit pour du dessin)


 // déclaration des variables
var amplitude;
var level;
var size;
var couleur;
var musique1;
var bouton_play;
var bouton_stop;
// chargement du morceau de musique
function preload() {
  musique1=createAudio('data/musique1.mp3');
}

function setup() {
  createCanvas(200, 100);
  //création des boutons
  bouton_play=createButton('play');
  bouton_play.position(210, 20);
  bouton_play.mousePressed(jouer);
  bouton_stop=createButton('stop');
  bouton_stop.position(260, 20);
  bouton_stop.mousePressed(stopper);
  background(0);
  // Appel de la méthode p5.Amplitude et on indique le morceau
  //////////////////////Ne rien Changer ici/////
  amplitude=new p5.Amplitude();            /////
  //////////////////////////////////////////////  
}

function draw() {
  background(0);
  strokeWeight(6);
  // on relève l'intensité-ne pas modifier
  level=amplitude.getLevel();
  // on échantillone l'intensité sur l'intervalle de 0 à 150
  size=map(level, 0, 1, 0, 200);
  // on échantillone l'intensité sur l'intervalle de 50 à 255
  couleur=map(level,0,1,50,255);
  //couleurs qui dépende de l'intensité
  stroke(255-couleur,couleur, 0, 50);
  fill(couleur, 255-couleur, 0, 150);
  //ellipse dont la taille dépend de l'intensité
  ellipse(100, 50, size, size);
}

// pour le bouton play
function jouer() {
amplitude.setInput(musique1);// on indique quel morceau de musique 
  musique1.loop();
}
//pour le bouton stop
function stopper() {
  musique1.pause();
}

Travail à réaliser

Utiliser la fréquence

Dans le programme ci-dessous on utilise une liste d'amplitude calculées sur un temps très bref à partir des fréquences..Un peu compliqué non ? 


 var freq;
var spectre;
var musique1;
var bouton_play;
var bouton_stop;
// chargement du morceau de musique
function preload() {
  musique1=createAudio('data/soundbay_-_Epic_Future_1.mp3');
}

function setup() {
  createCanvas(300, 300);
  //création des boutons
  bouton_play=createButton('play');
  bouton_play.position(100, 320);
  bouton_play.mousePressed(jouer);
  bouton_stop=createButton('stop');
  bouton_stop.position(150, 320);
  bouton_stop.mousePressed(stopper);
  background(0);
  // Appel de la méthode p5.FFT()
  freq=new p5.FFT(0.9, 256);//ne pas changer
  frameRate(15);
}

function draw() {
  background(0);
  spectre=freq.waveform();//ne pas changer
  dessin();//appel de la fonction dessin
} 

// pour le bouton play
function jouer() {
  freq.setInput(musique1);//ne pas changer
  musique1.loop();
}
//pour le bouton stop
function stopper() {
  musique1.pause();
}
function dessin() {
  stroke(random(255), random(255), random(255), 100);
  strokeWeight(2);
  fill(random(255), random(255), random(255), 100);
  for (var i=0; i<spectre.length; i=i+1) { // ne pas changer
    var t = map(spectre[i], -1, 1, -5, 5); 
    curveTightness(t);
    beginShape();
    curveVertex(150, 40);
    curveVertex(150, 40);
    curveVertex(40, 150);
    curveVertex(150, 260);
    curveVertex(260, 150);
    curveVertex(150, 40);
    curveVertex(150, 40);
  }
  endShape();
}

Travail à réaliser