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 :)