Hands-on Tutorials
How to Utilize Spotify’s API and Create a User Interface in Streamlit
A walkthrough on how you can pull data from an API and display user-determined results in an interactive chart
To begin we must first go to the Spotify Developer page below.
You will use your Spotify account credentials to sign in. When you are signed in you will then have the option to ‘Create an App’.
Once you create an app you will see your Client ID and Client Secret. We will need these to generate an access token that we will use to pull in data from the API.
We will break our code up into three separate scripts. One will be an API client to access the API, one will call the client and generate an interface in Streamlit and one will be used to help with the look of the Streamlit interface.
Building out the API Client script
Our goal is to create a class that will allow us to easily make API calls.
To help guide us through building out the class we will follow through the authorization guide on the Spotify Developers page.
https://developer.spotify.com/documentation/general/guides/authorization-guide/
First, we will import all of the necessary libraries.
We can then begin to declare some of the variables within the class that we will need along with an initialize function.
It should be noted that the access token expires after 3600 seconds, so we will implement some code to check the expiration of the token. The token URL can be found in the Authorization Guide of the Spotipy documentation.
https://developer.spotify.com/documentation/general/guides/authorization-guide/
We will then need to use our Client ID and Client Secret to create a base64 encoded string for our client credentials. Encoding our credentials into a base64 string makes it more secure.
We can now use our get_client_credentials function and call it within another function to generate a token header, which we will need for authorization.
We’ll also build out a get_token_data function.
With our functions and variables in place, we will now write out a function to perform the authentication given the outputs of our functions and the values of our variables.
With the code in place to authenticate our credentials, we can now create a function to generate the token. The code below ensures that the credentials authenticate correctly and will generate a token.
Next, we will generate a header which we will need to make a request. You will see that in this function we need to use a “Bearer” authenticator instead of a “Basic” authenticator as we did previously. A “Bearer” authenticator is used for tokens and a “Basic” authenticator is used with an ID and a Secret.
With everything in place, we can now write some functions to pull in data. We will use the endpoint that corresponds to the ‘search’ reference within the Web API documentation.
https://developer.spotify.com/documentation/web-api/reference/search/search/
The code below will allow us to make queried searches without having to copy and paste functions every time we want to do a different search. The way it will allow us to search is by passing in a dictionary and then separating the dictionary into a key-value pair with a colon {k}:{v}. Ultimately, this allows us to turn the dictionary into a string which is the format we need to search.
Now we can put everything together and save it as a python file. I named the file spotipy_client.py, feel free to name it whatever you would like, but remember the name as we will need to import it into another script.
Streamlit Interface CSS File
Next, we will create a CSS File that we can use to customize our Streamlit interface.
The following code will allow for customization of the background-color along with the customization of the search button.
We can save this script as a CSS file. Similar to the client script remember the name as we will also need to import this file.
Script to Build the Interface
One last thing we will need to do, before building out the interface script, is to create a virtual environment to download the packages we will need to run our final script successfully. I used conda to create my virtual environment for this project. You can do the same by opening Anaconda Prompt and running the following code.
The reason for creating a virtual environment is so we can download specific packages for a specific project. This is also safer than downloading packages directly to the base instance of your machine.
Once we have our environment we will need to activate it to download packages and then ultimately to run our script.
You can activate an environment by using the following command.
We will need to install Streamlit in our virtual environment. You can do this with pip.
Finally, we can begin to build out the script that will allow us to create a streamlit interface.
First, we will utilize our CSS code to customize the appearance of the page we will generate.
Next, we will create the streamlit variables that will allow a user to pass in data to our python code that will be utilizing our spotipy_client.py script.
The above code creates a search bar for someone to search for an artist, a drop-down menu of different features they can choose from, and a button to push to run the code after making their selections. We will use the selections made to pass in the corresponding variables further down in the script.
Next, we will pass in the required arguments to our SpotifyAPI class. You will want to make sure that your spotipy_client.py file is in the same directory you are currently working in, otherwise, it will not load into our current script.
With our client_id and client_secret passed into our class, we will now be able to query for data that we want.
Our objective is to search for tracks by a specific artist using the variable that gets generated through the Streamlit interface, Name_of_Artist. You will notice that this brings back the data in a JSON format. To utilize it in our script we will need to parse through the JSON data and extract values that we want to pass into a dataframe. In the code below “artist” is the key and “Name_of_Artist” is the value.
We now have a dataframe that includes some fields related to a track of an artist.
For our project, we will need to also bring in the specific audio features of a track. We can learn what specifically we need to pass into the lookup URL through the documentation.
https://developer.spotify.com/documentation/web-api/reference/tracks/
As we can see we’ll need to pass in a track id to get the audio features data we are looking for. In our existing dataframe we have that information under the column name ‘Id’. We can only look up one ‘Id’ at a time, so we will create a loop that goes into our dataframe and passes each ‘Id’ value into it. Each output will be a row that we can append to a dataframe to put our data into a tabular format.
With both a dataframe for track information and one with audio features we can merge the two into a combined table and extract the fields we would like to show in our interface. Name_of_Feat will be passed in depending on what the user selects.
At last, with our dataframe in place, we can build out our chart and table to display.
We will use an Altair chart that will allow the user to hover over different data points to see the different aspects of a song such as Popularity, Audio Feature, Song Name, and Album Name.
One final thing to add is the descriptions of how the different audio features are measured. I added this at the bottom of the screen for our potential users to view while looking at the data. These descriptions were from the audio features documentation on the Spotify Developer website.
Before we can test our script we will put all of the above code together and save it as a python file.
With everything now in order, we can test out our final product. Within your terminal, you will run the following command. I named my final python file streamlit_audio_features.py, but feel free to name it whatever you would like. Remember to have your virtual environment active in the terminal. This command will open a new tab in your browser and show our interface.
Below shows a few snapshots of what our interface looks like. To see the interface in action you can follow the link to the youtube video below or run the code yourself.
https://www.youtube.com/watch?v=BuVZ07DNWj0
The full scripts of these code files can also be found on Github.
I hope this has given you some insights on how to use Python, APIs, and Streamlit for any potential ideas you may have for projects.
The spotipy_client.py script was modified from
The MIT License (MIT)
Copyright © 2020 Coding For Entrepreneurs
