Badass JavaScript

A showcase of awesome JavaScript that pushes the boundaries of what's possible on the web, by @devongovett.

Morning Star: An Impressive Audio Synth in JavaScript

January 30th 2012

Morning Star is a monophonic bassline synthesizer controlled by a step sequencer, designed to run on Web browsers and made entirely with HTML5 and JavaScript (no Flash).

It uses Mozilla’s Audio Data API, and Google’s competing Web Audio API to produce sound in real time abstracting them with a library called KievII, which is a library containing both an audio DSP as well as various GUI elements that one might need in various audio applications.  These elements include knobs, sliders and more all build with HTML5 canvas as a rendering engine.

The synth itself has many features including a step editor, piano roll, pattern control, recoding and playback, various effects and more.  Your changes automatically get saved into localStorage as you’re editing so if you close your browser and reopen it your work will be just as you left it.  You can even export a URL to your song to share and collaborate with friends.

Another interesting thing to note is that the entire UI is a single canvas element, which is an interesting choice and certainly a good experiment.  Obviously there are accessibility problems with this approach since screen readers and other assistive technologies know nothing about what is in a canvas element, but otherwise it seems to perform pretty well.

As usual, the source code for Morning Star is available on Github, there is a blog post that goes into great detail about each feature of the synthesizer, and if you haven’t already, check out the demo.  Happy Monday!