Word Piano Interactive Musical Website

I came up with an idea to create a fun, interactive website inspired by Magic Piano, a game from my childhood that I loved playing growing up. But instead of just playing melodies, I wanted to transform song lyrics into a playable instrument, turning words into music you could perform with your keyboard. For this, I chose my favorite song, "Spice Girl" by Aminé from the 2017 Good for You album. The song's energetic rhythm and fun vocal sounds felt perfect for an interactive experience. The core idea was to map individual words and syllables from the song to piano keys, so pressing a key would trigger both the audio clip and display the corresponding text on screen. Each of the 12 chromatic notes (C through B, including sharps) became a container for specific vocal moments from the track. I built the piano with three colored octaves on screen: blue, yellow, and pink, each representing a different pitch range. The yellow octave plays the original audio samples, while blue shifts the pitch down and pink shifts it up, creating harmonic variations, changing the tempo. On mobile, the interface adapts to show a single octave with +1/-1 buttons to navigate between pitch levels. When specific word sequences are played (for example, "spice" followed by "girl"), an emoji rain falls down the screen as a playful easter egg. This playful instrument on the web lets anyone perform Spice Girl in their own way, improvising rhythms, creating new patterns, and discovering unexpected combinations of words and melodies.