Overview
Accord started in a very real way: I was super hyped with Oasis, trying to learn songs on guitar, and got tired of jumping between Spotify, random lyric sites, and chord tabs.
So I built an app to keep everything in one place: connect Spotify, control playback, and read lyrics with chords together.
The goal was not to build a huge platform. It was to make practice feel smooth.
Product Idea
I wanted a workflow where I could just press play and focus on the guitar.
That meant:
- Playback controls directly in the app.
- Synced lyrics when available.
- Chord lines aligned as best as possible.
- Fast navigation through the song (including jump to lyrics).
Technical Setup
I built it with Next.js, API routes, Supabase, and React Query.
- Spotify is used for auth plus playback state/control.
- Lyrics sync comes from Lrclib.
- Chord and lyric source data comes from a large Kaggle dataset loaded into Supabase.
- React Query handles cache and keeps playback and lyrics queries stable.
Example control call:
await fetch("/api/spotify/control", {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify({ action: "seek", positionMs: seconds * 1000 }),
});
How I Solved Chord Sync
The hard part was sync.
Timed lyrics and chord lines do not match cleanly in real-world data, so I implemented a lightweight pipeline:
- Normalize and clean text (remove section labels, tab noise, instruction-like lines).
- Build candidate lyric/chord lines.
- Match timed lyrics against chord lines using fuzzy similarity.
- Apply a greedy strategy with a bounded window to keep order and reduce jumps.
Core idea:
const synced = syncChords(timedLines, cleanChordLines, {
window: 8,
minScore: 0.55,
});
This gave me a practical sync that works well for playing, while keeping the algorithm simple and debuggable.
Data and Deployment
I downloaded a big Kaggle dataset, loaded it into Supabase, and query it from API routes:
GET /api/songs?artist=...&track=...&artistId=...
GET /api/lyrics?trackId=...&artist=...&track=...
Deployed on Vercel:
https://accord-three-iota.vercel.app/
Current Status
The app is already usable end-to-end: Spotify control, synced lyrics, chord matching, and jump to lyrics.
What is still left is the classic hard part: improving and curating data quality across more songs.