Energia di una fascia di frequenze

È il livello di una fascia di frequenze, per esempio quella dei bassi, e permette di seguire le diverse parti di un brano. Con le 32 bande predefinite di p5.FFT ogni banda è già una fascia abbastanza larga, e basta leggerne il livello in decibel, come nello spettrogramma.

    let sound;
let fft;

async function setup() {
    createCanvas( 670, 200 );
    colorMode( HSL );
    noFill();
    strokeWeight(3);
    sound = await loadSound( 'liszt.mp3' );
    fft = new p5.FFT();
    fft.analyzer.normalRange = false;
    sound.connect( fft );
}

function draw() {
    background(100);
    let spectrum = fft.analyze();
    let bassi = map( spectrum[0], -100,-20, 0,200, true );
    let medi = map( spectrum[2], -100,-20, 0,200, true );
    let acuti = map( spectrum[4], -100,-20, 0,200, true );
    stroke(0,100,50);
    circle( 335, 100, bassi );
    stroke(80,100,45);
    circle( 335, 100, medi );
    stroke(200,100,60);
    circle( 335, 100, acuti );
}

function mousePressed() {
    userStartAudio();
    if (sound.isPlaying()) {
        sound.stop();
    } else {
        sound.play();
    }
}

Files

CARTELLA-SKETCH
- index.html
- sketch.js
- style.css
- like_analogue.mp3
- liszt.mp3

Algoritmo

all'avvio:                                                        setup()
    caricare il brano e creare l'analisi con 32 bande             p5.FFT
    chiedere i livelli in decibel                                 normalRange
    collegare il brano all'analisi                                connect()

a ogni fotogramma:                                                draw()
    leggere il livello di ogni banda di frequenza                 analyze()
    per la banda dei bassi, quella dei medi e quella degli acuti:
        trasformare il livello in un diametro                     map()
        disegnare un cerchio con quel diametro

a ogni clic:                                                      mousePressed()
    avviare il brano, o fermarlo se è in esecuzione

Istruzioni


  fft = new p5.FFT();
fft.analyzer.normalRange = false;

Senza un numero fra le parentesi l’analisi divide lo spettro in 32 bande. Lo spettro arriva alla metà della frequenza di campionamento dell’audio, che dipende dal computer: con 48000 campioni al secondo arriva a 24000 Hz, e ogni banda copre circa 750 Hz. La seconda riga fa restituire ad analyze() i livelli in decibel, come nello spettrogramma.


  let bassi = map( spectrum[0], -100,-20, 0,200, true );

Il livello della banda, in decibel come nello spettrogramma, diventa un diametro da 0 a 200 pixel, l’altezza della tela. Con true i livelli sotto -100 decibel danno 0, anche prima che il brano parta, quando valgono -Infinity: senza, il diametro sarebbe negativo, e p5.js disegnerebbe comunque il cerchio, come se fosse positivo. Con 48000 campioni al secondo, le tre bande usate sono:

Variabile	Banda	Frequenze
`bassi`	`spectrum[0]`	fino a circa 750 Hz
`medi`	`spectrum[2]`	intorno a 1500 Hz
`acuti`	`spectrum[4]`	intorno a 3000 Hz

Variazioni

Con il secondo audio presente nella cartella dello sketch, un brano elettronico, i tre cerchi sono di solito più grandi, soprattutto quello rosso dei bassi:
  sound = await loadSound( '/*1*/like_analogue.mp3/**/' );

Note

Con p5.js 1 la versione precedente di p5.sound.js aveva il metodo getEnergy(), che nella versione 0.4.1 non c’è più, con cinque fasce predefinite:
  let redEnergy = fft.getEnergy( "bass" );
let greenEnergy = fft.getEnergy( "lowMid" );
let bluEnergy = fft.getEnergy( "mid" );
La guida a p5.sound.js ricostruisce getEnergy() con le stesse cinque fasce, facendo la media di più bande.

Energia di una fascia di frequenze

Approfondimenti:

Correlati:

Crediti: