RecentListens

by dannygarcia

HTML

<div id="lastfm">
    <dl>
        <dt class="lfm_art">
            <a href="#"><img src="http://danny-garcia.com/aud/aud.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>

CSS

html, body {
    background: #2b2b2b;
}

dl {
    float: left;
    margin: 0 10px 5px 0;
    -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.8);
}

a {
    position: absolute;
}

img {
    height: 125px;
    width: 125px;
    display:block;
}

img.lfm_overlay {
    height: 128px;
    width: 126px;
    position: relative;
    top:-2px;
    left:-1px;
}

JavaScript

(function($){$.fn.lastFM=function(options){var defaults={number:10,username:'willblackmore',apikey:'96e0589327a3f120074f74dbc8ec6443',artSize:'medium',noart:'images/noartwork.gif',onComplete:function(){}},settings=$.extend({},defaults,options);var lastUrl='http://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user='+settings.username+'&api_key='+settings.apikey+'&limit='+settings.number+'&format=json&callback=?';var $this=$(this);var container=$this.html();$this.children(':first').remove();if(settings.artSize=='small'){imgSize=0}
if(settings.artSize=='medium'){imgSize=1}
if(settings.artSize=='large'){imgSize=2}
this.each(function(){$.getJSON(lastUrl,function(data){$.each(data.recenttracks.track,function(i,item){if(item.image[1]['#text']==''){art=settings.noart;}else{art=stripslashes(item.image[imgSize]['#text']);}
url=stripslashes(item.url);song=item.name;artist=item.artist['#text'];album=item.album['#text'];$this.append(container);var $current=$this.children(':eq('+i+')');$current.find('[class=lfm_song]').append(song);$current.find('[class=lfm_artist]').append(artist);$current.find('[class=lfm_album]').append(album);$current.find('[class=lfm_art]').append("<img src='"+art+"' alt='Artwork for "+album+"'/>");$current.find('a').attr('href',url).attr('title','Listen to '+song+' on Last.FM').attr('target','_blank');if(i==(settings.number-1)){settings.onComplete.call(this);}});});});};function stripslashes(str){return(str+'').replace(/\0/g,'0').replace(/\\([\\'"])/g,'$1');}})(jQuery);

// LAST FM PLUGIN ^

// ================

$(document).ready(function(){
    $('div#lastfm').lastFM({
        username: 'dannyx0',
        apikey: '956ebd33080f02d444c6908920adddf7',
        number: 10,
        artSize: 'large',
        noart: 'images/noartwork.gif',
        onComplete: function(){
            //Done
        }
    });

    $('dt').animate({rotate: '30deg', scale: '1.25'}, 1000);

});