-
Create a Spotify account if you don't already have one and go to Spotify's API Docs.
-
Open up Spotify Web Console and navigate to Playlists > Get a Playlist's Tracks
-
In your Spotify app, pick a playlist and click (...) > Share > Copy Spotify URI. Paste the URI anywhere and grab the playlist ID (
spotify:user:username:playlist:playlist_id) -
In the web console, fill in your
user_idandplaylist_idand putitems(track(name,id))infields. -
Under
OAuth TokenclickGET TOKENand choose the default settings. -
Copy paste the output and put it into a new file titled
songs.json
-
Open the file titled
tinker_starter.py. -
Get
song_idsandsong_namesby parsing throughsongs.json.
for item in d['items']:
song_ids.append(item['track']['id'])
song_names.append(item['track']['name'])
-
Edit the
song_idsto have no quotes and spaces. You can add a lineprint(*song_ids, sep=',')after you print the IDs if you are using Python 3. -
In the Spotify Web Console, navigate to Tracks > Get Audio Features for Several Tracks and enter the song ids.
-
Copy paste the output and save it to a file titled
features.json. -
Parse the values for each song feature from
features.jsonas follows:
for feature in f['audio_features']:
feature_ids['danceability'] = feature_ids.get('danceability',[])
feature_ids['danceability'].append(feature['danceability']*100)
All features, except tempo, will be scaled by 100. We will store the values for tempo separately.
- Store all of the songs and their corresponding tempos in a dictionary.
songs = {}
for song in song_names:
for t in tempo:
songs[song] = t
- Calculate the averages of each feature.
avgs = {}
for k,v in feature_ids.items():
sum = 0
for val in v:
sum += val
avgs[k] = sum/len(v)
- The final code for this section can be viewed at
tinker.py.
- Create a new file
index.htmland set up the header with a page title and import ChartJS using this link as the source:https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.4.0/Chart.min.js
- In the body tags, add in the following lines:
<body>
<canvas id="songFeatures"></canvas>
<canvas id="songTempos"></canvas>
</body>- Inside script tags, we will build our graphs. Start by creating an
averagesdictionary with the values you calculated intinker.py. An example with our playlist is shown below:
<script>
var averages = {"danceability": 67.21851851851851, "energy": 64.74814814814815, "speechiness": 7.4185185185185185, "acousticness": 19.46912592592593, "liveness": 20.227407407407412, "valence": 49.025925925925925}
</script>-
In a polarAreaChart variable, follow the structure on the ChartJS documentation. This will create your first graph, showing the average feature value of songs in your selected playlist for each of the labels in the chart.
-
To create our tempo graph, create a variable titled barChart and set the labels to be an array of song titles in your playlist. Set the dataset to be the array of tempos of the songs, which you can get from the
tinker.pyfile if you print out thetempoarray. -
To see your graphs on a webpage, just open
index.htmlin a browser!
Using what you've learned, Spotify's Web Console, and the ChartJS documentation, try making your own vizualizations now based on data that you're interested in!