Lyricala: A Song Typing Game

MIT WebLab 2020 Compeition Award Winner: Most Unique Concept Award

Summary

During the 2020 Independent Activities Period (IAP) at MIT, I participated in WebLab, a class to learn web development using the react framework. The first two weeks are a crash course in different concepts in web development, including introduction to data management, design, and everything in between. The second half of the class was time develop our website and compete for prizes.

When I was deciding on what my website would be, I turned to my friends for inspiration. One type of game that was particularly popular amongst us at the time were the typing games to see how fast you can type. However, I noticed that some people process information more easily by reading, others by listening. The idea that came from this was to have a typing game but you are hearing the words instead of reading them. However, it wouldn't be particularly fun to type the script for a podcast or lecture. I then decided to use song lyrics - making this basically into typing karaoke. The last big design decision came during testing, where I realized that songs are sung at a much faster speed than can be typed for most people, so while playing the game the song's speed also changes to match the typing speed, to match the lyrics that are currently being typed. The game objective then became not to type as fast as you can, but to match the speed of the song.

During this process I learned a lot about website development, design, and general project management. It was a great experience to be able to own something from end to end. I named this game Lyricala, and it won the Most Unique Concept Award in the 2020 WebLab competition.

Features

The website homepage opens up to a homepage, which features a link to the beginners guide and a few songs to choose from. The user can also log in with Google SSO via the top banner and view their stats page.

Homepage

User Stats page

Improvements

If I had more time on this project, I would have focused on two main components: being able to play the game using any song, and spending more time on the algorithm that matches the the typing speed with the song playback speed.

My original goal for song selection was for the user to submit a youtube link for the song and a link to the song lyrics (from Genius or elsewhere), and then read it line by line. However, there were issues with the youtube API with changing the playback speed, which ultimately led me to using the basic curated song selection approach shown above.

For the algorithm, it mostly uses the ratio of how much time in the song has passed in the current line, and how much of the song has been played to figure out a ratio that becomes the playback speed. However, this doesn't take into account typos in the current word, which would be an improvement to the math here. Another improvement would be to collect some basic data and see if a regression could be applied to more systemically figure out a better formula for mapping typing speed to playback speed.

Gameplay

Below is a video featuring some gameplay and some of the user interaction.