Synth


Link to demo


Synths are hard.

Learning how to sculpt a sound you like without having a physical synthesizer is very tricky: there are a lot of different terminologies and when trying different online synths and you don't always know how to move a value to get a pleasing sound.


I researched a lot, watched a few videos on synthesis and began to better understand how they work. They are fascinating!


Once I understood a bit more of the terms and concepts behind them, I wanted to hear what those effects were on the actual sound, so messing with this synth helped me understand a lot of the key concepts, such as LFOs and Filter Envelopes.


Tone.js has a lot of great demos on whats possible here and also fiddled around with this one because I couldn't wrap my head around a concept to explore.


So I decided to create a tool to simplify this and just focus on playing. The Synth Randomizer takes a Tone.MonoSynth and randomizes almost every parameter for you.


The UI is quite simple and colorful. It is extremely fun to play because you never get the same two sounds.


The controls are simple:

  • press on the Randomize button the generate new parameters for your synth.

  • hover any box to see what the values mean

  • play on your keyboard


Color palette inspired from this instrument and some used this codepen for some the button


You can find a link to the code here



Demo



Make sure to use headphone when trying the demo for yourself.


Link to demo



This was created using jQuery, Tone.js and P5.js


David Azar

New York

Product Engineer

Get my resume

  • github
  • Black Instagram Icon
  • Black LinkedIn Icon