Forma d'onda dell'intero brano

Si ricava leggendo una volta sola, all’avvio, tutti i campioni del file, e mostra in un colpo d’occhio i passaggi forti e deboli del brano.

    let sound;

async function setup() {
    createCanvas( 670, 200 );
    background( 255 );
    stroke( 144, 96, 192 );
    sound = await loadSound( 'liszt.mp3' );
    let campioni = sound.node.buffer.getChannelData( 0 );
    let passo = floor( campioni.length / width );
    for (let x = 0; x < width; x++) {
        let massimo = 0;
        for (let i = x*passo; i < (x+1)*passo; i++) {
            massimo = max( massimo, abs( campioni[i] ) );
        }
        let h = massimo * 100;
        line( x, 100 - h, x, 100 + h );
    }
}

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

Files

Algoritmo

all'avvio:                                                        setup()
    caricare il brano e leggerne tutti i campioni
    dividere i campioni in tanti tratti quante sono le colonne
    per ogni colonna:                                             for()
        trovare il campione più forte del suo tratto              max()
        disegnare una linea verticale, proporzionale al campione

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

Istruzioni

Restituisce tutti i campioni del primo canale, un array con un valore fra -1 e 1 per ogni campione: per un brano di due minuti, più di cinque milioni. La proprietà node non è documentata, quindi potrebbe cambiare nelle versioni successive della libreria.

Per la colonna x scorre i campioni del suo tratto, da x*passo al successivo escluso, e tiene il più forte. abs() restituisce il valore senza segno, perché un campione di -0.5 è forte quanto un campione di 0.5.

La linea parte dal centro della tela, a 100 pixel dal bordo superiore, e si allunga di h pixel verso l’alto e verso il basso: con un campione di 1, il valore massimo, toccherebbe i due bordi.

Variazioni

Con il secondo audio presente nella cartella dello sketch, un brano elettronico, la forma d’onda è più alta e più uniforme, senza le pause del brano di Liszt:

Note

La versione precedente di p5.sound.js aveva il metodo getPeaks(), che restituiva gli stessi valori. Nella versione 0.4.1 non c’è più.

Approfondimenti:

Crediti: