Chord-O-Matic – Upload a Song, Learn Its Chords
Chord-O-Matic is a web app that takes an MP3 and turns it into a clean chord sheet – chords placed above the correct lyric words, with small piano hand-placement diagrams above each chord. Think Ultimate Guitar, but generated automatically from any audio file.
The analysis pipeline runs server-side: upload an MP3 and the backend reads the ID3 tags (artist, title, album art via mutagen), detects chords using librosa’s chroma CQT features matched against 24 chord templates (12 major + 12 minor), fetches synced lyrics from LRCLIB, and aligns chords to words based on timing. The result is a fully rendered chord sheet in the browser within about 30 seconds.
The part I’m most excited about is Practice Mode. Connect a MIDI keyboard via Web MIDI API and the app becomes an interactive chord trainer. A 61-key on-screen piano shows the target chord highlighted in red. Play the correct notes and it flashes green, then advances to the next chord. Two modes: Follow Along (auto-plays each chord, waits for you to match) and Call & Response (plays the chord, you play it back). Strict mode requires exact note matching; relaxed mode allows extra notes.
Audio comes from real Salamander Grand piano samples via the smplr library – every keypress on your MIDI keyboard plays through high-quality sampled piano in the browser. Sustain pedal works too (CC#64). No external synth needed.
Tech
- Backend: Python, FastAPI, librosa, mutagen, SQLite
- Frontend: React 18, TypeScript, Vite, TailwindCSS
- Audio: smplr (Salamander Grand piano samples)
- MIDI: Web MIDI API via webmidi.js, tonal for chord/note resolution
- Chord detection: librosa chroma CQT + template matching (~70-75% accuracy)
- Hosted on GCE (Always Free tier)
Status
Live and functional. Chord detection, sheet rendering, and MIDI practice mode all working. Pending: DNS cutover to chordomatic.com, HTTPS, and improved chord detection accuracy.