Revision Content

This article describes the creation of a simple synth, using existing tools, such as the Audio API, HTML5 Virtual MIDI Keyboard and some additional javascript libraries (osc.js, audiodevice.js). Osc.js is a library that describes a class for an oscillator, and audiodevice.js describes a class that interacts with the mozAudio API in a way that allows for using callbacks to write the audio.

Let's start with a plan, and go with as simple as it gets: a synth with a virtual midi keyboard, waveshape options and maybe some noise modulation for an extra spicyness.

The code, HTML

So the html (simplesynth.html) should include all our scripts, an iframe for the keyboard, and an option tag to change the waveform.

CSS

JavaScript

Now we need a plan for the script. We don't really need to do much, we mush instantiate an AudioDevice with a callback that fill the buffer with data from the Oscillator. Then we need to bind the midi data to control the frequency of the oscillator, bind an event listener to the select to change the waveform and that's pretty much it.