After my last post I wanted to see just how easy/hard it would be to create a script to take advantage of my last.fm feed. It turns out that a great example was available at WebMonkey's website. In the example they are referencing a local XML file. As I pointed out in my last post I am able to load real-time data from last.fm. So the following code produces a unorganized list of album covers that represent the recent tracks I have been listening to. One of the best features of using jQuery for this task is the ability for jQuery to search for each instance of the specified tag and add them into an array. Then you can use the jQuery .each function to search and grab content from each section. Enough chatter, here is all the code that is necessary to parse through the XML file and render on your page:
var lastfmurl = 'lastfm.aspx'; // <---- This needs to map to last.fm via URLRewriter
var imageSize = 'large'; // <-- Album size [small, medium, large]
var lastfmtag = '#RecentTracks'; // <--- You will need a placeholder div on your page
var imageWidth = '126';
var imageHeight = '126';
var newline = '\r\n';
(function($) {
$.get(lastfmurl, {}, function(xml) {
myHTMLOutput = '<style type="text/css">';
myHTMLOutput += lastfmtag + ' ul {list-style-image:none;list-style-position:outside;list-style-type:none;width:400px;height: 260px;overflow:hidden;}' + newline;
myHTMLOutput += lastfmtag + ' ul li {display:list-item;float:left;height:150px;position:relative;width:140px;}' + newline;
myHTMLOutput += lastfmtag + ' ul li a {text-decoration:none; }' + newline;
myHTMLOutput += lastfmtag + ' span {display:none; }' + newline;
myHTMLOutput += '</style>';
myHTMLOutput += '<ul>';
$('track', xml).each(function(i) {
var albumimage = 'http://cdn.last.fm/flatness/catalogue/noimage/2/default_artist_' + imageSize + '.png';
song = $(this).find("name").text();
artist = $(this).find("artist").text();
album = $(this).find("album").text();
url = $(this).find("url").text();
image = $(this).find("image").each(function(i) {
if ($(this).attr('size') == imageSize && $(this).text() != "")
albumimage = $(this).text();
});
mydata = '';
mydata += '<li>';
mydata += '<a title="' + song + '" href="' + url + '" target="_blank">';
mydata += '<img alt="' + albumimage + '" title="' + song + ' by ' + artist + '" src="' + albumimage + '" width="' + imageWidth + '" height="' + imageHeight + '" />';
mydata += '</a>';
mydata += '<span>' + song + '</span>';
mydata += '</li>';
myHTMLOutput = myHTMLOutput + mydata;
});
myHTMLOutput += '</ul>';
myHTMLOutput += '<div style="clear:both"></div>';
$(lastfmtag).append(myHTMLOutput);
});
})(jQuery);Here is the displayed results:
And the html code looks like:
<style type="text/css">
#RecentTracks ul {list-style-image:none;list-style-position:outside;list-style-type:none;width:400px;height: 260px;overflow:hidden;}
#RecentTracks ul li {display:list-item;float:left;height:150px;position:relative;width:140px;}
#RecentTracks ul li a {text-decoration:none; }
#RecentTracks span {display:none; }
</style>
<ul>
<li>
<a title="Guilty Conscience" href="http://www.last.fm/music/Eminem/_/Guilty+Conscience" target="_blank">
<img alt="http://cdn.last.fm/flatness/catalogue/noimage/2/default_artist_large.png" title="Guilty Conscience by Eminem" src="http://cdn.last.fm/flatness/catalogue/noimage/2/default_artist_large.png" height="126" width="126" />
</a>
<span>Guilty Conscience</span>
</li>
<li>
<a title="My Name Is" href="http://www.last.fm/music/Eminem/_/My+Name+Is" target="_blank">
<img alt="http://userserve-ak.last.fm/serve/126/8674879.jpg" title="My Name Is by Eminem" src="http://userserve-ak.last.fm/serve/126/8674879.jpg" height="126" width="126" />
</a>
<span>My Name Is</span>
</li>
...
</ul>I think the results are pretty nice… What do you think?
Remember, in order to use this code you would need to have your URLRewriter configured to proxy the connection to last.fm. For example, connecting to http://www.dscoduc.com/lastfm.xml is the **same as pulling the last.fm xml feed from ***http://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=rj&api_key=b25b959554ed76058ac220b7b2e0a026 .
*** No, that’s not my api_key so the results **won’t be exactly the same