JavaScript Web Synth from scratch — Step 1

Checkout part 2 where we create a virtual keyboard to play our sine wave.
And checkout the full project I am working on: jsynth.

As a web developer and someone who is interested in the technical aspect of music creation, I decided to try and create a modular web synth from scratch.

I never actually had an experience with a modular synth, but I understand this- every synth starts with a signal source, or an Oscillator So my first step to create this modular web synth is to create an oscillator module.

The Oscillator module:

First I started to fiddle a bit in node js, and created a wav file from an array of values.
In 44100 Hz sample rate, I need and array of 44100 values to create a second of sound.
The function of the sine wave is as follows

const getSineWave = (frequency, x) => 
  Math.sin(Math.PI * 2 * (frequency) * x / sampleRate) * amplitude

Now to the array creation

let sound = [];
for (let x = 0; x < sampleRate; x++) {
  sound[x] = getSineWave(frequency, x);
}

Used wavefile npm package to create a wav file with a 16 bit rate and our 44100 sample. And used speaker npm package to play it.

Hooray! we got a node js script that creates a sine wave and plays it.

To fiddle more with it, we can add another sine wave an octave lower which is exactly half of our original frequency.

sound[x] = getSineWave(frequency, x) + getSineWave(frequency / 2, x) 

Cool.

Next order of business is -

• Play it in the browser
• Refactor the wave creation function, creating one second every time and playing it is strange.
• Explore more types of waves: saw, square.
• Create a simple sequencer module so we could make something closer to music :)