Building a Synthesizer in Javascript

I've been playing around with the WebAudio API. You can generate sounds from it. So I've built a synthesizer app with it as a weekend project. How hard can it be?

The API is built like an actual modular syntheizer. That came to me as a pleasant surprise. I've been experimenting with Pure Data a while back, so I know more or less how those things work. And now I can apply this knowledge to javascript. First, let's clear out the basics.

What's a synthesizer?

It all begins with an Oscillator. That's an electric device that emits a wave pattern in a defined frequency, generating a sound. Think of it as a physical device (because that's what it is in a modular synthesizer), or as the WebAudio API calls it - a node. That node has an input and an output. The input is the waveform and frequency, the output is the sound signal. That signal can now be connected to other devices. An actual synthesizer would have speakers as the last device in the chain, but the WebAudio API foregoes that. The last node simply acts as a speaker.

The oscillator

My oscillator is a very simple one. It supports the four basic waveforms (sine, square, triangle, sawtooth) and a frequency. The different waveforms generate different kinds of tones: A sine wave sounds a bit warm and soft, a sawtooth is more industrial and harsh. The frequency determines the pitch. 440Hz corresponds to the concert pitch A. Wikipedia has a full table of all the frequencies.

Attack, Decay, Sustain, Release

Next, I want some controls to further manipulate the character of my sound signal. Give it a more roomy tone, or a pluck, or a swell. On a real synthesizer, those controls are named envelope, Contour, or ADSR. That's short for Attack, Decay, Sustain and Release.

It's an established system to give a wide gamut of characteristics to a relatively simple signal, by manipulating its volume (y-axis) over time (x-axis). The four keywords stand for a specific aspect each:

• Attack: The swell of the volume at the beginning of the tone
• Decay: The decrease in volume right after the start, like the pluck of a guitar
• Sustain: Holding the note at a specific volume for as long as the signal comes
• Release: The volume of the note after the signal has gone, like a hall effect

There are some more specific envelopes and there are also lots of effects and methods to manipulate the sound further, but I'll do just fine with those four basic controls.

Building it

Here's a rough sketch of how the logic works.

Each audio node gets options to configure them. Pressing a key triggers the sound generation from the Oscillator and the subsequent steps Attack, Decay and Sustain. Letting go of a key triggers the Release step and then terminates the note.

What a pressing a key actually means, depends on the input device. Ideally, I'd wish for something like <input type="piano">, but realistically, I had to implement handlers for mouse, touch, and keyboard events myself.

So I wound up with a functional synthesizer. To top it off I added the usual PWA niceties, a logo and called it JSSynth:

Awesome, done!

Limits

Chrome puts a limit on how many oscillators can play simultaneously. On Windows and macOS that appears to be 50, but it's much lower on Android. Firefox does not place such a limit at all.

Safari doesn't include the AudioContext yet (but it's in TP for version 14), so this synthesizer won't work neither on Safari for macOS nor any iOS browser until they open their OS up for third party browser engines.

I think there's a bug somewhere in the release key mechanism because keys tend to get stuck when played frantically. Until I can be bothered to fix that, a reload is the only thing that helps.

Other than that, I think it turned out quite okay and a fun little project. Here's the app and the code. Let's jam!

Comments

[David Dal Busco]

Amazing 🤩

Not kidding, I used to compose electronic music as a hobby and play in a post-electro band, love these kind of projects!

Well done 👍

[calag4n]

Great project 👏 !

I'm intented to build a metronome with advanced features for drumming purpose,so, as you guess, I need a very accurate and stable "audio engine" .
Do you think the WebAudio API is able to make the job ?

[Daniel Schulz]

Maybe.
Take a look at the limitations. It doesn't run on Apple software yet, and there's a limit on simultaneous tones on Chrome.
A metronome that just clicks should be fine and quite easy to implement. Something like this:

setInterval(()=>{
    -> AudioContext
    -> Osc(Sine, 440Hz)
    -> Ramp up and down to prevent clicking
    -> Delete audio node after ramping down
}, bpm)

I'm very interested in its accuracy over a long time, though. If you get around to do that, ping me please :)

[calag4n]

Yes, I'll do, thanks 🙂.

[Michael Tharrington]

This is super cool!

And for all you synth nerds out there who land on this, I read another cool post the other day on DEV that you might find interesting:

Dublin Maker Music/Synth Podcast

whykay 👩🏻‍💻🐈🏳️‍🌈 (she/her) ・ Aug 28 '20 ・ 6 min read

#dublinmaker #maker #electronics #synth

[Jordan Holt]

Very cool! Nice work 🎶
I used to work with analog synths all the time. I'd have to set them and calibrate them ahead of recording sessions. It was a love hate relationship, always some pan pot causing a problem or oscillator going out of tune.
This post gave me some inspiration to explore the Web Audio API.

Thanks 👍

[ADDD]

WOW! Super cool idea!

[paraparata]

This is so awesome!
The same idea had popped up in my mind but i didn't knew where to start haha. Thank you for sharing. Nice post!