Enlarge this messageWarning: This website by nature is experimental, please upgrade your browser or you will be punished.

Engage Interactive Labs

Return to the main site.

Last.FM for jQuery

A plugin to grab your recently played tracks from Last.FM's api using jQuery and Json. Future versions will support other feeds such as favourites and most listened.

How does it work?

It's very simple! I've always found plugins like this irritating when they force you to use their HTML. For people without jquery knowledge digging around in the plugin file to change that HTML is pretty annoying. For this reason I've made the Last.FM plugin very flexible.

Instructions

.01 Get your API key from Last.FM

Head over to the Last.fm api documentation and sign up for an api key.

.02 Include the files

Paste this into the head of your document:

Show HTML
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript" src="js/lastfm.js"></script>

.03 Create an example layout

As long as you follow a few rules you can use your own HTML to layout your tracks. If you don't want to use something, don't include it in your HTML.

Firstly you'll need a container for all the tracks. We've used div#lasfm. Inside this you will need to create an example layout using classes on each item to define what content you want to use.

The classes available to you are:

  • Artwork: lfm_artwork
  • Song name: lfm_song
  • Artist: lfm_artist
  • Album: lfm_album

Including a link will automatically generate a link to that song. If you want the song name to link you could add a link and give it a class of lfm_song.

Here is the example we used on this page:

Show HTML
<div id="lastfm">
	<dl>
		<dt class="lfm_art">
			<a href="#"><img src="/images/lfm_overlay.png" alt="CD" class="lfm_overlay" /></a>
		</dt>
		<dd class="lfm_song"></dd>
		<dd class="lfm_artist"></dd>
		<dd class="lfm_album"></dd>
	</dl>
</div>

.04 Activate the plugin

To activate the plugin you need to include this code between a couple of script tags or link to an external javascript file in the head of your document.

Show Javascript
$(document).ready(function(){
	$('div#lastfm').lastFM({
		username: 'willblackmore',
		apikey: '96e0589327a3f120074f74dbc8ec6443',
		number: 10,
		artSize: 'medium',
		noart: 'images/noartwork.gif',
		onComplete: function(){
			//Done
		}
	});
});

The code used here shows all the options currently available. These are the defaults, but you'll obviously want to change some of them. If your happy with a default, you can remove it from the options.

  • username: The same as what you use to log into last.fm
  • apikey: This is the long code you got in step 1.
  • number: How many tracks would you like to display? Not too many, or you'll be waiting a while!
  • artsize: Choose between small medium or large. You can change this easily with CSS if none of them really fit.
  • noartwork: Last.FM does its best, but sometimes, it just can't find your artwork. This should be the path to an alternative.
  • onComplete: This function will be executed when the last track is loaded.

.05 Style it up

Now that you've got everything working you can use CSS to get everything looking good. We think you should use your own CSS, but if your interested, here is ours:

Show CSS
/* ---------------------------------------------
	LASTFM.CSS
-----------------------------------------------*/

#lastfm dl{
	position:relative;
	float:left;
	width:140px;
	height:64px;
	padding:8px 8px 8px 80px;
	margin:0 20px 20px 0;
	-moz-border-radius:10px;
	-webkit-border-radius:10px;
	border:solid 1px #333;
	background:#1a1a1a;
	}
#lastfm dl:hover,
#lastfm dl.hover{
	padding:7px 7px 7px 79px;
	border:solid 2px #444;
	cursor:pointer;
	}
#lastfm dl:hover dt,
#lastfm dl.hover dt{
	left:7px;
	top:7px;
	}

#lastfm dl dt{
	position:absolute;
	left:8px;
	top:8px;
	width:64px;
	height:64px;
	}
#lastfm dl dt a{
	position:absolute;
	top:0;
	left:0;
	width:64px;
	height:64px;
	z-index:100;
	}
#lastfm dl dt a:hover{
	background:none;
	}

#lastfm dl dd.lfm_song{
	font-weight:bold;
	font-size:12px;
	padding-bottom:6px;
	white-space:nowrap;
	overflow:hidden;
	}
#lastfm dl dd.lfm_artist,
#lastfm dl dd.lfm_album{
	color:#999;
	}

Don't forget to add a comment to the blog post with a link to your creations, alterations or any suggestions you may have!

CD