2

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.

  1. 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.

  2. 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.

user2030942
  • 215
  • 5
  • 25

1 Answers1

3

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.

Community
  • 1
  • 1
kevguy
  • 4,328
  • 1
  • 24
  • 45
  • Thanks for your response! How do I get set up to make these get and ajax requests on my Javascript file? Do I need to get the access token at the beginning of the file? Do I need to download anything? Do I just call get when retrieving tracks and work on the json I get back? – user2030942 Dec 06 '16 at 21:48
  • 1
    Step 1 can be done without doing anything extra but calling get in Javascript. This will return you a list of search results with the songs's Spotify links, album names and arts. However, if you wanna get extra info of a single track, like duration and its audio features, you need the access token. In order to do that, you have to create an app at [link](https://developer.spotify.com/my-applications/#!) and get the client id and client secrets. There's an expiration time for the access token, you don't need to get it everytime, just get a new one when it expires. – kevguy Dec 07 '16 at 02:18