Last.fm API Test

Most recent track

simple text with date formatting

Source

<html>
<head></head>
<body>
 
<script type="text/javascript" >
 
function calculateDateAgo(secAgo) {
 var agoString, agoRange, agoScaled;
 if(secAgo >= (agoRange = 60*60*24)) 
   agoString = (agoScaled = Math.floor(secAgo/agoRange))+" "+(agoScaled>1?"days":"day") + " ago"
 else if(secAgo >= (agoRange = 60*60))
   agoString = (agoScaled = Math.floor(secAgo/agoRange))+" "+(agoScaled>1?"hours":"hour") + " ago"
 else if(secAgo >= (agoRange = 60))
   agoString = (agoScaled = Math.floor(secAgo/agoRange))+" "+(agoScaled>1?"minutes":"minute") + " ago"
 else if(secAgo >= -60)
   agoString = "listening just now";
 else
   agoString = "soon ;)";
 return agoString
}
 
function lfmMostRecentTrack(JSONdata) {
 try {
 var oTrack = (new Array().concat(JSONdata.recenttracks.track))[0];
 document.getElementById("lfmMostRecentTrackArtist").innerHTML = oTrack.artist["#text"];
 document.getElementById("lfmMostRecentTrackTitle").href = oTrack.url;
 document.getElementById("lfmMostRecentTrackTitle").innerHTML = oTrack.name;
 document.getElementById("lfmMostRecentTrackDate").innerHTML = (typeof oTrack.date=="undefined"?"now playing":calculateDateAgo(new Date().getTime()/1000 - oTrack.date.uts));
 document.getElementById("lfmMostRecentTrack").style.visibility = "visible";
 } catch(e) {}
}
</script>
 
<div id="lfmMostRecentTrack" style="visibility:hidden">
<a id="lfmMostRecentTrackTitle" href="" target="new"></a><br/>by <span id="lfmMostRecentTrackArtist"></span><br/><span id="lfmMostRecentTrackDate" style="font-size:80%"></span>
</div>
 
<script type="text/javascript" src="http://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=HodgeStar&api_key=54f8f15133336606e882fdf20148d123&limit=1&format=json&callback=lfmMostRecentTrack"></script>
 
</body>
</html>





with cover art and album info

Source

<html>
<head>
<style>
 #lfmMostRecentTrack {}
 #lfmMostRecentTrackImage {display:block;float:left;padding:0px 10px;width:64px; height:64px}
 #lfmMostRecentTrackPlayIcon {vertical-align:bottom;display:none}
</style>
</head>
 
<body >
 
<script type="text/javascript" >
 
function lfmMostRecentTrack(JSONdata) {
  var oTrack = (new Array().concat(JSONdata.recenttracks.track))[0];
  if(oTrack.image[1]["#text"] != "")
    document.getElementById("lfmMostRecentTrackImage").src = oTrack.image[1]["#text"] ;
  if(oTrack.streamable == "1")
    document.getElementById("lfmMostRecentTrackPlayIcon").style.display = "inline";
  document.getElementById("lfmMostRecentTrackArtist").innerHTML = oTrack.artist["#text"];
  document.getElementById("lfmMostRecentTrackTitle").href = oTrack.url;
  document.getElementById("lfmMostRecentTrackTitle").innerHTML = oTrack.name;
  document.getElementById("lfmMostRecentTrackAlbum").innerHTML = oTrack.album["#text"];
  document.getElementById("lfmMostRecentTrackDate").innerHTML = (typeof oTrack.date=="undefined"?"now playing":oTrack.date["#text"]);
}
 
</script>
 
<div id="lfmMostRecentTrack">
<img id="lfmMostRecentTrackImage" src="http://cdn.last.fm/flatness/catalogue/noimage/2/default_album_medium.png"/>
<span id="lfmMostRecentTrackDate"></span><br/>
<span id="lfmMostRecentTrackArtist"></span> - <img id="lfmMostRecentTrackPlayIcon" src="http://cdn.last.fm/flatness/global/icon_play.png"/> <a id="lfmMostRecentTrackTitle" href="" target="new"></a><br/>
<span id="lfmMostRecentTrackAlbum"></span>
</div>
 
<script type="text/javascript" src="http://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=HodgeStar&api_key=54f8f15133336606e882fdf20148d123&limit=1&format=json&callback=lfmMostRecentTrack"></script>
 
</body>
</html>





List of Recent Tracks

Table

Source

<html>
<head>
<style>
 body {background-color:#1f1f1f; color: #ffffff; font-family: helvetica, arial, sans-serif;}
 body a {color: #92d6a8; text-decoration: none;}
 body a:hover {color: #92d6a8; text-decoration: underline;}
 body p { font-size:120%}
 
 #lfmRecentTracks {width:220px; border-collapse:collapse}
 td.lfmTrackImageCell {text-align:center;padding-right:3px;width:34px;background:transparent url(http://cdn.last.fm/flatness/icons/res/3/track.png) no-repeat scroll 50% 50%}
 img.lfmTrackImage { width:34px; height:34px}
 td.lfmTrackInfoCell { padding-left:3px}
 a.lfmTrackTitle {font-size:80%}
 span.lfmTrackArtist {display:block;font-size:70%}
 span.lfmTrackDate {display:block;font-size:60%}
</style>
</head>
<body>
 
<script type="text/javascript">
 
function calculateDateAgo(secAgo) {
 var agoString, agoRange, agoScaled;
 if(secAgo >= (agoRange = 60*60*24)) 
   agoString = (agoScaled = Math.floor(secAgo/agoRange))+" "+(agoScaled>1?"days":"day") + " ago"
 else if(secAgo >= (agoRange = 60*60))
   agoString = (agoScaled = Math.floor(secAgo/agoRange))+" "+(agoScaled>1?"hours":"hour") + " ago"
 else if(secAgo >= (agoRange = 60))
   agoString = (agoScaled = Math.floor(secAgo/agoRange))+" "+(agoScaled>1?"minutes":"minute") + " ago"
 else if(secAgo >= -60)
   agoString = "listening just now";
 else
   agoString = "soon ;)";
 return agoString
}
 
function truncateName(name, l) {
return name.length > l ? name.substr(0,l-2) + "\u2026" : name
}
 
function lfmRecentTracks(JSONdata) {
 
try { 
 var eRow, eCell, eImg, eLink, eSpan;
 var eTable = document.getElementById("lfmRecentTracks");  
 var oTracks = new Array().concat(JSONdata.recenttracks.track);
 
 for (var i = 0; i < oTracks.length; i++) {
  eRow = eTable.insertRow(-1);
 
  //insert coverart image
  eCell = eRow.insertCell(-1)
  eCell.className = "lfmTrackImageCell";
  if(oTracks[i].image[1]["#text"] != "") {
   eImg = document.createElement("img");
   eCell.appendChild(eImg);
   eImg.src = oTracks[i].image[1]["#text"];
   eImg.className = "lfmTrackImage";
  }
 
  //insert track link
  eCell = eRow.insertCell(-1)
  eCell.className = "lfmTrackInfoCell";
  eLink = document.createElement("a");
  eLink.appendChild(document.createTextNode( truncateName(oTracks[i].name, 25) ));
  eCell.appendChild(eLink);
  eLink.href = oTracks[i].url;
  eLink.target = "new";
  eLink.className = "lfmTrackTitle";
 
  //insert artist name
  eSpan = document.createElement("span");
  eSpan.appendChild(document.createTextNode("by " + truncateName(oTracks[i].artist["#text"], 22) ));
  eCell.appendChild(eSpan);
  eSpan.className = "lfmTrackArtist";
 
  //insert date
  eSpan = document.createElement("span");
  eCell.appendChild(eSpan);
  eSpan.appendChild(document.createTextNode(   (typeof oTracks[i].date=="undefined"?"now playing":calculateDateAgo(new Date().getTime()/1000 - oTracks[i].date.uts))  ));  
  eSpan.className = "lfmTrackDate"; 
 }  
} catch(e) {}
}
</script>
<p>Last Played</p>
<table id="lfmRecentTracks"><tbody></tbody></table>
<script type="text/javascript" src="http://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=HodgeStar&api_key=54f8f15133336606e882fdf20148d123&limit=4&format=json&callback=lfmRecentTracks"></script>
 
</body>
</html>





Template-like with Divs and %placeholders%

Source

<html>
<head>
<style>
 body {background-color:#1f1f1f; color: #ffffff; font-family: helvetica, arial, sans-serif;}
 body a {color: #92d6a8; text-decoration: none;}
 body a:hover {color: #92d6a8; text-decoration: underline;}
 body p { font-size:120%}
 
 #lfmRecentTracks {width:220px;}
 img.lfmTrackImage {margin:4px ;width:34px; height:34px; float:left}
 div.lfmTrack { padding-left:0px}
 span.lfmTrackTitle { font-size:80%}
 span.lfmTrackArtist {display:block;font-size:70%}
 span.lfmTrackDate {display:block;font-size:60%}
</style>
</head>
<body>
 
<script type="text/javascript">
 
function calculateDateAgo(secAgo) {
 var agoString, agoRange, agoScaled;
 if(secAgo >= (agoRange = 60*60*24)) 
   agoString = (agoScaled = Math.floor(secAgo/agoRange))+" "+(agoScaled>1?"days":"day") + " ago"
 else if(secAgo >= (agoRange = 60*60))
   agoString = (agoScaled = Math.floor(secAgo/agoRange))+" "+(agoScaled>1?"hours":"hour") + " ago"
 else if(secAgo >= (agoRange = 60))
   agoString = (agoScaled = Math.floor(secAgo/agoRange))+" "+(agoScaled>1?"minutes":"minute") + " ago"
 else if(secAgo >= -60)
   agoString = "listening just now";
 else
   agoString = "soon ;)";
 return agoString
}
 
function truncateName(name, l) {
return name.length > l ? name.substr(0,l-2) + "\u2026" : name
}
 
function lfmRecentTracks(JSONdata) {
 
try { 
 var oTracks = new Array().concat(JSONdata.recenttracks.track);
 var eDiv = document.getElementById("lfmRecentTracks");
 var sTemplate = eDiv.innerHTML;
 var sHTML = "";
 
 for (var i =  typeof oTracks[0]['@attr'] == "undefined"  ? 0 : 1; i < oTracks.length; i++) {
 
  sHTML =  sHTML
        + sTemplate
          .replace("%lfmTrackImageUrl%", oTracks[i].image[1]["#text"] != "" ? oTracks[i].image[1]["#text"] : "http:\/\/cdn.last.fm\/flatness\/icons\/res\/3\/track.png" )
          .replace("%lfmTrackTitle%",  truncateName(oTracks[i].name,            25))
          .replace("%lfmTrackUrl%",                 oTracks[i].url)
          .replace("%lfmTrackArtist%", truncateName(oTracks[i].artist["#text"], 22))
          .replace("%lfmTrackDate%", calculateDateAgo(new Date().getTime()/1000 - oTracks[i].date.uts)  );
 }  
eDiv.innerHTML = sHTML;
eDiv.style.visibility = "visible";
} catch(e) {}
 
}
</script>
<p>Last Played</p>
<div id="lfmRecentTracks" style="visibility:hidden">
 <div class="lfmTrack">
   <img class="lfmTrackImage" src="%lfmTrackImageUrl%" />
   <span class="lfmTrackTitle"><a href="%lfmTrackUrl%">%lfmTrackTitle%</a></span>
   <span class="lfmTrackArtist">by %lfmTrackArtist%</span>
   <span class="lfmTrackDate">%lfmTrackDate%</span>
 </div>
</div>
<script type="text/javascript" src="http://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=HodgeStar&api_key=54f8f15133336606e882fdf20148d123&limit=5&format=json&callback=lfmRecentTracks"></script>
 
</body>
</html>
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License