JavaScript Web Synth From Scratch — Delay Module

Alex Jilkin
2 min readMar 14, 2021

We got ourselves a nice keyboard to play generated sounds in the previous chapter.
Now I think it is time to add a module infrastructure, where we can add different modules that can spice up our sound.
There are different types of it in the audio world: delays, distortions, low/high pass filters and we will implement the delay on this fabulous occasion.

Delay

Is basically just saving the previous state of the system (at a feedback array)
And adding it again to the current state depending on some formula.
In our delay we will have those parameters:
Time: What is the size of step when going back in time (seconds)?
Depth: How many steps should I go back in time?
Gain: How much the volume is lowered for each step added? we want each step to be lower volume from the previous one.

Basic synth with delay diagram

The implementation is simple, we would save u the current state in a cyclic feedback array and return
u = u + gain^i * (u + feedback[abs(cyclicN-(i*time*sampleRate))])

Yoopti doo we got a delay, Check out the demo here.

Some words on the modules infrastructure

In the previous step, we generate sounds from an oscillator for every key pressed; Now we want the result of it all to go through some manipulation models like the delay from upstairs.
The modules can be seen as a middleware pattern, I can register a new module in the synth and the parameters of u, x, frequencyModulation are passed from one to another, while every module returns new values in any way it seems fit.
The generating modules are of course the first in it chain, the system state u=0 and the oscillator generates sound based on x.
While the others like the delay, makes changes based on the current state as well.

Have a look at the synth.js file.
We can subscribe a module to the synth and at lines 49–51 pass the wave through all modules.
Still very simplistic, it’s a start that suits our current needs.

Full source code is here, thank you very much for reading.
Comment, reach out, like, shout, clap, criticize, whatever you prefer.
I would be happy to.

--

--