Learning the Circle of Fifths by Touch

The wall of memorizing key signatures

A while back I built four browser tools for piano practice. One of them, Scale Reference, was a lookup table for “which sharps are in this key again?” Handy — but every lookup still leaves you recalling the signature.

Memorizing sharps and flats one key at a time falls apart as pieces get harder. You can drill “G major has one sharp, D major has two…” and still freeze when the score is in front of you. The real problem is that you can’t see how the keys relate to each other.

The one picture that shows those relationships is the circle of fifths. Move clockwise a fifth at a time and you add a sharp; counterclockwise, a flat. Adjacent keys are closely related and show up constantly in modulation. The major on the outer ring and its relative minor on the inner ring share the same key signature.

I wanted this “map of relationships” to be something you don’t just look at, but can touch and hear.

What I built

Circle of Fifths is an interactive wheel that runs in the browser. Click any key on the ring and everything about that key opens at once.

The wheel: major outside, relative minor inside

C / Am at the top, clockwise by fifths. The outer ring is major, the inner ring the relative minor. The selected key is highlighted, and its two neighbors — its closely related keys — get a lighter tint. You can see that “going up a fifth” means rotating one step clockwise.

Information that opens on click

Selecting a key fills the panel with:

• Key signature — the type and count, like ♯×2 or ♭×3
• Relative key — relative minor in major mode, relative major in minor mode
• Neighbors (a fifth away) — the two adjacent keys, natural modulation targets
• Keyboard scale — the scale tones highlighted on a one-octave keyboard (the root outlined)
• Diatonic chords — all seven (I, ii, iii, IV, V, vi, vii°) labeled by degree

And the moment you select it, the tonic chord plays. You confirm what the key looks like and how it sounds at the same time.

Major / minor toggle

Flip the radio button and the highlight swaps between the outer and inner rings, and the diatonic chords switch to the minor set (i, ii°, III, iv, v, VI, VII). The natural minor scale is the relative major’s scale started from its sixth degree (vi), so internally it’s the same scale, rotated.

Progression demos

This is the heart of the tool, I think. Common chord progressions play back with a single button — each chord sounds at 0.7-second intervals while the matching chord in the diatonic table lights up.

• Major: Canon (I - V - vi - iii - IV - I - IV - V), the “royal road” (IV - V - iii - vi), the Komuro progression (vi - IV - V - I), four chords (I - V - vi - IV)
• Minor: a standard minor line (i - VI - III - VII), Andalusian (i - VII - VI - v), a 6-4-1-5 minor

Heard as a sequence of degrees, a progression reveals itself as the same shape regardless of key. Play the Canon in C, switch to G, hit the same button — and you hear that the key changed but the progression didn’t.

Sound on/off, play scale

There’s a toggle for when you don’t want sound, and a “play scale” button that walks up the selected key’s scale one note at a time. The audio is a Web Audio triangle wave — no external samples, all in the browser.

How it differs from the four tools

The earlier four tools — metronome, sight-reading, lookup table, timer — each addressed a separate task. The circle of fifths has a different character: it’s for tying together keys, scales, chords, and progressions, things we tend to memorize separately, on one wheel.

If Scale Reference is a tool for looking things up, Circle of Fifths is a tool for grasping relationships. Instead of memorizing, you internalize how keys connect through the shape of the wheel and the sound of the chords. I wrote about the theory in the history-of-music-theory series too, but making it something you can touch and play lands differently.

Since it’s just a browser tab away, you can use it between practice runs — “what are the closely related keys of today’s piece?” — and check in a second.