Web Audio Sequencer

It all started on a Friday night, the thought, the idea to build something using Web Audio.

I’ve been technically interested in music for sometime now, and being a front end developer, web audio was something that I couldn’t ignore to try out. Having some basic knowledge of audio routing and music synthesis made it easier for me to directly dive into web audio.

I thought it was a good opportunity for me to implement some of the synthesis techniques I’d learnt. So the first thing I built was http://webaudio-synth.appspot.com/#/synth .

This is a single octave synth, having ADSR (Attach, Delay, Sustain, Release) envelope, 4 types of oscillator, a low pass filter (cutoff frequency and Resonance Q), and a canvas to visualise the wave selected.

The audio routing for this looks like – Oscillator -> ADSR -> Filter -> DAC

I’d like to write a separate blog post on this whole routing thing, but if you want an overall good understanding I’d recommend reading http://chimera.labs.oreilly.com/books/1234000001552 . This is quite informative and will give you a good foundation on web audio.

I’d built this almost an year ago! I’ve not done anything much with web audio since as I have been only spending time on Ableton.

I love web and it is fun to program audio. So I decided to build a music sequencer and here it is – http://codepen.io/subtraktive/pen/ByvVzr 

It is simple in its function, there are 16 steps which can be used to create a pattern, an input range selector for BPM, and a play/pause button. You choose a pattern, the bpm and you can play the pattern endlessly. You can also change the pattern, the bpm on the go!

The only complex thing about this is the scheduling! Web Audio doesn’t provide you a scheduler, you need to build it yourself. The Javascript timers cannot be used as they are dependent on the thread (JS is single threaded!) and can result in delays. Timing is one of the most important aspects of audio and you can’t screw it.

To get a better understanding of schedulers I read http://www.html5rocks.com/en/tutorials/audio/scheduling/ a couple of times. Honestly, I still haven’t completely understood some of the things he says, but I got an idea of how it works and how to implement it.

I used the same technique to schedule audio events. The only change I made was to make it a sequencer. The idea is very simple, you just push the selected boxes into an array and every time the scheduler runs, it checks if the beat no currently running is present in the array, and if so it plays it. I’ve commented the code and should be easily understandable. If not please provide comments, and I can help.

There is so much fun in building these small components. Looking forward to build more, hope I won’t take another year for it!