Web Audio: visualizzare il suono con l'AnalyserNode

L'AnalyserNode ti dà i dati grezzi del suono in tempo reale: la forma d'onda e lo spettro delle frequenze. È il ponte tra audio e grafica.

const analyser = ctx.createAnalyser();
analyser.fftSize = 2048;
source.connect(analyser);
analyser.connect(ctx.destination);

const dati = new Uint8Array(analyser.frequencyBinCount);

function disegna() {
  requestAnimationFrame(disegna);
  analyser.getByteFrequencyData(dati); // riempi con lo spettro attuale
  // ...disegna 'dati' su un <canvas> come barre
}
disegna();

getByteFrequencyData riempie un array con l'intensità di ogni banda di frequenza; getByteTimeDomainData ti dà invece la forma d'onda. Leggi questi valori dentro un loop di requestAnimationFrame e li disegni su un canvas.

Bassi a sinistra, alti a destra: ecco lo spettro che pulsa a ritmo. È il classico visualizer, e sono meno di venti righe. L'audio smette di essere invisibile.