Search for track in Spotify API Javascript + Add to Server

Question

I'm building a web application on web2py and vue.js that ideally searches through Spotify songs, lists the results, and lets me add a selected result to a playlist stored on my server.

I'm currently stuck trying to implement the Spotify search feature. Their documentation is not very thorough and I'm barely a beginner.

I would like to be able to input anything in the search (play button, track title, artist or album), get a list of results and display them on my site on a table (title, artist, album, album cover, duration, etc..). I don't know what functions on the Spotify API can be used to accomplish this.
After the results are listed I would like to be able to select a song and add it to my playlist that is stored in the server. I know how to do POST requests and add items to a database, but I don't know how to select a particular result from my list and send its information to my server in JSON format. I guess I don't understand how each row on my song table would link to a particular JSON object that I can pass to the server.

kevguy kevguy · Accepted Answer · 2016-12-03T05:10:08

Here's an example of getting track info of Linkin Park's Numb. So now all you have to do is translating all these commands for Javascript, using with ajax or

Step 1: Get track id

curl -X GET "https://api.spotify.com/v1/search?q=track%3Anumb+artist%3Alinkin+park&type=track" -H "Accept: application/json"

//Javascript
$.get( "https://api.spotify.com/v1/search?q=track%3Anumb+artist%3Alinkin+park&type=track", 
    function( data ) {
        console.log(data);  
    });

Step 2: Get access token

curl H "Authorization: Basic YOUR_CLIENT_CREDENTIALS" -d grant_type=client_credentials https://accounts.spotify.com/api/token

YOUR_CLIENT_CREDENTIALS is your ClientId:ClientSecret, you can use this function to get it:

btoa('YOUR_CLIENT_ID:YOUR_CLIENT_SECRET')

To do the ajax request is actually a bit tricky and Spotify actually wants you to do it server side, I suggest you refer to this link:

Access-Control-Allow-Origin denied spotify api

Step 3: Get audio features

curl -X GET "https://api.spotify.com/v1/audio-features/YOUR_TRACK_ID" -H "Authorization: Bearer {YOUR_Access-TOKEN}"

Let's say the track id is 2nLtzopw4rPReszdYBJU6h:

$.ajax({
   url: 'https://api.spotify.com/v1/audio-features/2nLtzopw4rPReszdYBJU6h',
   headers: {
       'Authorization': 'Bearer ' + 'YOUR_ACCESS_TOKEN'
   },
   success: function(response) {
       console.log(response);
   }
});

To retrieve the data from your database really depends on how you design your database and what kind of info you store, so it should be pretty straight forward.

Search for track in Spotify API Javascript + Add to Server

1 Answers