Clo-Synth is a monophonic synthesizer built with Tone.js and p5.js. Features include a waveform visualizer, ADSR envelope, waveform selection and the ability to use your computer keyboard as if it were a midi controller. Check out the source code if you're interested to see how it works.
You can use the keys on your laptop/desktop computer keyboard to play notes. If you look at the synthesizer keyboard, there is a letter (or character) on each key. That letter (or character) is the corresponding key to type that will play a note. In order, the options you can type to play are: A W S E D F T G Y H U J K O L P ; ' (The last two characters are a semicolon and a single quote).
There are 8 selectable note ranges:
By pressing "Z", the playable note range will drop to the note range below the current. For example, if the selected note range is C3-F4, pressing "Z" will select the C2-F4 range.
By pressing "X", the playable note range will move up to the note range above the current. For example, if the selected note range is C5-F6, pressing "X" will select the C6-F7 range.
There are 4 selectable waveforms:
To choose which waveform you would like to use, simply click on the corresponding button.
If you are unfamiliar with how an ADSR (attack, decay, sustain, release) envelope works, I recommend checking out this article that does a great job explaining what they are. Don't feel bad if it still isn't making sense. Just play around! Adjust the sliders to random positions and see what happens. Try pulling every slider all the way down and then adjust one at a time to see how they relate to one another. The concept of an envelope feels kind of abstract when you are first learning how to use them, but keep at it and you will be able to shape some cool sounds!