Beatpoints

Beatpoints plays music from Spotify alongside a 3D scene that reacts to the song. The idea was to use the audio-analysis data Spotify’s API used to provide (beats, subdivisions, sections, loudness and energy) so the animation followed the actual structure of the track, not just its volume.

• Login and playback: OAuth with Spotify through a custom Express server that exchanges and refreshes tokens. Playback uses the Web Playback SDK, which is why a Premium account is required.
• Visualisation: two point clouds (2,000 and 3,200 points) with custom GLSL shaders on React Three Fiber. One pulses with the beats and the other with the tatums; each pulse’s amplitude follows the section’s loudness and its duration the song’s energy.
• Sync: pulses are animated with Tween.js and scheduled against the playback time, compensating for pauses.
• Lyrics: karaoke-style synced lyrics from a custom API.

It was a full end-to-end project: client, server and lyrics API. In November 2024 Spotify stopped offering the audio-analysis endpoints to apps in development mode, and the whole visualisation depends on them, so the online version no longer works as shown in the video. The project remains as a record of the work.