Audio Visualization with Web Audio and Canvas

source code

While exploring ways to visualize audio, I found this blog post and was inspired by the screenshot to create something similar using web technologies. My implementation uses Web Audio AnalyserNode and borrows most of the Web Audio code from this demo.

I developed this in Chrome and didn’t attempt to vendor prefix or compile down ES6 features so other browsers aren’t expected to work.


One of my favorite presets is having the hue multiplier set to .3 so the colors range from a rich red to a pastel yellow. With alpha set to 1, It looks like this:

Eventually I hope to use this as a frontend to display results from an audio recognition engine and better understand audio processing. One drawback of this approach is that it uses requestAnimationFrame and thus has a variable framerate, so the audio data isn’t recorded with a consistent sampling rate.

One experiment with this implementation was using only JavaScript and a root, in the style of React. I liked this approach for the ease of attaching events and not having to query the DOM, though layouts and styling would be harder to get right without being able to inspect the element hierarchy. The entire source is just under 200 lines, check it out! You can also edit the source as its running on the devtools “Sources” tab - try changing the context.fillStyle template string.