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>
page revision: 23, last edited: 27 Oct 2012 11:57