All projects
โ— Live

Name That Song

A five-state game loop around a single audio element.

Sole developer ยท High school

The scoring is trivial. The work is in the state machine: choose a genre, load a round, play, answer, then either advance or finish, with an audio element that has to stop cleanly on every one of those transitions. Almost every bug I hit was an old clip still playing under a new question.

How a round works

Choosing a genre resets the score, sets the round count to five (or fewer, if that genre has fewer tracks), and clears the list of songs already used. Each round picks a track at random from the ones not yet played, then builds four answer buttons: the correct title plus three other titles from the same genre, shuffled so the right answer is not always in the same slot. Keeping the picks inside one genre matters more than it sounds. Offering a Brahms concerto against three hip-hop tracks would make the answer obvious from one second of audio. Guessing locks the buttons, highlights the correct title, stops playback, and shows the answer whether or not you got it right. After the last round the game reports a score out of five and offers a replay or a genre change. The genres in the demo are classical, hip-hop and pop.

Where the audio comes from

The original version played MP3 files served from the project itself. That is fine for a standalone repo and worse for a portfolio site, where it means shipping a folder of copyrighted audio with every deploy. The version here asks a public music API for a short preview clip for each track when a genre is chosen, and falls back to the local file path if the lookup fails. Songs are matched by title alone, so a common title can return the wrong recording, and the round still plays whatever came back. It is a small game and I have left that as a known rough edge rather than building a matching layer around it.

Built with

HTMLCSSJavaScriptReactNext.jsTypeScriptHTML5 Audio