Building a Synthesizer with Web Audio API

Prerequisites

Please make sure you are familiar with Introduction to Web Audio API and Control Signals before starting this topic.

Summary

This topic will guide you through the process of building a synthesizer using the JavaScript Web Audio API. This topic assumes that you have a rough understanding of what each synthesizer component does, but need guidance as to how to implement them using the API.

Lessons

1. Oscillators

• Vocabulary
• .frequency
• .detune
• OscillatorNode
• Waveforms (Sawtooth, Square, Triangle, Sine)

2. LFOs

• Vocabulary
• Low Frequency Oscillator (LFO)
• Tremolo
• Vibrato

3. Filters

• Vocabulary
• BiquadFilterNode
• Cutoff Frequency
• Filter Types (Lowpass, Highpass, Bandpass)
• Filter Q

4. Envelopes

• Vocabulary
• ADSR
• AudioParam.linearRampToValueAtTime()
• AudioParam.setValueCurveAtTime()
• Envelope
• Window

5. Controllers

• Vocabulary
• ASCII
• $(document).keydown()
• $(document).keyup()

6. Putting It All Together