Simple Web Audio Example with Visualization

NOTE: This only works in Google Chrome as of 2013-03-06

This demo was based on the excellent tutorial Exploring the HTML5 Web Audio: visualizing sound by Jos Dirksen.

I've reworked that code to display the sonogram in a different way and added controls that start and stop the audio.

Web Audio makes use of different types of 'nodes' that are connected or 'wired together' to create your audio pipeline.

This page illustrates the basic concepts of playing a sound from a file, calculating frequency data and visualizing these.


On page load the script creates the AudioContext and JavaScriptNode.

When the Start button is clicked, it loads the audio from file into an AudioBuffer, creates an Analyser and wires all the components together.

The audio starts playing and the analyser collects samples and performs FFTs to create an array of the frequencies. For each time slice the array is drawn as a color mapped column in the display.

View the source for this page to see the JS code and comments.

You need to run this page from a server - not simply open from file - and you need to have the audio sample file on the same server. You also need a local copy of the chroma.js library.


The audio sample is a clip of the Doctor Who theme by Delia Derbyshire and the BBC Radiophonic Workshop and was downloaded from Wikipedia.


This demo was created by Robert Jones of Craic Computing and is freely distributed under the terms of the MIT license.