I just finished working on , a website which lets you sort your favourite Spotify music by different moods, and then save them as playlists. moooodify 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 . 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. Developer's Dashboard 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 method of authorization, which is shown below. Implicit Grant It's quite straightforward. I redirect to a URL with Spotify login, sending my  Client ID and the that were relevant, which I got from the previous step. permission scopes 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 , 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: user's top tracks $.ajax({ : , : { : + access_token
    }, : {
        getTrackIDs(response);

    }, url 'https://api.spotify.com/v1/me/top/tracks?limit=50&time_range=medium_term' headers 'Authorization' 'Bearer ' success ( ) function response In case of or , the time_range query changes to short_term or long_term respectively. last month all time 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 . This is how the request looked: get several albums { $.ajax({ : + (trackIDString), : { : + access_token
    }, : {
  setImages();
})
} ( ) function getAlbumArt trackIDString return url 'https://api.spotify.com/v1/albums?ids=' encodeURIComponent headers 'Authorization' 'Bearer ' success ( ) function response 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 first. We use the trackIDString we used for the albums as a query here too. audio features for each track $.ajax({ : + (trackIDString), : { : + access_token
            }, : {
                setTrackInfo(response);
            },
            }) url 'https://api.spotify.com/v1/audio-features?ids=' encodeURIComponent headers 'Authorization' 'Bearer ' success ( ) function 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 method to insert the new track info on to the website. appendChild() 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 . We will need this to modify their playlists. get the user ID $.ajax({ : , : { : + access_token
      }, : {
          createPlaylist(response);

      }
  }) url 'https://api.spotify.com/v1/me/' headers 'Authorization' 'Bearer ' success ( ) function response We can then use the user ID to create a new playlist for them. For this, we use a POST request. $.ajax({ : , : + (user.id) + , : .stringify({ : playlist-name, : playlist-description
       }), : { : + access_token, : }, : {
        addTracks(response);     
      },
      }
    }) type 'POST' url 'https://api.spotify.com/v1/users/' encodeURIComponent '/playlists' data JSON "name" "description" headers 'Authorization' 'Bearer ' 'Content-Type' 'application/json' success ( ) function 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({ : , : + (playlist.id) + + trackURIString, : { : + access_token, : }, : { .log( );
        },
        }
      }) type 'POST' url 'https://api.spotify.com/v1/playlists/' encodeURIComponent '/tracks?uris=' headers 'Authorization' 'Bearer ' 'Content-Type' 'application/json' success ( ) function result console '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. Try the website out yourself! Find me on and . Thanks for reading! Twitter Medium

Flow

Fetch

Twitter

My App Lets You Sort your Music by Mood [with some help from Spotify's Web API]

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

I Built This Immersive Audio Visualiser

The 💩 Poop Emoji's 10th Anniversary

10 Year Challenge — How Popular Websites Have Changed In China.

10 ways how designing a chat bot is different from designing an app

10 Ways To Make Your Innovative, Game-Changing, Synergistic Website Stand Out In 2018

10 UX Tips To Create High-Performing Landing Pages

I Built This Immersive Audio Visualiser

The 💩 Poop Emoji's 10th Anniversary

10 Year Challenge — How Popular Websites Have Changed In China.

10 ways how designing a chat bot is different from designing an app

10 Ways To Make Your Innovative, Game-Changing, Synergistic Website Stand Out In 2018

10 UX Tips To Create High-Performing Landing Pages

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps