SynthClear

How does a synthesizer work?
A synthesizer builds sound from nothing but electricity: oscillators hum, a filter carves, an envelope shapes every note. Play a real synth in your browser, take a Minimoog-style keyboard apart in 3D, and see why two sine waves can ring like a bell.

▶ Play with it  ·  Read the 60-second explainer  ·  Watch the 40-second video

1. Oscillators, a filter, an amplifier. A classic synth has three main parts in a row. Oscillators make a buzzing wave, a filter shapes its tone, and an amplifier sets how loud it is. The keyboard only sends two signals: which note, and when a key is down.
2. Every tone is a stack of sine waves. Any repeating wave is a sum of sine waves at 1, 2, 3… times its frequency: its harmonics. A sawtooth has every harmonic at 1/n, a square only the odd ones at 1/n, and a triangle the odd ones at 1/n², which is why it sounds so soft.
3. Subtractive: start bright, carve away. A lowpass filter lets low frequencies through and cuts the high harmonics. Moog's ladder filter falls 24 dB per octave. Resonance boosts the harmonics right at the cutoff, and sweeping the cutoff makes the classic wah.
4. Attack, decay, sustain, release. An envelope gives each note a shape in time. Attack is the rise, decay the fall to the sustain level, which holds while the key is down, and release the fade after you let go. Short and sharp is a pluck; slow and long is a pad.
5. FM: one wave wobbles another. John Chowning found at Stanford that wobbling a sine wave's frequency very fast adds sidebands at the carrier plus and minus multiples of the modulator. The ratio places them and the index sets how many. Yamaha's DX7 made it famous in 1983.
6. MIDI: messages, not sound. Since 1983, instruments talk in MIDI: three bytes such as note on, which note, and how hard, sent at 31,250 bits a second. A step sequencer sends them on time, the idea behind drum machines like the Roland TR-808 and every DAW today.

130 years from a 200-ton music machine in New York to synthesizers that live inside a laptop.

• 1906 · A 200-ton music machine (Thaddeus Cahill, Holyoke, Massachusetts and New York City, USA)
• 1920 · An instrument you never touch (Leon Theremin (Lev Termen), Petrograd (today St Petersburg), Russia)
• 1964 · Moog's modules take the stage (Robert Moog, with composer Herb Deutsch, Trumansburg and New York City, USA)
• 1968 · Switched-On Bach (Wendy Carlos, with producer Rachel Elkind, New York City, USA)
• 1979 · The Fairlight and the birth of sampling (Peter Vogel and Kim Ryrie (Fairlight), Sydney, Australia)
• 1980 · The TR-808 drum machine (Roland (Ikutaro Kakehashi, Tadao Kikumoto), Japan)
• 1982 · Ten Ragas to a Disco Beat (Charanjit Singh, Bombay (today Mumbai), India)
• 1983 · MIDI: one language for all instruments (Dave Smith (Sequential Circuits) and Ikutaro Kakehashi (Roland), NAMM show, Anaheim, California, USA)

The full story, with 30 moments, charts, people and 61 sources: glassbox.how/e/synthclear/history. The data lives in history.json.

Made with the Glassbox studio from this box's storyboard (window.glassbox.director). Free to reuse under CC BY 4.0.

This box has no accounts and no ads, and it ships its own fonts and libraries. When you run it yourself it sends nothing anywhere. On glassbox.how, the site's /bar.js also loads Glassbox's analytics: Google Analytics to count visits (it asks first in the EU, UK and Switzerland, and stays off when your browser sends Global Privacy Control or Do Not Track) and ClickTrust to detect bots.

It remembers a few things in your own browser only, and never sends them anywhere:

Exactly what each one sees is at glassbox.how/privacy.

• Code: MIT. Use it, change it, ship it.
• Explanations, text, images and videos (glassbox.json, glassbox/): CC BY 4.0. Credit “Glassbox, glassbox.how/e/synthclear”.
• Third-party parts keep their own licences: three.js (MIT), Geist, Instrument Serif (SIL OFL 1.1).
• The Glassbox name and logo aren't covered by either licence. See the terms.

Found a mistake? Open an issue. Corrections happen in public.

It's plain HTML, CSS and JavaScript. No build step and no dependencies. Run locally, it contacts no other website.

python3 -m http.server 8000

Three.js and the fonts ship in vendor/ and fonts/, so it also works offline.

Then open http://localhost:8000.