Interactive Chord Finder: A Free Scale and Chord Explorer • bjørn

A while back I started building a small tool to help me figure out which chords belong to a given scale. What began as a weekend experiment turned into InteractiveChordFinder.com — a free, browser-based scale and chord explorer that now covers over 60 scales, a built-in chord sequencer, transposition tools, a chord practice mode with MIDI support, and a growing library of music theory articles. Everything runs client-side with no account required.

In this post I’ll walk through the main features and explain how the different parts fit together.

The Scale & Chord Explorer

The homepage is the core of the site. Pick a root key from the 12 chromatic notes, select a scale or mode, and the interface immediately shows you everything you need to know about that combination.

Piano Keyboard

A two-octave keyboard highlights which notes belong to the current scale. Click any key to hear it — the app uses the Web Audio API, so there’s no plugin or download needed. When you click a chord in the table below, the chord tones light up on the keyboard so you can see the voicing and hear how it sounds.

Step Pattern

Below the keyboard, a row of connected circles shows the interval structure of the selected scale: whole steps, half steps, minor thirds, and so on. There’s a play button that walks through the scale note by note with a glowing LED animation. It’s a simple way to hear the unique character of each scale — a Dorian mode sounds noticeably different from a Phrygian mode, even if you can’t name why yet.

Diatonic Chords

The chord table is the centrepiece. It lists every diatonic chord built from the current scale, from triads (3 notes) up to thirteenths (7 notes). Each cell shows the chord name, Roman numeral, quality label, and individual notes. Click any chord to hear it and see it on the piano.

Toggle cards above the table control which chord extensions are visible. Start with triads and sevenths — those cover most pop, rock, and classical harmony. Turn on ninths through thirteenths when you’re ready for jazz and neo-soul voicings.

Chord Sequencer

This is where exploration turns into composition. Drag chords from the table into the sequencer strip (or tap the “+” button on mobile), set a tempo and time signature, and press play. The piano highlights each chord as it sounds, and you can loop the progression to jam over it.

Each slot has its own duration setting, and you can insert rests for breathing room. If you change the scale, an “Update” button remaps stale chords to the new key — so you can hear how the same I–V–vi–IV progression sounds in D Dorian versus F Lydian.

Transposition

The transpose section handles instrument-based transposition. Select a “from” and “to” instrument group (C concert, B♭, E♭, F, and so on) and the tool shows you the transposed key with full note and chord mapping tables. There are also capo buttons for guitarists — pick a fret and see which open shapes to play. A “Transpose Sequencer” button applies the transposition to your entire chord progression in one click.

PDF Export

Everything can be exported to a PDF: the scale overview with keyboard diagram, the chord table, and the sequencer progression. Choose paper size (A4 or Letter), orientation, colour or B&W, add a title and notes. The PDF is generated entirely in the browser — no server involved — and works offline once the library is cached.

Chord Practice

The newest addition is a chord practice tool for drilling chord recognition under time pressure. It presents diatonic chords one at a time, on a metronome, and you have a set number of beats to identify each chord before the next one appears.

There are two modes:

Scale mode — pick a key and scale, then practise the diatonic chords in that key. Great for learning which chords belong together.
Random Chords mode — generates chords from all 12 keys. Choose how many chords per session (5 to 100) for a broader workout.

Configuration options cover tempo (BPM), time signature, beats per chord, metronome toggle, and display settings. All settings are persisted in localStorage, and the selected key and scale are shared with the homepage — so you can study a scale on the main page and then immediately drill it on the practice page.

MIDI Keyboard Support

If you plug in a USB MIDI keyboard, the practice tool detects it automatically via the Web MIDI API (Chromium browsers). Play the chord on your keyboard and the tool matches your notes against the expected chord in real time. It uses pitch-class matching, so any octave or inversion is accepted. You also hear piano sound as you play, which makes the practice session feel more natural.

At the end of each session, a score summary shows correct, wrong, and skipped counts. A “Practice Missed” button lets you retry only the chords you got wrong — a simple spaced repetition loop that focuses effort where it matters.

Articles and Learning Resources

Beyond the interactive tools, the site has a growing collection of music theory articles that explain the concepts behind what the tools show you. Topics range from beginner fundamentals like understanding the major scale and diatonic chords, through intermediate concepts like modes and chord inversions, to more advanced subjects like secondary dominants and borrowed chords.

Each article links back to the relevant parts of the chord finder, so you can read about a concept and then immediately explore it hands-on. There is also a comprehensive FAQ section covering everything from basic music theory questions to detailed instructions for every feature of the tool.

Technical Stack

For anyone curious about the implementation:

React 19 for the UI, rendered client-side and bundled via Hugo’s built-in esbuild integration
Hugo as the static site generator for articles, FAQ, and page scaffolding
Web Audio API for all sound — triangle wave oscillators with exponential decay, no sample files needed
Web MIDI API for real-time keyboard input in the practice tool
TailwindCSS 4 for template styling (the React components use inline styles to stay self-contained)
Cloudflare Pages for hosting
PWA (Progressive Web App) — the site can be installed to your home screen and works fully offline. A service worker caches all assets and audio on first visit.

The entire app runs in the browser. There’s no backend, no database, no user accounts, and no tracking cookies. Analytics are minimal and privacy-focused.

Try It Out

If you play an instrument, teach music, or just want to understand how scales and chords work, give it a try:

It’s free, works offline once loaded, and everything happens in your browser. Feedback is always welcome.

Newsletter