How do I get the audio features of current playing track with Spotify Web API?

0
votes

https://developer.spotify.com/documentation/web-api/reference/tracks/get-audio-features/

Hi, i'm using the spotify web api to get audio features of a track. In the website mentioned above, there's an explaination of how it works. The problem is that it can only get the audio features from one specific track, depending on the id. But i want the id to change when I play a different track, so that i get the audio features of the currently playing track. Does somebody know how to do this? In the code below you can see the url. At the end of the link you see: 06AKEBrKUckW0KREUWRnvT That is the id of the track.

This is my code:

$.ajax({
  url: 'https://api.spotify.com/v1/audio-features/06AKEBrKUckW0KREUWRnvT',
  headers: {
    'Authorization': 'Bearer ' + access_token
  },
  success: function(response) {
    audioFeaturesPlaceholder.innerHTML = audioFeaturesTemplate(response);
    console.log(response);
    $('#login').hide();
    $('#loggedin').show();
  }
});
2
javascriptspotify
And what response or error do you get? – Lixas
you would need to supply the ID to your ajax call as a variable. Presumably you have some way of knowing if your audio player has changed the track, so that you can call the function to make this ajax call? We don't know how that part of your page is implemented, so it's hard to advise you about that. – ADyson

2 Answers

0
votes

There is a relatively new Spotify Web API endpoint which is described here. It will return the currently playing track for the user that corresponds to the access token used.

The following snippet shows how to combine both endpoints in order to achieve what you want. The access token used in this snippet must include the user-read-currently-playing scope.

var access_token = "<YOUR_ACCESS_TOKEN_HERE>";

(async () => {
  var currentTrack = await ajax("https://api.spotify.com/v1/me/player/currently-playing");
  var audioFeatures = await ajax(`https://api.spotify.com/v1/audio-features/${currentTrack.item.id}`);
  console.log(audioFeatures);
})();

function ajax(url) {
  return $.ajax({
    url: url,
    headers: {
      'Authorization': 'Bearer ' + access_token
    }
  });
}
0
votes
setInterval(function(){
        callAjax();
        }, 1000);
        var apiData; 
        var audioData;  
        var callAjax = function(){
         $.ajax({
            url: 'https://api.spotify.com/v1/me/player/currently-playing',
            headers: {
              'Authorization': 'Bearer ' + access_token
            },
            success: function(response) {
              currentPlayingPlaceholder.innerHTML = currentPlayingTemplate(response);

              apiData = response;
              console.log(response);
              $('#login').hide();
              $('#loggedin').show();
            }
        });
        if(apiData != undefined){
        $.ajax({
            url: "https://api.spotify.com/v1/audio-features/" + apiData.item.id,
            //url: "https://api.spotify.com/v1/audio-features/06AKEBrKUckW0KREUWRnvT",
            headers: {
              'Authorization': 'Bearer ' + access_token
            },
            success: function(response) {
              audioFeaturesPlaceholder.innerHTML = audioFeaturesTemplate(response);

              //audioData = response;                  
              console.log(response);
              $('#login').hide();
              $('#loggedin').show();
            }
        });
        }

I made a variable called apiData. Then you can identify the id of currently playing track by using item.id See this screenshot of the console log: enter image description here

You can see a subfolder 'item' and in that folder you can find 'id'.

So I replaced this: url: "https://api.spotify.com/v1/audio-features/06AKEBrKUckW0KREUWRnvT" For this: url: "https://api.spotify.com/v1/audio-features/" + apiData.item.id

It seems to work, maybe it can help others.