Volume del microfono

Si legge con la classe p5.AudioIn della libreria p5.sound.js, collegata a un’analisi del volume p5.Amplitude: un valore a ogni fotogramma, che può far reagire una forma ai suoni e ai rumori dell’ambiente. Qui il cerchio cresce con il volume.

Fare clic sul canvas e permettere l’uso del microfono, poi parlare o battere le mani.

    let microfono;   // l'ingresso audio
let volume;      // analisi del volume

function setup() {
    createCanvas( 670, 240 );
    microfono = new p5.AudioIn();
    volume = new p5.Amplitude();
    microfono.disconnect();   // altrimenti esce dagli altoparlanti
    microfono.connect( volume );
}

function draw() {
    background( 255 );
    let livello = volume.getLevel();
    let diametro = map( livello, 0,0.2, 20,120, true );
    circle( width/2, height/2, diametro );
}

function mousePressed() {
    microfono.start();   // chiede il permesso di usare il microfono
}

Algoritmo

all'avvio:                                                        setup()
    creare l'ingresso del microfono e l'analisi del volume        p5.AudioIn
    staccare il microfono dagli altoparlanti                      disconnect()
    collegarlo all'analisi del volume                             connect()

a ogni fotogramma:                                                draw()
    leggere il volume                                             getLevel()
    trasformarlo in un diametro, più grande con più volume        map()
    disegnare il cerchio al centro

a ogni clic:                                                      mousePressed()
    avviare il microfono, che chiede il permesso all'utente       start()

Istruzioni

Nella versione 0.4.1 della libreria, quella per p5.js 2, il microfono esce anche dagli altoparlanti, con il rischio di un fischio (effetto Larsen): disconnect() lo stacca, e connect() lo collega solo all’analisi del volume.

Il volume va da 0 a 1, ma la voce e i rumori di una stanza restano di solito molto più bassi. Da 0 a 0.2 il diametro passa da 20 a 120 pixel: più forte è il suono, più il cerchio cresce. Con true non esce dai due estremi.

Il browser permette di avviare l’audio solo dopo un gesto dell’utente, come un clic, e chiede il permesso di usare il microfono solo alle pagine servite da Live Server o da un sito in https. Per questo start() sta in mousePressed(): chiamata in setup(), l’audio resterebbe sospeso e il volume sempre a zero. La libreria va inclusa nell’index.html, subito dopo p5.js.

Variazioni

Con 120,20 al posto di 20,120 il cerchio si ritrae al rumore, come se ne avesse paura.

Con questa riga in setup(), dopo new p5.Amplitude(), il cerchio cresce subito ma torna piccolo lentamente, perché il volume letto cala di un decimo per fotogramma:

Approfondimenti: