Zach Inglis

Tutorial: How to display your last played artist from Last.fm

In this tutorial I will teach you how to display your last listened to track on your website with the jQuery library (although it can be easily translated to any other library). The JSON library for Last.fm is not very well documented.

1. Log into the API Account page and fill in the form for your application however you would like. Name the Callback URL ‘LastPlayed’. Write down your API key.

2. Create an element somewhere in your page with the id of #song. I use the following:

   <strong>Currently listening to:</strong> <span id="song">Nothing</span>

   That way, for the few seconds that the Javascript has not loaded, it will appear sensicle.

3. Right before the </head> tag on your website, add the following snippet of code:

   <script src="http://www.google.com/jsapi"></script>
   <script type="text/javascript">
     google.load("jquery", "1.3.2");
   </script>
   
   <script type="text/javascript">
     function show_last_track(JSONdata) {
       var last_track      = JSONdata.recenttracks.track;
       var track_artist    = last_track.artist['#text'];
       var track_name      = last_track.name;
       var track           = track_artist + " - " + track_name;
       $('#song').text(track);
     }
   </script>

4. Finally, add the following code just above the </body> so that once your page is loaded, it will execute. Don’t forget to replace YOUR_API_KEY with the one you jotted down earleir.

   <script type="text/javascript" src="http://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=piemaster&api_key=YOUR_API_KEY&limit=1&format=json&callback=show_last_track"></script>
   

5. Reload your page and check it works!