Top music visualization resources for web audio API

Having looked into what’s required to build a music visualizer using three.js and WebGL, I’ve come across a few different options and examples, all of which use the WebAudio API to load and play with music. A few of the examples are below:

Experimenting with web audio API + Three.js

by Sann-Remy Chea

This is a good demo, combined with a tutorial and code snippets on how to get started with loading music using the Web Audio API. There’s also code snippet explanations and the source code is all available on git.

Getting Started with Web Audio API

By Boris Smus

This is another good introductory tutorial, showing you how to load and play sounds, change the volume, and crossfade amongst other things.

Exploring the HTML5 Web Audio: visualizing sound

By Jos Dirksen

This is another on setting up the basics of Web Audio API, but with more examples such as creating a cool frequency spectrum

Using the Web Audio API

By Mozilla Developer Network

A more reliable introduction coming from MDN, with some easy to follow starter web apps, such as ‘Violent Theremin’ which allows you to change pitch and volume by moving your mouse, whilst producing a colourful visualization

WebGL Audio Visualization

By macobo

Here are some more complex examples, but the source code is also available on github