Perfect pitch—the ability to identify any musical note without a reference—is often considered a rare gift you're born with. But research suggests it can be developed, especially with consistent training.
The problem is that traditional ear training is boring. Flash cards, repetitive drills, no feedback on progress. I wanted to build something that made the practice engaging enough that people would actually do it.
The Circular Pitch Wheel
The centerpiece of the interface is a circular arrangement of the 12 chromatic notes. It's inspired by the circle of fifths, but arranged chromatically—each note is 30 degrees apart, starting from C at the top.
Why circular? A few reasons:
- • It's visually distinct from a piano keyboard (which carries existing biases)
- • All notes are equidistant from center, implying equal importance
- • It reinforces the cyclical nature of pitch classes
- • It just looks cool
The center of the wheel displays the current selection or correct answer, creating a clear focal point. Circular buttons around the edge respond to hover and selection with subtle scale and color changes.
The Core Loop
Every good game has a core loop: action, feedback, reward, repeat. For ear training, that looks like:
- 1. Play a random note
- 2. Player clicks on the pitch wheel
- 3. Immediate visual and audio feedback
- 4. Score and streak update
- 5. Next note
On a correct answer, the selected button scales up and fills. On incorrect, the correct answer is highlighted while your guess fades, and the correct note plays so you can hear the difference.
Generating Accurate Pitches
For ear training to work, the pitches have to be accurate. I'm using the Web Audio API's oscillator, calculating frequencies based on A4 = 440Hz:
const NOTE_FREQUENCIES = {
"C": 261.63, "C#": 277.18, "D": 293.66, ...
};
function getFrequency(note, octave) {
const baseFreq = NOTE_FREQUENCIES[note];
return baseFreq * Math.pow(2, octave - 4);
}Each note is a pure sine wave with a smooth 2-second envelope. Clean, no harmonics, mathematically precise. This isolates pitch recognition from timbre recognition.
Difficulty Levels
Starting with all 12 chromatic notes would be overwhelming for beginners. I structured the difficulty to build gradually:
- • Easy: White keys only (C D E F G A B)
- • Medium: All 12 notes in a single octave
- • Hard: All 12 notes across 3 octaves
The jump from 7 notes to 12 is significant. Once you add the black keys, you need to hear the difference between C and C#, between F and F#. That's where real pitch recognition starts.
Streaks and Motivation
Points alone aren't meaningful. I track streaks—consecutive correct answers. Streaks create tension. You don't want to break a streak, so you listen more carefully.
The stats bar shows score, round, current streak, and accuracy percentage. Everything you need to gauge your progress at a glance.
Hardware-Inspired Design
The interface is designed to feel like a physical instrument. A bordered enclosure gives it weight. The volume knob uses drag-to-adjust interaction, just like the ACID-303 synth. Keyboard shortcuts let you replay notes (Space) or advance rounds (Enter) without touching the mouse.
The footer shows context-sensitive hints—different shortcuts depending on whether you're listening, answering, or viewing results.
Does It Work?
Developing true perfect pitch takes years. But relative pitch—the ability to identify notes in context—improves much faster. Even after a few sessions, most people notice improvement.
The key is consistency. Five minutes a day beats an hour once a week. That's why I focused on making the experience smooth and friction-free. Open the page, start playing, no signup required.
Try it at /projects/tone-tester. Start with easy mode, work your way up. Your ears are smarter than you think.