Web Synthesizer

The Keyboard, Mapped to Yours

The on-screen keyboard mirrors a one-octave slice of a piano. White keys play natural notes; the black keys above them play sharps and flats. You can click the keys with a mouse or trigger them from your computer keyboard:

• White keys (C–B): A S D F G H J
• Black keys: W E T Y U for C#, D#, F#, G#, A#
• Octave buttons shift the played range up or down by one octave.

The layout is borrowed from old tracker software and is intentional: the natural notes form a row your fingers can rest on, while the sharps and flats sit on the row above — just like the physical piano keyboard.

What a Synthesizer Actually Does

A synthesizer generates sound from scratch, rather than playing back a recording. The simplest synthesizer has three parts:

• Oscillator — the engine. It produces a continuous wave at the pitch you ask for. Different wave shapes (sine, sawtooth, square, triangle) sound different even at the same pitch.
• Envelope — the shape over time. ADSR stands for Attack (how fast the note fades in), Decay (the initial drop), Sustain (the steady level while you hold the key), and Release (how it fades when you let go). Adjusting these turns the same oscillator into a plucked guitar, a soft pad, a sharp bass, or a long string.
• Effects — reverb, delay, chorus, distortion. These shape the sound after the oscillator has already made it. Reverb is the most useful single effect for making a synth sound less sterile.

What to Practice on It

Most music students use a synthesizer for one of four reasons. All of them are valid here:

1. Hear what you read. When you study a chord or scale, play it. Reading without sound is like reading a recipe without eating — it doesn't land.
2. Find a starting note. Singing exercises and ear training both benefit from a reliable reference pitch. Sing the note before you play it, then check yourself.
3. Build piano-keyboard mental geometry. Even guitarists and singers benefit from knowing where notes live on a keyboard, because the keyboard layout makes intervals, scales, and chord shapes visually obvious.
4. Explore sound design. Play with the ADSR envelope and effects. Make a snappy bass, then a slow pad. Notice how the same notes feel different.

Tips

• If you don't hear sound, click the keyboard once. Browsers require a user gesture before they will play audio — this is a security feature, not a bug.
• Use the synth alongside the Pitch Identification game: when you miss a pitch, play it on the synth and listen until your ear settles.
• Practice chord shapes by holding three or four keys at once. Try C–E–G (a C major triad), then move the whole shape up by two keys for D minor.
• Headphones reveal far more detail than laptop speakers. They are worth it for ear training.

Learn More