Lyric Visualizer

How might we visualize song lyrics dynamically to enhance stage visuals and engage audiences in real time?

Type

Stage Visual Design

Role

Programming

Tool

Javascript

visualizer-cover
visualizer-cover
visualizer-cover

Concept

I created a song lyric visualizer to explore how lyrics could be displayed dynamically and in sync with music, aiming to use it as a stage visual. The focus was on making lyrics visually engaging while experimenting with different technical approaches for real-time synchronization.

Outcome

The visualizer processes time-stamped lyrics and displays them in sync with the song.

Using Lyricstify API, I converted lyrics into time-stamped JSON files as the foundation for the visualizer.

The initial plan was to integrate Spotify's API to allow users to search songs, retrieve track IDs, and fetch synchronized lyrics. However, I faced technical challenges such as CORS errors, API rate limits, and compatibility issues with web app architecture. I tried using local servers, CORS proxies, and backend services, but each had its limitations.

Moving forward, I want to refine the backend infrastructure to handle API restrictions more efficiently and improve the visual design for stage applications. Adding real-time lyric animation synced with music remains the ultimate goal.

Credits

Design / Software / Code

Mickey Oh