Synthesizer (2013-2014)

HTML5 synthesizer I made for a physics research project in high school


I wanted to learn how synthesizers work, so I made a simple synth using the HTML5 Web Audio API

Languages / Libraries:

  • JavaScript
  • Web Audio API


  • Subtractive Synthesis

Subtractive Synthesizers

Subtractive synthesizers are the main type of synthesizer. They start with one or more pure sound waves, and get passed through several modules that remove parts of the sound wave in order to reshape the sound into a unique sound.

A synthesizer has many parts that can be connected in a plethora of ways. Here are the basics.


An oscillator is a component that simply generates a pure sound wave.

Example pure sound waves:

  • Sine Wave - pure, simple sound, similar to a flute
  • Pulse/Square Wave - electronic sound, reminiscent of video games
  • Triangle Wave - somewhere between sine and square wave
  • Sawtooth Wave - has a buzzy, brassy sound


Filters cut out parts of a sound wave, giving it a more rounder sound.


Amplifiers simply boost the volume of the sound wave. The amplifier control allows you to compensate for loss of volume due to filtering.


ADSR (Attack, Decay, Sustain, Release) envelopes are controls that shape a note’s volume over time.


  • Attack Time - The time it takes to go from silence to peak volume
  • Decay Time - The time it takes to go from peak volume to sustain level
  • Sustain Level - The volume at which the note plays while the note is held.
  • Release time - the time it takes to go from the sustain level to silence.


Low Frequency Oscillators are simply additional oscillator that play at very low frequencies. This signal is used to make the volume of a note “wobble” as it plays. LFOs are helpful when making bass patches.


  • Working oscillators, filters, ADSR envelopes, and

Needed Improvements:

  • Use Bootstrap for style
  • Use AngularJS for page controls