Getting frequency data from sound files in JavaScript

A few months ago, Madeon's The Prince audio visualizer inspired me to create something fun with audio. A spectrogram or some kind of similar visualization maybe?

A lot of the tutorials I found took the approach "here's a full project I made and here's what my code looked like at every step." They were helpful to understand the potential of the Web Audio API, but I didn't want to recreate their project; I found myself searching for that one nugget of information "how did they extract the time frequency data?"

There's a huge wealth of cool applications out there, but I wish the guides would separate out core Web Audio API concepts before extending with other feature choices and technology choices like WebGL/canvas :| So I made the guide I wish I had!

All that said, I do think the MDN docs on the Web Audio API do a decent job of explaining in the first concepts and usage section.

Here's our plan:

Setup bits

<audio controls src="/files/spectrogram-input.mp3"></audio>
<div id="spectrogram">
<div id="bin-0"></div>
<div id="bin-1"></div>
(programmatically generated...)

Web Audio API bits

Processing bits

The result

Audio input:

Future work

There are a few issues with this:

But these are immaterial to my goal here :)