I just finished working on moooodify, a website which lets you sort your favourite Spotify music by different moods, and then save them as playlists.
This article will take you through my journey (briefly). I am no expert coder by any means, so I mostly learned as I went along. Alright, without further ado, let's get into it.
You can check it out on Product Hunt here.
Step 1: Registering my app
First, I created an account on the Developer's Dashboard. Registering my app there gave me a client ID which would be important for the next step. I could also whitelist redirect URIs. This URI enables the Spotify authentication service to automatically re-launch your app every time the user logs in.
You can learn more about registering your app here.
Step 2: Authorization
To have the end user approve your app for access to their Spotify data and features, or to have your app fetch data from Spotify, I needed to authorize your application.
I used the Implicit Grant method of authorization, which is shown below.
It's quite straightforward. I redirect to a URL with Spotify login, sending my Client ID and the permission scopes that were relevant, which I got from the previous step.
After the user has logged in, I get the access token which I can use to access the Web API. To learn more about what exact commands to use, you can see the Spotify Authorization Guide.
Step 3: Using the Spotify Web API
Sorting songs by mood
Once my app is authorized, I first get the user's top tracks, depending on which tab the user is on. For example, if the user selects their top tracks of the last 6 months, this is the GET request:
$.ajax({
url: 'https://api.spotify.com/v1/me/top/tracks?limit=50&time_range=medium_term',
headers: {
'Authorization': 'Bearer ' + access_token
},
success: function(response) {
getTrackIDs(response);
},In case of last month or all time, the time_range query changes to short_term or long_term respectively.
Once I get the response, I use the track IDs to then get the album art for each of the tracks. For that, I have to get several albums. This is how the request looked:
function getAlbumArt(trackIDString){
return $.ajax({
url: 'https://api.spotify.com/v1/albums?ids=' + encodeURIComponent(trackIDString),
headers: {
'Authorization': 'Bearer ' + access_token
},
success: function(response) {
setImages();
})
}I then used the images attribute of the response to store them in an array.
Having got all the info we need to display, that is, track name, artist name, and album art, we can now go ahead and sort our tracks into moods and display them. However, we need to get the audio features for each track first. We use the trackIDString we used for the albums as a query here too.
$.ajax({
url: 'https://api.spotify.com/v1/audio-features?ids='+encodeURIComponent(trackIDString),
headers: {
'Authorization': 'Bearer ' + access_token
},
success: function(response) {
setTrackInfo(response);
},
}) Alright! Now we have everything to sort the songs into different moods. Spotify provides various audio features like danceability, energy, acousticness, valence, tempo etc.
I used a few of these in different combinations to come up with five different moods: Mellow, Upbeat, Chill, Party, High Energy.
I then used JavaScript's appendChild() method to insert the new track info on to the website.
I also created a tool where you can apply your own custom moods, in case you aren't feeling like any of the pre-generated ones. The principle is the same. The AJAX calls are made in the same order to fetch the tracks, their album art, and audio features.
Creating Playlists
Once the songs are sorted into moods, the user has the option to save these as playlists on to Spotify.
For this, first I made a call to get the user ID. We will need this to modify their playlists.
$.ajax({
url: 'https://api.spotify.com/v1/me/',
headers: {
'Authorization': 'Bearer ' + access_token
},
success: function(response) {
createPlaylist(response);
}
})We can then use the user ID to create a new playlist for them. For this, we use a POST request.
$.ajax({
type: 'POST',
url: 'https://api.spotify.com/v1/users/' + encodeURIComponent(user.id) + '/playlists',
data: JSON.stringify({
"name": playlist-name,
"description": playlist-description
}),
headers: {
'Authorization': 'Bearer ' + access_token,
'Content-Type': 'application/json'
},
success: function(response) {
addTracks(response);
},
}
})This will create an empty playlist with a name and description of our choice. Now that we have a playlist, the only thing remaining is to add tracks to it.
$.ajax({
type: 'POST',
url: 'https://api.spotify.com/v1/playlists/' + encodeURIComponent(playlist.id) + '/tracks?uris=' + trackURIString,
headers: {
'Authorization': 'Bearer ' + access_token,
'Content-Type': 'application/json'
},
success: function(result) {
console.log('yay');
},
}
})That's it! A filled playlist will be available in the user's Spotify library.
Learnings
It was the first time I was using the FTP method to host the website. Making it responsive, and having it work on all browsers was also a learning point. It would sometimes work only on Chrome, sometimes on every browser but Safari, so that was a challenge.
The JavaScript was almost completely new. I didn't know about AJAX calls before this. Apart from that, I also tried my hand at CSS keyframe animations to give the website a smooth feel.
All in all, this has been a great learning experience. Going through the whole flow of designing it, coding it, setting up tracking, and then releasing it has been extremely insightful.