SongGuessr
A Familiar Song, a Few Seconds to Name It
A browser music game built around short clips, quick guesses, and an OPM-first catalogue.
Ian Gabriel Agujitas
SongGuessr turns a small moment of recognition into a browser game: hear a short clip and try to name the song. OPM is central to the project, alongside music from other countries. The catalogue matters as much as the screen—recognition only feels rewarding when the songs belong to the world the player knows.
Design process
The core interaction gives the layout its priorities: listening, choosing an answer, and understanding the result. Difficulty and clip length sit around that loop, and each miss unlocks more of the track.
The Noot character gives the experience a personal layer. Its wardrobe separates head, eyes, outfit, feet, and overall looks, with a large preview for seeing each change. Front, turn, and back controls let the player inspect the character before entering the game. The outfit is saved on the device, so this playful first step can carry into later visits.
Playback is an important constraint. A preview clip is different from a full track, and the beginning of a song is different from its main hook. The implementation separates those modes and supports Spotify Premium playback when connected. Without that connection, preview clips provide a different, limited playback path. The experience has to respect what the available audio can actually do.
Difficulty is another design problem hiding inside the data. A song's familiarity cannot be inferred from a missing popularity value. The catalogue code uses available metadata, including release dates and play counts, and treats missing information as missing. That keeps the selection logic grounded in the catalogue instead of giving unknown tracks an arbitrary appearance of difficulty.
Behind the game
The frontend runs with a Cloudflare Worker, with D1 and R2 supporting the catalogue and media pipeline. Catalogue work is separated from a player's round so the game does not need to rebuild its music library every time someone plays.
The maintenance interface is part of the product work too. Search, playlist imports, previews, and bulk removal make the catalogue manageable as it grows. A polished guessing screen still depends on being able to correct the songs behind it.
The design lesson in this build is that responsiveness includes the content pipeline. Clear playback choices, usable audio, and a catalogue that can be maintained all contribute to the same short interaction: “I know this one.”
