Introduction

DSP has always been far away from the Web. Mainly because all DAWs, VST plugins and imbedded digital synths software are written in C/C++. Also web developers often get scared of things like convolution, FFT and integrals. However times are changing and these days nothing stops us from building complete synths replicas using Web Audio API, which abstracts a lot of math away. At the same time I feel like there is a lack of articles targeted at web developers which go deeper in DSP theory than just connecting some Audio Nodes together. And it’s a shame since doing DSP without understanding synthesis is no fun.

As a disclaimer I am in no way a DSP expert, I am a just web developer who is interested in DSP and likes to fool around with synths and other music related stuff.

What is reverb

Reverb is an effect making your instrument sound as if it was played is a certain space, like under the bridge, in a big concert hall or maybe inside a tin can. Every space has its own acoustics, so the same sound would be perceived differently in every space. This is because sound waves would reflect differently depending on what walls are made of, how big is the room and thickness of the Persian carpet on the floor.

Now how can we make a dry synthesizer note sound like it was played in The Bolshoi Theater? Well… lets take a look.

Claps and echos

Convolution reverb is based on the concept of an impulse response — the way a room responds to an impulse, for a example to a short clap. Every room will respond differently to a clap and room acoustics can be completely characterised by its impulse response. Ideally impulse is as short as one sample and has all frequencies equally present. Graphically it might look like this:

Impulse (left) and impulse response (right), source

In other words, if one claps in a big empty room, this can be considered an impulse. And impulse response is how room reacts to this impulse — the echoes and reverberations you hear while the clap fades away. Now if we multiply each sample of a sound (say of a guitar chord) by an impulse response of concert call and then sum it all up, you would basically get the sound of guitar as if it was played in this concert hall.

Example of an impulse response

The very basic naïve implementation of convolutional reverb in JavaScript can be done like below (but no one does it like that):

However in reality this would be too slow. Imagine every second of your sound would be 41000 samples. And in a room with lots of echo impulse response would be maybe 2 seconds, so 82000 samples long. Therefore to apply the convolution reverb effect we would need to do 41000 * 82000 = 3362 millions operations just to process 1 second of a sound. Off course it makes this option impossible for real time audio processing. This computation becomes much more efficient if we do it in the frequency domain instead of the time domain. So we would first perform FFT of both input signal and impulse response, multiply those, and perform a reverse FFT.

If convolution still does not make any sense to you or if you just want to know more about it I advice to check out this book , which is the best convolution explanation I came across so far.

Luckily for us Web Audio API provides a Convolver Node, so we do not have to implement convolution algorithm ourselves.

Demo GitHub

What’s next

Unfortunately even using a native convolver node results in some latency when applied to a real time input (in my case I connect an analog synth to line-in). Besides that a big disadvantage of convolution reverb is that we can not easily adjust the reverb parameters in real time. So if we would like to adjust for example the room size we would have to convolve with a different impulse response. For these reasons in certain situations we would need an alternative for convolution.

In the next parts of the series we will be looking at algorithmic reverb, delay lines, Audio Worklet and Mr. Shroeder’s Freeverb.

Update: Part II: Algorithmic Reverb and Web Audio API