Learning the Circle of Fifths with a MIDI Controller
Intended Audience: Music Students, Hobbyist Musicians
Estimated Reading Time: 10 minutes
Try JSMidiCircle now — connect a MIDI controller and follow along as you read.
You're staring at a diagram that looks like a clock face, but instead of numbers, there are letter names arranged in a seemingly arbitrary pattern. C at the top, then G, D, A... Your teacher says this is the most important diagram in music theory. Your brain says it's hieroglyphs.
The Circle of Fifths is one of those concepts that separates casual players from musicians who truly understand harmony. It explains why certain chords sound good together, why songs in the key of G have one sharp, and why jazz musicians can improvise through complex chord changes. But learning it from a static diagram feels like memorizing a phone book.
What if you could play the circle and watch it respond?
The Learning Problem
Traditional music theory education has a disconnect: you learn concepts on paper, then try to apply them at the instrument. The Circle of Fifths suffers particularly from this gap because:
- It's abstract — The relationship between C and G being "a fifth apart" doesn't click until you hear and feel it
- It's dense — Major keys, relative minors, key signatures, chord progressions — all packed into one diagram
- It's static — You can't experiment with a printed page
Most students memorize it through brute force, then gradually internalize it over years of playing. But what if the learning could be immediate and tactile?
Interactive Learning with WebMIDI
Modern browsers support WebMIDI, an API that lets web applications communicate directly with MIDI controllers. This means a simple web page can respond to your keyboard in real-time — no plugins, no software installation, just plug in and play.
RasmusMathiesen created JSMidiCircle, an elegant proof of concept: a Circle of Fifths visualization that lights up as you play notes on a MIDI controller. Press C, E, and G, and watch three notes illuminate around the circle. The visual feedback creates an immediate connection between what your fingers do and what the theory describes.
But the original was just the beginning.
Building an Educational Tool
I forked JSMidiCircle with a goal: transform Rasmus's clever visualization into a fuller learning tool. Over a series of development sessions, the application evolved significantly.
Chord Detection and Display
The first major addition was real-time chord detection. Using the tonal.js library, the app now identifies what chord you're playing and displays it in the center of the circle. Play C-E-G and see "C major" appear. Add a B♭ and watch it change to "C dominant seventh."
More importantly, the app shows inversions. Play E-G-C (a C major chord with E in the bass) and it displays "C major — 1st inversion (3rd in bass)." This teaches a concept that confuses many students: the same three notes can be the same chord even when rearranged.
The root note highlights in green while other chord tones appear grey. This visual distinction reinforces which note is the foundation of the chord — crucial for understanding chord progressions and bass lines.
Major Triad Tooltips
Hover over any note circle and a tooltip appears showing that note's major triad formula. Hover over A and see "A C♯ E — A major." This transforms the visualization into a reference tool for learning chord construction.
The formulas use proper accidentals (sharps and flats) and a toggle lets you switch between sharp and flat enharmonic spellings — because D♯ and E♭ are the same pitch, but different musical contexts call for different names.
The Inner Ring: Relative Minors
The Circle of Fifths traditionally shows both major and minor keys. The outer ring displays major keys while an inner ring shows their relative minors — the minor key that shares the same key signature.
The enhanced JSMidiCircle now renders this inner ring dynamically. In Circle of Fifths mode, A minor appears inside C major (they share no sharps or flats). E minor nests inside G major (one sharp each). Toggle to Chromatic mode and the inner ring shows parallel minors instead — C minor inside C major, sharing the same root but different qualities.
When you play a minor chord, the inner ring highlights. Play a major chord, the outer ring responds. The visual feedback teaches the major/minor relationship through direct experience.
Audio Synthesis
Not every MIDI controller makes sound — some are just controllers. The app now includes optional audio synthesis: toggle it on and hear sine wave tones for each note you press. The attack and release envelopes are carefully tuned to avoid clicks, and the chord root circle subtly vibrates while active, as if the sound itself is causing it to resonate.
Quality of Life Improvements
Beyond major features, dozens of refinements make the tool more usable:
- Helpful prompts — When you press one or two notes, the display shows "(add more notes)" guiding you toward complete chords
- Layout toggle — Switch between Circle of Fifths arrangement (harmonically related notes adjacent) and Chromatic arrangement (matching piano key order)
- Startup verification — All 48 chord formulas (major and minor, sharps and flats) are verified against tonal.js on every page load, with results in the browser console
- Responsive styling — Note labels use tight letter-spacing so "A♯m" reads as a unit, not "A ♯ m"
The Technical Journey
The codebase evolved from a single monolithic JavaScript file into a modular architecture:
src/
├── main.js # Entry point
├── constants.js # Note names, triad formulas, ring configuration
├── state.js # Shared application state
├── dom.js # DOM element caching and ring setup
├── geometry.js # Circle positioning calculations
├── layout.js # Toggle handlers and tooltips
├── chordDetection.js # Chord identification logic
├── midiHandler.js # WebMIDI event processing
├── audio.js # Web Audio API synthesis
├── svgGenerator.js # Dynamic SVG element creation
└── chordTest.js # Formula verification
A configuration-driven design means adding a third ring (for diminished chords, perhaps?) would require minimal code changes — just extend the RING_CONFIG object and the system handles the rest.
The inner minor ring is generated programmatically at runtime rather than hardcoded in HTML. This keeps the markup clean and demonstrates how SVG can be manipulated dynamically through JavaScript.
Try It Yourself
The enhanced JSMidiCircle is deployed at master.d3rrzbtjnmjgv5.amplifyapp.com and the source code is available on GitHub.
You'll need:
- A Chromium-based browser (Chrome, Edge, Brave) — WebMIDI isn't supported in Firefox or Safari
- A MIDI controller connected via USB
Plug in your controller, load the page, and start playing. Watch the circle respond. Experiment with chord voicings. Toggle between Circle of Fifths and Chromatic layouts. Hover over notes to learn their triads.
The Circle of Fifths stops being an abstract diagram when you can play it.
Lessons
Interactive tools teach what static diagrams cannot. The immediate feedback loop between playing a chord and seeing it named creates understanding that hours of textbook study might not achieve.
Open source builds on itself. RasmusMathiesen's original visualization was simple but clever. By forking and extending it, we created something more capable while preserving attribution to the original work.
Music theory is better experienced than memorized. The Circle of Fifths encodes deep relationships between keys and chords. Playing through those relationships — watching relative minors light up, seeing inversions identified, hearing the tones — makes the theory tangible.
Credits: Original JSMidiCircle visualization by RasmusMathiesen. Chord detection powered by tonal.js.