Modular JavaScript Web Synthesizer

Alex Jilkin
2 min readNov 24, 2019

As a web developer who is also interested in art of music, i was drawn to the technical side of music, if its changing a pick up to my guitar, create a hardware square wave oscillator module and try to create a distortion pedal.

A project creates sound and music out of no where in the browser looked like a great next step for me.

Hence the Modular web synth.

I have been working on it here and there for the past few months, my ultimate goal is to create a web platform where anyone can add any module he wants, in any technology or stack and the module is responsible for manipulating the “wave”.

Right now I have a react app that has an Oscillator that creates 3 kinds of waves (sine, saw, square) and can change it’s levels by rotating the cube.
A sequencer to get the groove going, a delay module to get a cool delay effect, low frequencies pass and a low frequency oscillator.
Just press play and play with it, press on the sequencer markers to change the beat, turn on the delay, rotate the cube to change the sound of the generated wave, drag and drop modules and look at the generated wave drawn at the oscilloscope below.

Of course everything is generated with math and functions, no OscillatorNode or other ready made logic was used as it was important to me to experience the creation of the sound.

Thanks for reading, at another set of articles I will explain the development and progress of this project of mine starting with this article.

--

--