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!


I feel excited to have started a new blog and write my first post.

I had a blog before, but it had no particular goals. This, on the other hand, will be mostly aimed at sharing some of the things that I learn in the area of Audio Production and Frontend Development.

I’ve been working as a Frontend Engineer for close to 3 years now and it’s been quite an exciting journey. The job involves understanding design and writing code, and this intersection of art and technology brings in some joy.

Music has been my main interest since engineering days, but it had been limited to only exploring and listening new sounds. Things changed when I began to learn an audio programming language called Chuck, which introduced me to the concept of music synthesis. I got deeply interested in synthesis and it led me to dive into the area of audio production.

I’m very new to this area and have been learning through online courses, tutorials, articles etc. I’ve a system running Ubuntu 14.04 and it took me a while to understand and have the Jack audio setup working.

I want to keep learning and share them. Hope I get to do it through this blog.