Last week, I completed my final project at Flatiron, a React-Redux app with a Rails API.*
My team decided to also make use of the Spotify API for our app, PlaylistPal, so that visitors could make playlists using the very cool metrics that Spotify stores about each of its songs, including danceability, valence, and amount of vocals.
Part 1: Requests without Authentication
Early into our project, we discovered that the Spotify API gives some information, such as an artist’s top ten songs, without any authentication. To get top ten tracks, we first took the user input of an artist’s name and made a get request for Spotify’s data on that artist.
From there, we parsed the unique artist id from our response, and made a second request to Spotify, this time returning the top ten tracks.
After that we could parse through the response from Spotify and grab any data we needed, including the track name, preview URL, and album title.
Part 2: Requests with Authentication
Making authenticated requests was quite a bit trickier, but after a few hours of fiddling we made our first successful request. Our first step was registering our app with Spotify in order to get our client secret and client id. These are simply strings of random letters and numbers that must be put in a secret file, so that they aren’t stored on Github and made publicly accessible.
In our app, we created sliders for users to select the danceability, emotional valence, etc, of songs that would be returned to them. The Spotify API requires requests to include an artist id or musical category along with the danceability and valence parameters, so we prompted users to enter an artist name before letting them manipulate the sliders and send a request.
In order to make our request for song recommendations to Spotify, we first had to get a token from Spotify (essentially another secret code!) using our client id and secret. The header of this post request contains a base 64 encoded string with the id and secret.
The returned token is then put in the header of the get request to Spotify, which has a url that includes the formatted query containing the artist id and other parameters.
Finally, the Spotify-recommended tracks are returned!
I should also mention that sites can use OAuth to authenticate individual user accounts with Spotify in order to get data such as albums saved to the user’s account or post tracks to a playlist. Check out the Spotify API docs for more info.
Overall, it took quite a bit of legwork to figure out how to properly format our requests to Spotify, but once we got it set up, we had tons of fun playing around with the data Spotify returned to us, and it added tons of value to our project.