4elements, web design and consultancy

Robert Moog famously created one of the very first commercial modular synthesizers. His inventions consisted of banks of wires and knobs, allowing musicians to create sounds never heard before. These instruments weren't cheap either, costing thousands of dollars for even the most basic model.

Now, thanks to the Web Audio API, we can create our own similar-sounding synth that we can configure to our heart's content for the grand total of $0. Not only that, we can distribute our synth instantly to anyone in the world thanks to the web.

If you haven't read the previous tutorials in this Web Audio series, I'd suggest going to back and reading them before undertaking this one, as they cover the basics of using the Web Audio API and creating a sound from scratch.

Keyboard

Perhaps the most important thing your synth needs is a keyboard. Luckily, I've created a little snippet of JavaScript that will add a virtual keyboard to your page. Download a copy of Qwerty Hancock and reference it at the bottom of your page like so.

<script src="scripts/qwerty-hancock.min.js"></script>

Then add an empty div to your page with an id of "keyboard".

<div id="keyboard"></div>

This is the place on the page that the keyboard will be inserted into.

We'll also want to set up a dedicated JavaScript file for our synth, so let's create that too and reference it after where we've included Qwerty Hancock.

This tells our page to insert an instance of our keyboard into the element with the id of "keyboard", resize it to 600 x 150 px, and make the number of keys on the keyboard cover two octaves. Save and refresh your browser to see a lovely onscreen keyboard. Use keys, touch, or your mouse to see notes light up as you press them.

Qwerty Hancock provides us with two event listeners, keyUp and keyDown. These allow us to hook into the keyboard and write code that fires when the keyboard is pressed. It also tells us which note was pressed, and its corresponding frequency in hertz.

Why are we creating the oscillator inside the keyDown function? Isn't that inefficient? Oscillators are designed to be lightweight and to be thrown away after use. You can actually only use them once. Think of them as some sort of bizarre audio firework.

Now when we press a key, we hear a sound. It's a bit loud, so let's create a gainNode to act as master volume control.

A keyboard that plays one single note over and over isn't very fun, so let's plug in the frequency to the oscillator before we start it playing.

osc.frequency.value = frequency;

Lovely. We now need to stop the oscillator playing after we lift a key rather than after a second. Because we're creating the oscillator inside the keyDown function, we need to keep track of which oscillator is playing which frequency in order to stop it when the key is released. A simple way of doing this is to create an empty object and add the frequencies as keys, along with which oscillator is playing that frequency as its value.

We now have a fully working (very basic) synthesizer in the browser! Ok, it doesn't sound great at the moment, but let's see if we can change that.

The first thing to do is change the type of wave the oscillator outputs. There are four basic types to choose from: sine, square, triangle and sawtooth. Each different shape of wave sounds different. Play about with them and choose your favourite. For this example, I'll choose "sawtooth".

osc.type = 'sawtooth';

There, that sounds better.

It's very rare you'll find a synthesizer that uses a single oscillator. Most synths beef up their sound by combining different oscillators of different types. Let's see how it sounds if we add another. Remember, we need to double up all our connections, and we'll need to add oscillators of the same frequency to an array. This means we can iterate over them in order to stop all of the oscillators that are playing the same note.