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 = () => {

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


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

Feeding the Audio Graph →

Published by Bramus!

Bramus is a frontend web developer from Belgium, working as a Chrome Developer Relations Engineer at Google. From the moment he discovered view-source at the age of 14 (way back in 1997), he fell in love with the web and has been tinkering with it ever since (more …)

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.