Chordle

Chordle is an interactive music theory game that helps users understand how chord progressions shape different feelings in songs, lowering the barrier to understanding, learning, and composing music.

Comment

Inspiration

As I am sure most of us know, music has such an essential roles in our daily lives. For example, its essential for cognitive development, social bonding, reducing stress, releasing dopamine and so much more! However, learning music can often feel intimidating and there is often a higher barrier to entry. Not everyone can afford consistent music lessons, and learning on your own can often feel intimidating. Furthermore, figuring out how to compose music rather than just learn other people's patterns is on another level of difficulty.

Our team wanted to tackle this challenge and make that learning process feel more approachable and interactive. And since music theory is so vast and we only had 24 hours, we decided to break down it into just understanding different chord progressions and how they are used. Instead of reading about chord theory or memorizing diagrams, we thought it would be interesting to let people explore how chords work together in real songs.

Personally, as a beginner in music, I know individual chords, but I don’t always understand how different chords fit together in a progression or why certain combinations sound the way they do. That gap between knowing chords and understanding how they function in a song is something we wanted to help bridge.

So we built Chordle, a small interactive experience where users try to reconstruct chord progressions from real songs while also allowing the user to observe how they are used in the context of the whole song, and understand the general feeling/emotion of the song.

Our goal was to make music theory feel less intimidating and more like something people can explore and play with.

What it does

Chordle is an interactive app that helps users understand how chord progressions shape the emotional tone of music.

Users can listen to a song and then try to arrange the chords into the correct progression. This encourages people to think about how chords flow together instead of just recognizing them individually.

We also categorize songs based on emotional tone using valence and arousal data. Furthermore, songs are grouped into categories like Upbeat, Intense, Somber, and Peaceful, which helps highlight how certain chord patterns tend to appear in different emotional contexts.

The using real songs, we hope that the that users start to build intuition about how music works. Over time they can recognize patterns in chord progressions and begin to understand how those patterns contribute to the overall feeling of a song.

This is especially useful for people who want to eventually compose their own music or think more critically about the songs they listen to.

How we built it

We combined several different tools and datasets to build Chordle.

We used the Spotify API to embed songs so users could listen to the track while working through the chord progression.

For the chord data itself, we used a dataset from Chordonomicon, which maps chord progressions to Spotify track IDs. This dataset was available through repositories on GitHub and Hugging Face.

To connect chord progressions with emotion, we used valence and arousal tags from the spotify API associated with songs. Based on those values we categorized songs into four emotional groups (Upbeat, Intense, Somber, and Peaceful)

On the frontend we used Handlebars to dynamically render the pages, Javascript for the visual functionality and user interaction, and CSS to style our pages.

Challenges we ran into

One challenge included deciding which technologies we wanted to use and how to properly scope our project. Originally we were thinking of using MIDI files and building a drag and drop interface with MIDI editors so users could experiment with composing music themselves. However, after some deliberation, we realized that would be difficult given both our skillset and the limited hackathon timeframe.

Instead, we decided to use the dataset from Chordonomicon, which already parses out chord progression data. From there, we connected those chords to their corresponding Spotify song IDs so users could listen to the real track while working through the progression.

I think the main challenge overall was figuring out how to balance complexity with simplicity. We wanted the user to actually learn something about chord progressions, but we also needed to simplify the experience enough to make the game intuitive and feasible to build in a short amount of time.

Another challenge was working with multiple datasets and getting them to align properly. Chord progression data and Spotify song data are not always stored together, so mapping them to the same tracks took some trial and error. We also had to go through the dataset and filter out songs that didn’t have clearly labeled sections such as chorus or verse, since that would make the experience more confusing for the user.

Since this was built during a hackathon, we also had to balance the scope of our idea with the limited time we had to implement it. Originally we imagined a full gameplay system with levels, user progression, and different learning modes. But once we started building, we had to scale the idea down to a core prototype that still captured the main concept.

Accomplishments that we're proud of

One thing we are really proud of is how we were able to work together as a team and actually turn the idea into a functioning prototype within the hackathon timeframe.

We also learned how to properly collaborate through GitHub, which helped us divide up work and merge our code effectively. We are also glad that we learned how to work with the Spotify API, and figured out how to integrate real songs into our project felt like a big accomplishment.

Another thing we’re proud of is successfully connecting multiple datasets together. Mapping chord progressions from the Chordonomicon dataset to Spotify song IDs and then building an interactive interface around that took a lot of experimentation, but it was really exciting to see everything finally come together.

What we learned

One big takeaway from this project is honestly just how important planning is. With hackathons it’s easy to get excited about big ideas, but breaking those ideas down into something that can realistically be built in 24 hours is a skill on its own.

We also learned a lot about working with APIs and datasets, especially when those datasets don’t perfectly match each other. Debugging those connections and figuring out how to structure the data for our app was a really valuable learning experience.

Beyond the technical side, we also learned how to collaborate quickly as a team, divide tasks effectively, and support each other when parts of the project inevitably got a little chaotic.

What's next for Chordle

If we had more time, there are a lot of directions we would love to take this project.

One idea would be adding a game progression system, where users can move through different levels and gradually learn more complex chord progressions. This would make the experience feel more like a learning journey rather than a single puzzle.

We would also like to make the platform more customizable for different types of learners. For example, beginner users could start with very common chord patterns, while more advanced users could explore more complex progressions across different genres.

Another feature we would love to add is a section where users can experiment with individual chords and hear how they sound together, helping them build a deeper understanding of how chords interact before trying to identify them in full songs.

Ultimately, the goal would be to keep expanding Chordle into something that makes learning music theory more approachable, interactive, and fun.

We hope tools like this can help lower the barrier to learning music theory and encourage more people to explore composing and creating their own music.

Share this project:

Updates