Audible waves of Javascript (Web Audio API)

A Cart on the Snowy Road at Honfleur (1865 or 1867), Monet’s first snowscape.

Digital audio synthesis with Web Audio API

At a time when humans are researching to synthesize human consciousness, audio synthesis may sound primitive. But can’t we agree on that being subject to one of the five senses, audible waves play a leading roll in our day to day lives?

This article's intention is to explore the practical applications of digital audio synthesis in a developer-friendly environment using Web Audio API

To see how powerful the Web Audio API is, I tried to build a synthesizer that runs in the browser and managed to build the following functionality into the “synth”.

1. Three oscillators.
2. Pitch controls for each oscillator.
3. Three-channel mixer.
4. Reverb effect on the master channel.
5. Keyboard to play C major scale (so we won’t sound awful).
6. Release envelop for key release.
7. Oscilloscope (so we can see the actual waveshape).

The code is available here.

DumindaWijesinghe/web-audio-api-demo

“Release” is intentionally misspelled to get your attention :)

We can use Web Audio Inspector to see what's happening under the hood and this is how it looks for our setup. It’s very convenient to see which module links to which while debugging the code.

Let’s have a brief look at the modules in the graph.

AudioContext

The AudioContext is the container for everything happening here or we can call it the audio processing graph. AudioContext handles the creation of each and every node in the graph.

audioCtx = new AudioContext();

Oscillator

Oscillator nodes are responsible for generating waves. We can choose from "sine", "square", "sawtooth", "triangle" and "custom" . In our implementation, we have used "sine" for oscillator 1,"square" for oscillator 2 and"sawtooth" for oscillator 3.

osc1 = audioCtx.createOscillator();
osc1.type = "sine";
osc2 = audioCtx.createOscillator();
osc2.type = "square";
osc3 = audioCtx.createOscillator();
osc3.type = "sawtooth";

Gain

We can think of Gain nodes as volume knobs and it is what we have used to build the mixer and the release envelop.

amp1 = audioCtx.createGain();
amp2 = audioCtx.createGain();
amp3 = audioCtx.createGain();
master = audioCtx.createGain(); // Release envelop

Convolver

This is the node we have used to achieve a reverb effect.

convolver = audioCtx.createConvolver();

Analyser

Analyser node can extract real-time information for analyzing and visualization purposes.

analyser = audioCtx.createAnalyser();

This is the whole setup for now. Of course, there is so much we can improve, but as far as a proof of concept goes this is awesome.

With higher-level frameworks such as Tone.js, Web Audio API has so much potential to be used in all kinds of applications in an audio production workflow. Looking forward to tinker and I’ll be writing about it when I have something to present.

Until then, keep hacking…