realtime audio analysis for Soundcloud

Update: this demo no longer works because of some changes in the soundcloud API and cross orgin crap. Plus the CPU vertex modifications are really inefficient, it would me much better to upgrade this to a shader… something like this is in the works :)

Soundcloud Stream Spectrometer


  • Searching a song in Soundcloud

  • Streaming the signal through javascript’s WebAudio API (not always supported)

  • Optionally running the signal through a Band-Pass filter and displaying its frequency response

  • Performing a Discrete-time Fourier transform (graciously supplied by the AnalyzerNode class in the new WebAudio API)

  • Displaying the signal on a log scale

  • Keeping track of the last 500 frames of DTFT data

  • Tessellated mesh of all the data generated in JS, colored by intensity


This is the first browser visualization I made. I was inspired by Steven Wittens’ amazing Dark Sunrise and thought trying to recreate the spectrometer would be a good place to start. I didn’t use a texture for the audio data since it’s not a whole lot of data, I could definitely optimise this some more. It modifies the vertex positions in the main render loop in javascript, which I see now is a terrible idea, that’s what vertex shaders are for. My next project, Mesh Deformation, takes that into consideration.

For good measure I added a Band Pass Filter, which visibly modifies the spectrum.

Finally, I added a front-end that uses the Soundcloud API to stream any song on Soundcloud through the spectrometer. This was mainly to get around copyright infringement in a demo… Need to build this into every demo from now on.

Thanks to