Still in development
A simple additive synthesizer made using javascript's native Web Audio API and ReactJS.
Made to be used with an actual computer or laptop keyboard.
Mobile version in development
--- Making music
The piano keys are binded to your keyboard.
Keyboard keys = Music notes
7 8 0 - + / A S F G H = C# D# F# G# A#
Y U I O P [ ] / Z X C V B N M = C D E F G A B
You can also go an octave higher or lower using the shift + one of the keys above
Shift + Z = C3 (A "C" an octave lower)
Shift + Y = C6 (A "C" an octave higher)
--- Changing waveform type
You can change the type of wave by pressing the (Below is the generalization for the type of sound each creates)
Sine
- Used for bell sounds
Square
- Retro 8-bit type of sounds
Triangle
- Clave sounds, can possibly do some Deep purple tracks using it
Sawtooth
- Synthwave-y type of sounds.
buttons below the "Master Volume" slider.
--- ADSR
The synth has a very basic ADSR (Attack, Decay, Sustain, Release).
You can use the arrows under each one to adjust the value of the targetted ADSR value.
-- Quick overview of ADSR
ADSR is a function that adjusts the sound volume of the wave/note being played. Below shows a very basic wave being adjusted.
V | A
O | A D
L | A D
U | A D S S S S R
M | A R - Normal
E | A R
| A R
----------------------------
TIME
V | A
O | A D
L | A D
U | A D S S S S R - Attack set to 0.0ms
M | A R
E | A R
| A R
----------------------------
TIME
V | A
O | A D
L | A D
U | A S S S S S S R
M | A R - Decay set to 0.0ms
E | A R
| A R
----------------------------
TIME
V | ADS S S S S
O | A R
L | A R - Sustain set to 1. (100% of master volume)
U | A R
M | A R
E | A R
| A R
----------------------------
TIME
V | A
O | A D
L | A D
U | A D S S S S R - Release set to 0.0ms
M | A R
E | A R
| A R
----------------------------
TIME
A = Attack (Time value to Master Volume )
D = Decay ( Time value to Sustain value )
S = Sustain ( Level value which is set to a percentage of the master volume )
R = Release ( Time value to set the volume to 0 once note is released )
Please try it yourself to understand it further.