Songspace for Spotify

Note: this tool doesn't work anymore because of changes to Spotify's API

They used to allow apps in development mode to be used by anyone. Now you have to register all users' email addresses before it'll work.

This is a quick something I wrote to visualise your saved Spotify songs. Spotify have come up with a bunch of metrics to measure songs (things like acousticness, energy and instrumentalness) and devised algorithms to get a value for them for each song in their library. This number roughly corresponds to how much that feature applies to that song, for example a death metal song may have 0.004 acousticness and 0.9 energy (unless there is acoustic guitar death metal that I am unaware of). For some features the number plays a different role, for example tempo will give BPM. Spotify have very kindly made this data accessible to the public through their Audio Analysis API, which I have made use of here. Their documentation gives a full list of features available.

I use 8 features of each song to make this graph. There's a problem here as there's no possible way to plot these directly; we can't plot an 8-dimensional graph! Instead, I use a dimensionality reduction technique called t-SNE which takes in the features for each song (8 numbers) and returns 2 numbers, which can be easily plotted as (x,y) coordinates.

Usage

Click the button below to log in with Spotify. This will redirect you to a Spotify login page which will clearly detail the type of access this app is requesting. All of the processing is done directly in your browser; this is a static site so no data can be collected about your account or your music.

Once you have logged in the graph will be created. This may take a little time; please be patient!

Once the graph has loaded you will be able to pan and zoom in/out. Hovering over a point will show you which song it represents. At the top right of the graph you can search for specific songs — matches will be highlighted in red.

It appears that you are on a mobile device! You may find that loading is slow and the graph is squashed. I recommend that you use a desktop or laptop to use this feature, although it will still work on your phone.


Choose to plot the graph with 1) All saved songs or 2) most recently saved.

Loading progress: Waiting...


Caveats

I haven't implemented any backoff for API throttling, so if you have a large library it's possible that you'll hit the limit. There's also no cacheing, so if many graphs are plotted in a short time you'll probably hit the limit.

There's also no guarantee that the graph has any meaning at all! In my testing it seems that there's some local similarity but it's not immediately obvious what global structure is going on.

Future

Some interesting developments might be allowing choice of features or plotting tracks from multiple playlists, using colour to highlight which a song comes from.

Credits

t-SNE implementation by Andrej Karpathy: https://github.com/karpathy/tsnejs
Spotify JS API Wrapper by José Manuel Pérez: https://github.com/jmperez/spotify-web-api-js
Google Charts: https://developers.google.com/chart/