Karachordy

Inspiration

Have you ever tried to play along to a song, only to realise that you can't - because you don’t know the chords? As the soul of the song, chords are vital to bringing what you play to life - but to find them you usually have to either juggle through the video, or search for the chords yourself. But what if the chords aren’t anywhere to be found online? This can be a really tedious process, which can ruin the fun of your practice sessions.

So… we made Karachordy! Paste a YouTube link or search for a song, wait for a bit, and get synchronised chord cues that move with the song so you can stay in the music instead of hunting for the right chord chart.

What it does

Karachordy is a web app that takes a YouTube song and analyses its chords; allowing musicians to play along to their favourite songs with synced chords in real time.

Our features:

Users can search or paste the URL of any YouTube song they want to play along to. Once the song has been processed, a playback workspace is opened with the YouTube video and synced chords side by side.
The workspace follows live chord changes as the song plays, and the user can start playing from any point in the track. The user can also change the playback speed of the song if they wish.
The user can switch between piano and guitar chord diagrams, providing support for piano and guitar players who may not be familiar with how to play the chords.
Users can switch between literal chord names (eg C:maj) and roman numerals (II V I) - with any key changes being presented to the user.
Previously processed songs are saved, allowing users to revisit them quickly.

How we built it:

After we decided on a vision that would contribute to our personal daily lives as musicians, we decided on a quirky but realistic name: Karachordy, merging through karaoke and chords. Music is a universal language, but the barrier to entry shouldn't require years of ear training. Karachordy merges the spontaneous joy of karaoke with the structural power of chords.

Frontend:

🎵 Next.js + TypeScript frontend for the interactive and modular UI/UX.

🎵 Styled with TailwindCSS and enhanced with Pencil.

Backend:

🎵 Robust Fastify API for request handling, processing orchestration, rate limiting and API routes. Allows for guest-focused usage, providing users ownership of their requests and history without a need for an account.

🎵 Prisma + PostgreSQL to store song requests, chord timelines, chord events, and logs. Ensures no unnecessary runs of the chord detector and instantly serves the cached timeline to the user.

AI Integration:

🎵 To avoid third-party rate limits and processing time, Karachordy utilises a self-hosted ChordMini API service with a pre-trained model via a Docker container. Allows for maintainability and scalability.

Audio Handling:

🎵 Python pipeline that leverages yt-dlp to fetch and refine audio from YouTube, passing it through the ChordMini API.

🎵 Resulting chord detection output is offset to account for external factors, then parsed through into structured timeline events and stored into the database for future usage.

🎵 YouTube IFrame Player API to keep playback and chord highlighting synchronized.

Deployment:

🎵 Deployment with the frontend on Vercel and the backend/processing stack on a secure loopback environment on a DigitalOcean VPS.

Challenges we ran into

One of the biggest challenges was reliability across the full pipeline. Getting from a YouTube URL to usable, synchronized chord data meant coordinating with YouTube's official API and their restrictions, mp3 download, Python processing, a self-hosted ChordMini API, database storage, and frontend playback. Being able to learn how to self-host from scratch was a challenge but was a necessity due to severe limitations on calls/reqeuests, and other times API's would behave differently than ways the system expected, due to lack of documentation. YouTube tends to crack down on downloading content, which was hard to work around.

Chord synchronisation was tricky too: even small timing offsets between the YouTube player and the displayed chords make the experience feel wrong, so we had to tune the playback timing carefully.

Another challenge was making the output feel helpful for musicians rather than just technically correct. That meant handling inconsistent chord labels, improving diagram coverage, and adding options like roman numeral display and instrument switching.

Accomplishments that we're proud of

As first-time hackathoners, we were able to turn a genuine problem we had, turned it into a theory, and turned a theory turned into a working prototype. We’re proud that we were able to make something that is genuinely useful to not just us, but musicians around the world. You can just paste a link or search, and just like that, playing along has never been easier.

We’re also proud of our UI design, and the chord diagrams which attempt to make Karachordy as accessible as possible to musicians (particularly piano and guitar players). Furthermore, the chords are correct and in sync with most videos.

Teamwise, we’re also proud of how we all collaborated as a team - and how we were all able to learn, and build something great together, as well how how we dealt with problems together, both technical and non-technical.

What we learned

We also learned a lot about building under hackathon pressure: some of us have had practical project experience while others haven't, so being able to collaborate as a group for the first time and in a pressured environment taught us a lot about how to work as a team and grow together.

Musically, we learned that music-tech products live or die on feel. A model can return technically reasonable chord labels, but if the timing is slightly off or the interface is hard to follow in real time, it really ruins the experience.

Technically, learning how to self-host and work through frontend and backend concerns and how to recover and debug quickly when things don’t work was a great learning experience. On top of that, we got deeper experience with YouTube integration, tools like DigitalOcean, Python/Node interoperability, and designing interfaces specifically for live practice instead of static browsing.

What's next for Karachordy

Next, we want to make Karachordy even more useful for real musicians:

Improve chord accuracy and handling of tempo changes
Include support for other instruments
Allow users to queue songs so their immersion isn’t interrupted when a song ends.
Media player to introduce ways to add chord displays on videos for production.

Longer term, we want Karachordy to become a go-to practice companion for learning any song you want.