6th grade year. I remember playing a typing game with my friends during class. Remembering this experience, I wanted to create something similar but with a musical twist 🎶

What it does

Typing Karaoke displays a section of a popular song that the user types. When the 30 second timer is up, WPM (word per minute) is calculated. A snippet of the actual song plays as well.

Challenges I ran into

The most notable challenge was having to redo most of the program after realizing that my approach had limitations. It was also difficult to color code the lyrics in relation to the user input.

Top 3 things I learned

  1. How to split content into individual elements
  2. Dynamically add/ remove class names
  3. Embedding visual content through iframe

What's next for Typing Karaoke

  • Larger lyrics selection
  • Play the corresponding music in sync with words typed

Built With

Share this project: