Now playing - Last.fm

index.html

Only displays when you're currently listening to music.<br>
Update "username" in JavaScript with your Last.fm username. 


<div id="last">
  <p><a href="http://www.last.fm/user/comic_coder/now"><img id="artwork" src=""></a></p><div id="track"></div>
</div>

now-playing-last-fm.markdown

Now playing - Last.fm

A Pen by Jason Stallings on CodePen.

License.

script.js

//Replace with your Last.fm username.
username="comic_coder";

$("#last a").attr("href", "http://www.last.fm/user/" + username + "/now");

$.get( "http://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=" + username + "&api_key=1f633977acf0e2d0630ec11dbc350d3e&format=json", function( data ) 
{
	if (typeof data.recenttracks.track[0]["@attr"] != "undefined")
	{
	    artist=data.recenttracks.track[0].artist["#text"];
    	track=data.recenttracks.track[0].name;
    	album=data.recenttracks.track[0].album["#text"];
    	artwork=data.recenttracks.track[0].image[1]["#text"];
    	$("#artwork").attr("src", artwork);
   	  $("#track").html(track + "<br>" + artist + "<br><br>" + album);
    	$("#last").fadeIn("slow");
	}
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

#last
{
  display:none;
  position:fixed;
  bottom:0px;
  right:0px;
  width:200px;
}

#last img
{
    padding-right:5px;
}

#last p
{
  float:left;
}

#last div
{
  margin:16px;
}