Menu Toggle

Using JSON to access recently played tracks

  • Development.
  • JavaScript.

If you take a look at the footer, you can see which song I’m listening to/listened to last. I’m achieving this by accessing the API using jQuery and JSON. It wasn’t immediately clear to me how to do this and searching online for developers with a similar problem didn’t bring me any results. So, I thought I’d share how I did it just in case there’s a developer out there who could use a bit of help.

Firstly, you need a account, a device that ‘scrobbles’ (tells what your listening to, and finally a API key. Most of my scrobbling is done through Spotify, but my smartphone, iTunes, and my iPod are all set up to scrobble to too. Once you have these things, you’re ready to start coding.

There are a number of ways to do this, and I’m just going to show you what I did – you’ll see that once you have accessed the API and received the XML feed, you can print this information to your web page however you like using jQuery. I’m interested in accessing the tracks that I have played, so I will be looking to receive information about a user (me).

First of all, you need to call jQuery. A quick way to do this is to use the version hosted on Google Libraries. For example, add the following to your head section:

<script src="//"></script>

If your doing this in WordPress, you don’t need to call jQuery because it’s included as part of the WordPress core. Search for an article on how to use jQuery in WordPress if you need to as it will affect your syntax. You’ll need to be looking at enqueueing scripts etc. (outside the scope of this little post but if you need pointing in the right direction, get in touch).

Now, create a new JavaScript file – call it whatever you like. If you’re going to be doing other JavaScripting, then you might want a general file. I like to use a file called app.js (common.js, myjs.js, whatever.js is just as good). In that file, we need our JavaScript to fire on an event. We’re going to use the document ready function:

$(document).ready(function() {
//jQuery goodness in here - this is where our scripting will go

We then need to include this file in our head section too:

<script src="(absolute path to your JavaScript file)/app.js"></script>

Once we have this, we need to add the following to our JavaScript file:

$(document).ready(function() {
    $.getJSON("", function(data) {


What we’re doing here is accessing the API and telling it which information we need. Specifically, I am accessing information about the user and within that recent tracks the user listened to. method=user.getRecentTracks We also need to supply our username &user=defsamm and our API key &api_key=5b801a66d1a34e73b6e563afc27ef06b – these values are my username and API key so replace them with your own values (unless you really want to know what I’ve been listening to!).

Now we have this information, we need to do something with it. Lets fill in the function we just declared. function(data) { } In my example, I only want one result so I have added an if statement to make this happen. returns a minimum of 2 results the &limit=2 part of the API call – if you put the value as anything less than 2, the information you get will return as undefined.

$(document).ready(function() {

    $.getJSON("", function(data) {

        var html = ''; // we declare the variable that we'll be using to store our information
        var counter = 1; // we declare a counter variable to use with the if statement in order to limit the result to 1
        $.each(data.recenttracks.track, function(i, item) {
            if(counter == 1) {
                html += 'Currently listening to: <span><a href="' + item.url + '" target="_blank">' + + '</a> - ' + item.artist['#text'] + '</span>';
            } // close the if statement
            counter++ // add 1 to the counter variable each time the each loop runs
        }); // close each loop
        $('.listening-to h5').append(html); // print the information to the document - here I look for the h5 tag inside the div with a class of 'listening-to' and use the jQuery append method to insert the information we've stored in the html variable inside the h5 tag.
    }); // close JSON call

}); // close document ready function

To explain a little about the information I’m accessing – firstly, I want the url of the track on I get this by grabbing the url from the item we’ve accessed item.url grabs the information returned inside an XML tag called url. I want the name of the track grabs the information returned inside an XML tag called name, and I want to get the artist’s name too item.artist['#text'] grabs this information from an XML tag called artist – this tag returns an object so we need to specify which part of the object we want to access (the text).

What we end up with (all being well) is what you can see in the footer below. If you want to access different information to that which I have, you can work this out through looking through the API documentation.

Good luck!