Guess The Song (But Cursed)

Name that song, but with a wicked twist - use curses to mess with your opponents' audio. Guess the song as fast as you can to earn points!

Comment

Inspiration

As a team, we enjoy playing “Name that Tune” and similar games. However, we felt that sometimes it lacked the random, hectic fun of the party games that spawn legendary inside jokes and create long-lasting memories. We felt that some of the more memorable games incorporated aspects of sabotaging opponents - so we decided to merge this idea with “Guess the Song” to create our own take on a classic game!

What it does

Guess The Song (But Cursed) is a multiplayer web game that allows users to compete with friends to see who has the best music knowledge. The twist: players who do well will have the opportunity to “curse” opponents. A curse applies some audio effect to the song to make it harder to discern, ranging from distortion to “chopping” the audio. Players increase their score by guessing the answer as fast as possible, and gain the ability to curse others by being the first to guess correctly in a given round.

How we built it

We built the frontend of our game with React and Next.js, in order to facilitate a responsive UI that changes with the state of the game.

In order to handle real-time client-server communication, we chose to use WebSockets. In particular, we built our backend using SocketIO - a nodejs-based WebSocket library used to create a responsive, event-driven backend.

In order to apply all of the curses (audio processing effects), we used the Web Audio API. To access the song previews, we used the Deezer API.

Challenges we ran into

One of the biggest challenges we faced was setting up our project to allow for clean client-server connection. Developing structures to ensure persistent client session connections, handle communication between the server and the client, and other complicated protocol situations all posed challenges that were difficult to overcome in the limited amount of time we had.

In addition, it was difficult to find an easily implementable API to load songs into our browser for playback and manipulation. We ended up choosing Deezer because of its simplicity and accessibility and its built-in support for browser-based audio previews.

Integrating multiple technologies that all communicate and interact with each other can make it difficult to work on a web-based project such as ours; constantly having to switch our frame of mind when developing in different contexts.

Accomplishments that we're proud of

We are proud of having made a complete, functional application, especially when many of us were less experienced with the tech stack that we used. In particular, we are proud that we were able to build a feature-complete experience that can be played through from start to end, and enjoyed with friends. We believe that we met and even surpassed the goals we had set for ourselves, and we are excited for the future of this project.

Through this hackathon we pushed ourselves to learn new tools that have become industry standard.

What we learned

Investing in organized, scalable code is a major asset for any project with a larger codebase. Ensuring that code is modular and reusable is key to saving on development time and making debugging easier. Most importantly, different languages are best suited to specific tasks and applications, so moving forward we will find and leverage the technology that best suits any given task. For example, our codebase contains a mix of Javascript (backend server code) and Typescript (frontend client and socket code). We used Javascript in the backend to develop code swiftly, while Typescript offered more structure, which was needed to keep our frontend code cohesive and organized.

What's next for Guess The Song But Cursed

  • Display messages to show you who/what curse you’ve been afflicted with
  • Ability to create a game from a selection of playlists
  • More cursed filters! (e.g. reversed audio, vocoder effects, white noise overlay)
  • More opportunities to double up curses on opponents
  • User customization for game settings (e.g. number of rounds, curses gained for win)

Built With

Share this project:

Updates