Spotify stats is a fun interactive way to view your top songs! We use the THREEjs 3d framework to visualize your top songs.
If you'd like to apply to use the website feel free to email me at [email protected] and I'll gladly add you to the user list. Spotify has yet to give me an extension request so I have to add you to the developer list manually.
To go to the page click here!
I used the spotiy web API to request the top songs from each user who is logged on. Spotify allows me to access your top songs over different time periods but for the current build of the website, it should be your top songs for the last 12 months. Using threejs and the Spotify API, an album cover is made for each song using just a box geometry. They are loaded into a grid format along another wall object and below there is a floor object that is made. All three of these are loaded in the same way but the wall and floor don't have a texture assigned to them. There is also a glb model file of a 12" vinyl record that is loaded bellow the camera that pops up when an album is clicked on. Also loaded with this is a small circle geometry with the album cover loaded onto it to simulate that every album has its own record when there are only two in the scene. The reason there are two records is for the cases where the user has one album selected and immediately clicks on a different album.
The biggest challenge for this project was working on the logic for the scenario when a user has an album selected and, without deselecting it, clicks on a different album in the background. Managing which object was selected and switching them was not too bad but then including the logic for switching between the records and moving the labels took some time to figure out.
A big letdown for the project was the fact that I was unable to allow users to hear a short audio clip of the song they had clicked on due to Spotify not allowing third parties to gain access to the audio files. This and the fact that they will most likely not enable the extension access so I most likely will not be able to let anyone use the website. This is unless I go through and manually add them to the user list.
- The ability to switch between albums and artists as well as the time range of the user's top artists and albums.
- Different wall and floor textures.
- More fun lighting options to fully utilize the 3d space.
- Dynamic camera moves to help immerse users
The only known bug as of 12/22/2024 is when a user clicks through too many albums without deselecting, the label will get stuck and won't change. However, this can be fixed by clicking on the album with the bugged label and deselecting the album.
I, Riley Choquette, made most of the website myself.
Used the spotiy web API handbook to help with a lot of the API calls.
Used a number of the threejs examples to help learn and come up with ideas for some of the environment and lighting.
The 12" vinyl model.
And Lastly I used chat gpt to help with some of the debugging and webhook aspects of the website.