LyriaBeats

Three Modes

LyriaBeats gives listeners three environments to explore while music plays. Spark uses warm particles, Chill uses cosmic imagery, and Dream uses abstract shapes. Tapping or clicking changes the visual patterns, while the music's energy changes their intensity.

Spark and Chill pair their tracks with prepared lyrics; Dream adds generated poetic phrases. Switching modes restarts the track, making each a separate listening experience. If audio is unavailable, a simulated pulse keeps the visuals and words moving.

Giving Music a Visual and Verbal Rhythm

Using Audio Energy to Shape the Scene

A Web Audio analyser reads frequency data from the playing track and reduces it to an amplitude value. Three.js scenes rendered through React Three Fiber use that value to change properties such as particle size, geometry scale, and light emission. The audio and visual implementation separates this energy signal from the playback clock used for words.

Visual and Language Layers

Matching Words to Playback Position

The lyric overlay selects the latest word whose timestamp has been reached by the audio player. Loudness changes the scene's intensity, but elapsed playback time determines the words. Switching modes resets the track to its beginning, keeping each mode's words and music on the same timeline.

Changing Patterns Without Changing the Track

Taps and clicks change a visual seed used to select patterns within the current scene. That lets the listener vary the arrangement while audio energy continues to control its intensity. When audio cannot play, a simulated pulse supplies amplitude and a local elapsed time clock advances the words.

Team

Built with Betty, Pauline, and Yumeng.

Audio Credits

Spark's track is from SoundHelix under GPL v3, Chill's music is by Lof Cosmos on Pixabay, and Dream's audio is from the MDN Learning Area.