Last week I stumbled on this Tone Matrix, which uses the Web Audio API to generate and play sounds. I got really interested in the mechanics of sound generation and wondered how they did it, but unfortunately, there’s no source… so I decided to learn more about the Web Audio API, and recreate the matrix as an exercise. The source is available on github.

I’ll be running a tutorial for Women Who Code Sydney in July on how this works, and plan to cover some different filters and effects you can run sound through to get more interesting results (the matrix in its current state is pretty basic). There is more mathematics than I had bargained for, but producing a basic sound doesn’t really require a lot of code.

You’ll need to have a fairly recent version of your browser to play with the demo.

Things I learned:

• You can use existing sound sources (existing files, microphone) but also generate a sound wave with an Oscillator.
• It’s a pipeline. Only one thing should output to your speakers.
• Each audio buffer note can only be played once. You need to recreate each new note to play.
• Sometimes there are loud ‘click’ noises as you abruptly change the notes through the speakers. You need to cater for this with some filters, or gain (aka volume control).
• The API has been in development/experimental phase for quite a while and there’s not a lot of comprehensive documentation available. Most of the learning came from code samples.

Some interesting reading:

• Creating Sound with the Web Audio API and Oscillators
• Getting Started with Web Audio API – just keep in mind that you don’t have to “load” a sound, you can generate one from an oscillator.
• Soft Synth Web Audio Experiments – some code examples of using gain to change sound
• NoiseHack – some code examples of further effects available
• SoundJS – I haven’t used this library yet, but it looks interesting!