Creative Web Specialist - An online portfolio and resource site of Warren Buckley

Hello with a few days to go until Christmas, I thought I would share with you a mashup tip using Umbraco to list my recently listened to tracks using the Last.FM service and then using jQuery I am able to do an AJAX call to get the album art image remotely.

Before I start I will show you the method that can achieve this result entirely using XSLT in Umbraco however this is a slow process and is alot quicker to use the jQuery method which I will show you afterwards.

XSLT solution
Below is the XSLT code for you to view how easy it is to create a mashup just using XSLT in Umbraco.

 ]>





	
		
		
		
		
		
		
			
			
			
			
			
			
			
			
			
				
					
					
				
				
					
					
				
			
			
			

				 by 

				
			
		
	

jQuery solution
The jQuery version requires a .aspx file in order for it to do the remote XML calls, as the jQuery library does not allow you to do this.

This method works by using an XSLT file to list the recent tracks from Last.FM, then using the jQuery file to retrieve the album art XML for each item in the recent tracks via the local remotexml.aspx file using a querystring.

The good point about this method is that the album art is loaded after the page has fully loaded, so this does not delay the user from seeing the page. Additionaly if the user has JavaScript disabled it will not have much impact on the end user as it will degrade gracefully and the album art images will not appear.

 ]>





	
	

		
		
	
		
		
			
			
			
			
			
			
			

				 by 

				
				
			
		
	
	

Download Last.FM album art package v1.0.0

How to install this package

1. Download the package above and install into umbraco, by going to the Developer section and right clicking the Macro folder and selecting Import Package
2. A new window will appear click the Browse button and locate the zip file you have just downloaded and select Load Package
3. Tick the Accept license checkbox and then press install package.
4. This will install the following items
   1. Macro - [XSLT] List Last.FM recent tracks
   2. XSLT - /xslt/LastFMRecentTracks.xslt
   3. JS - /scripts/jQuery/jQueryAlbumArtLastFM.js
   4. JS - /scripts/jQuery/jquery-1.2.1.min.js
   5. ASPX - /umbraco/plugins/RemoteXML/RemoteXML.aspx
   6. ASPX.VB - /umbraco/plugins/RemoteXML/RemoteXML.aspx.vb
5. Once this has finished installing close the package installer window and insert the new macro into an appropiate template you have setup in umbraco. When inserting the macro it will ask you for your Last.FM  username so it can retrieve your recent tracks.
6. Next you will need to copy the following lines into your head section of your template.
   

7. You are almost done, you just need to create an image for when the script cannot find the album art and this needs to put in the following location /Assets/Last.FM/noimage.gif
   OR alternatively  you may change the image location within the jQueryAlbumArtLastFM.js file to suit your own needs.
8. That's it your finished !

$(document).ready(function() {
	// do stuff when DOM is ready
	//For each li within the UL of class "LastFMRecent"
	$("ul.LastFMRecent li").each(function() {
		//Get values from HTML within the LI tag and store in variables
		var ArtistName = $(this).find("span.ArtistName").text();
		var AlbumName = $(this).find("span.AlbumName").text();
		var TrackName = $(this).find("strong.TrackName").text();
		//Need to URLEncode the variables as these will build up the album art url
		var ArtistNameEncoded = urlencode(ArtistName);
		var AlbumNameEncoded = urlencode(AlbumName);
		//Build up album art URL variable
		var albumURL = "http://ws.audioscrobbler.com/1.0/album/" + ArtistNameEncoded + "/" + AlbumNameEncoded + "/info.xml";
		//Setup variable for "this" as it cant be used in the ajax success function
		var tH = $(this);
		//Lets do our ajax CALL for the remote XML
		$.ajax({
			type: "GET",
			url: "/umbraco/plugins/remotexml/remotexml.aspx?url=" + albumURL,
			dataType: "xml",
			error: function(xhr,err,e){
				//If there is an error it displays in a popup
					alert('Error:' + err);
			},
			success: function(xml) {
				//Find xml coverart/medium
				imageURL = $(xml).find("coverart").find("medium").text();
				//For Debug
				//alert(imageURL);
				//Check imageURL variable is empty
				if(imageURL == '')
				{
					//NO album art found, display noimage found graphic
					var strHTML = "
"
				}
				else
				{
					//Found artwork URL, use in image
					var strHTML = "
"
				}
				//Prepend the strHTML variable to the current li item
				$(tH).prepend(strHTML);
			}
		});
	});
});
//Function to urlencode characters
function urlencode(str) {
	str = escape(str);
	str = str.replace('+', '%2B');
	str = str.replace('%20', '+');
	str = str.replace('*', '%2A');
	str = str.replace('/', '%2F');
	str = str.replace('@', '%40');
	return str;
}

jQuery code to retrieve album art
The code below is heavily commented and should be easy to follow, but if you have any questions just ask and I will be more than happy to help.

If you follow the steps above this should work without any problems, however if you experience any problems or have any questions about the script leave a comment below and I will answer it as soon as I can.

Merry Christmas and a Happy New Year!
Warren