Sonora is a web app that visualizes your Spotify listening session as a spinning vinyl record. Every track gets its own "custom vinyl" shaped and styled by the actual data behind the song.
How the vinyl maps to data:
- Size of the record → track popularity score
- Rotation speed → track duration or popularity
- Number of grooves → release year (older = more grooves)
- Color & glow → extracted from the album cover via
node-vibrant
The vinyl only spins when a track is actually playing, it syncs live with your Spotify session via the Spotify API (OAuth). Alongside the vinyl, a treemap visualization shows the distribution of genres and artists across your session.
Built with: SvelteKit, Spotify Web API and node-vibrant
If I had more time for the project;
- I'd have liked to have a textual summary of your listening session. Autogenerated via templating it could've been something like: "Your session consisted mostly of [genre], with a sudden switch to [genre] at [time]"
gallery
