Feeding the Audio Graph – Using Web Audio’s AnalyserNode

Good article on 24ways (yes, that still is a thing) on using Web Audio’s AnalyserNode.

const waveform = new Uint8Array(analyser.fftSize);
const frequencies = new Uint8Array(analyser.frequencyBinCount);
const ctx = canvas.getContext('2d');

const loop = () => {
    requestAnimationFrame(loop);
    analyser.getByteTimeDomainData(waveform);
    analyser.getByteFrequencyData(frequencies);

    ctx.beginPath();
    waveform.forEach((f, i) => ctx.lineTo(i, f));
    ctx.lineTo(0,255);
    frequencies.forEach((f, i) => ctx.lineTo(i, 255-f));
    ctx.stroke();
}

loop();

I especially like the demo where the emoji are animated based on the frequency.

Feeding the Audio Graph →