Home
Sonora is een datavisualisatie voor jouw muziek. Niet alleen laat het informatie zien van liedjes die je luistert, ook bied het een custom ambient visualisatie voor elk liedje. Centraal staat een vinyl-plaat die reageert op wat je luistert via Spotify. Zodra je een nummer afspeelt, wordt er een custom plaat gegenereerd op basis van de informatie/gegevens en begint de plaat te draaien. De kleuren achter de plaat veranderen op basis van de albumcover, waardoor elke track een eigen sfeer krijgt.
Sonora gebruikt voornamelijk de Spotify Web API. Hierdoor worden je Spotify gegevens niet door Sonora verwerkt, en blijft alles wat betreft jou gegevens in de handen van Spotify zelf. Het resultaat is een soort digitale muziekervaring die informatie en sfeer bied.
De vinyl-plaat is het visuele middelpunt van de visualisatie. Die draait mee met je muziek, krijgt kleur van het album, en verandert subtiel op basis van data zoals populariteit of duratie.
- D3.js | Gebruikt om de visualisatie te manipuleren op basis van input (Spotify API Data)
- Spotify Web API | om luister informatie van de gebruiker/track op te halen
- Svelte(kit) | Javascript Framework om de Single Page Application (SPA) te bouwen
- vibrant.js | Gebruikt om de dominante kleur uit een album cover te halen
als ik meer tijd had gehad, had ik graag ook een playlist functionaliteit erin gebouwd. De listening history zou dan de optie hebben om omgezet te kunnen worden in een playlist
James Kok
Information Design Tech Track 2025–26
GitHub ↗