The company I work for hosted a hackathon a couple weeks ago for its engineers. Some ideas I thought up were ways to improve the products I was working on. I couldn’t quite figure what to work on, but then I realized that I could make a mock online shopping website implementing all these fun ideas.
One of the fun ideas I had was to filter online shopping products by the mood of the song you are listening too. I had seen a few articles that described how music being played affects what the customer is buying. This needed a couple big things to be done in order to accomplish. One, I needed songs that told me the mood of the song. Two, I needed products with moods attached to them.
To solve the first one, I decided to use Spotify Web API. I had seen a detail that said I can get the general mood of a song. With the second one, my assumption is that I would need to run an AI on product images and train a model to pull out the mood of a product. The first one sounded more easy than the second, so I went in that direction.
The only thing I did before implementing Spotify Web API was to decide on what technology to use. Since I was in a hackathon, I went with some familiar tools and some new tools. Those tools may be found in the package.json file. Back to Spotify.
In order to get access to Spotify songs, I needed to follow Spotify’s Authorization flow which is as follows: get user authorization from Spotify, give the authorization an API callback to get the access token and refresh token for my app, a way to fetch the access token, and a way to refresh the access token. During the whole time coding this, I was following some tutorials tha Spotify had. Things were mostly straightforward.
The only thing that wasn’t straightforward was how to store the access and refresh tokens. The Spotify tutorial didn’t detail how to accomplish this with Next.js on Netlify. Eventually I found out that the tokens may be stored in cookie headers. That ended up being the easiest solution. Then to retrieve these cookies all I needed was an API function to pull the info from the headers. Eventually, I was able to get all the authorization data needed to use Spotify’s Web API.
Those APIs may be viewed here.
I was able to figure out how to get a song playing easily. Spotify had a tutorial on how to use their player with React. In the tutorial, I saw that I had to use and object property named uris in the body of the request. However when I put a playlist in there, I would get some obscure error reponse from Spotify. Eventually, thanks to some StackOverflow help, I figured out that if I wanted to play an album or playlist, I needed to use context_uri in the body of the request. I tried it out and that worked! I realized that Spotify probably had some API documentation on this.
I found the Start/Resume Playback API documentation, and in the body documentation both uris and context_uri were listed. I found that uris is to be used for an array of spotify tracks where as context_uri is to be used for albums, artists, and playlists.
Huh, I should have gone to the API documentation sooner.
What I Learned
I learned that I probably should stick to the technology product documentation if I don’t understand how something needs to be made. There still is Stack Overflow which is very helpful. The tutorials are a great initial exposure. But if I am needing a bit more info, there is no better source than that the API documentation itself.
I’ve learned how Spotify Web API works! It did take me a moment to get the gist, but eventually I did learn the generic parts of it. I needed to follow an OAuth flow to access Spotify, then I could use the API. There is the player which handles all the playback. Additionally, there are more APIs to provide info about the song that is being listened to.
I wonder what else I can do with having access to Spotify…