Cambiamenti in momenti stabiliti del brano

Si ottengono confrontando a ogni fotogramma la posizione raggiunta nel brano con un elenco di momenti, ognuno con il suo valore. Qui i momenti sono gli attacchi della prima parte del brano, misurati sul file, e a ognuno lo sfondo cambia colore.

    let sound;
let inizio;                              // millisecondi all'avvio del brano
let momenti = [4.3, 15.6, 23.5, 30.8, 40.3];  // secondi dei cambi di colore
let colori = ["gold", "tomato", "orchid", "teal", "white"];

async function setup() {
    createCanvas( 670, 120 );
    textAlign( CENTER );
    fill( 0 );
    sound = await loadSound( 'liszt.mp3' );
}

function draw() {
    let colore = "white";
    let posizione = 0;
    if (sound.isPlaying()) {
        posizione = (millis() - inizio) / 1000;
        for (let i = 0; i < momenti.length; i++) {
            if (posizione >= momenti[i]) {
                colore = colori[i];
            }
        }
    }
    background( colore );
    text( posizione.toFixed( 1 ) + " secondi", width/2, height - 20 );
}

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

Files

  • CARTELLA-SKETCH

Algoritmo

all'avvio:                                                        setup()
    caricare il brano

a ogni clic:                                                      mousePressed()
    se il brano è in esecuzione, fermarlo
    altrimenti avviarlo e memorizzare il momento d'avvio          millis()

a ogni fotogramma:                                                draw()
    partire dal bianco e dalla posizione 0
    se il brano è in esecuzione:                                  if()
        calcolare i secondi passati dall'avvio
        per ogni momento già raggiunto, usare il suo colore       for()
    colorare lo sfondo con il colore scelto                       background()
    scrivere la posizione in basso

Istruzioni

La libreria non dice in che punto del brano è arrivata la riproduzione, ma basta memorizzare il momento in cui parte: millis() restituisce i millisecondi trascorsi dall’avvio dello sketch.

La differenza, divisa per 1000, dà i secondi trascorsi dall’avvio del brano, cioè la posizione raggiunta, finché la riproduzione è continua: con pause(), rate() o jump() il calcolo va corretto. Il suono parte in realtà circa un decimo di secondo dopo play(), un ritardo che qui non si nota.

A ogni fotogramma il colore riparte dal bianco, e il ciclo controlla tutti i momenti in ordine: alla fine resta il colore dell’ultimo momento già superato. Ogni momento ha il suo colore nella stessa posizione dei due array.

Variazioni

Con momenti a intervalli regolari il colore cambia ogni cinque secondi, senza più nessun legame con la musica:

Note

La versione precedente di p5.sound.js aveva il metodo addCue(), che chiamava una funzione in un momento stabilito del brano, e currentTime(), che ne restituiva la posizione. Nella versione 0.4.1 non ci sono più: la guida a p5.sound.js ne ricostruisce una versione completa, che funziona anche con i brani in ripetizione e calcola la posizione con l’orologio dell’audio, più preciso di millis().

Approfondimenti:

Crediti: