Last.fm Now Playing Widget. Just add to a <script> and <style> tag on your site, or load from files, and call getNowPlaying() on page load.
.now-playing { | |
position: absolute; | |
right: 20px; | |
top: calc(50vh - (min(20vw, calc(100vh - 30px)) / 2, 400px)); | |
z-index: 1001; | |
} | |
a.now-playing { | |
opacity: 1; | |
border: 0; | |
} | |
a.now-playing:hover img { | |
transform: scale(1.02) translateX(-0.2vw) perspective(500px) rotate3d(0, -1, 0.01, 6deg); | |
} | |
.now-playing .np-metadata > span { | |
display: block; | |
font-size: 14px; | |
letter-spacing: -0.01em; | |
font-weight: 500; | |
line-height: 180%; | |
text-align: right; | |
} | |
.now-playing .np-metadata { | |
margin-top: 16px; | |
opacity: 0; | |
transition: opacity 0.4s ease-out; | |
transition-delay: 0.5s; | |
} | |
.now-playing.loaded .np-metadata { | |
opacity: 1; | |
} | |
.now-playing img { | |
opacity: 0; | |
transform: scale(0.97) translateX(10px) perspective(500px); | |
border-radius: 2px; | |
width: min(20vw, calc(100vh - 30px), 400px); | |
box-shadow: 0 0 25px rgba(0,0,0,0.2); | |
transition: all 1s cubic-bezier(0.13, 0.95, 0, 1), transform 2s cubic-bezier(0.13, 0.95, 0, 1); | |
} | |
.now-playing.loaded img { | |
opacity: 1; | |
transform: perspective(500px) rotate3d(0, -1, 0, 4deg); | |
} | |
.now-playing .np-metadata .np-heading { | |
font-size: 11px; | |
font-weight: 900; | |
opacity: 0.5; | |
text-transform: uppercase; | |
letter-spacing: 0.11em; | |
} | |
.now-playing .np-metadata .np-roon { | |
width: 10px; | |
opacity: 0.5; | |
} | |
.now-playing .np-metadata .breather { | |
margin-right: 8px; | |
display: inline-block; | |
animation: pulsate 5s linear 0s infinite; | |
} | |
@keyframes pulsate { | |
0% { transform: scale(0.2, 0.2) rotate(0deg); opacity: 0.0; } | |
50% { transform: scale(1, 1) rotate(50deg); opacity: 1; } | |
80% { transform: scale(1.8, 1.8) rotate(80deg); opacity: 0.2; } | |
100% { transform: scale(4, 4) rotate(100deg); opacity: 0; } | |
} |
/* ********************************************************************** */ | |
/* OLD SCHOOL CURRENT PLAYING STUFF */ | |
var LFM_API = "https://ws.audioscrobbler.com/2.0/"; | |
var LFM_KEY = "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"; // Get one at https://secure.last.fm/login?next=/api/account/create | |
var LFM_USER = "trisweb"; | |
function getNowPlaying() { | |
var recentTracksUrl = | |
LFM_API+"?method=user.getrecenttracks&user="+LFM_USER+"&api_key="+LFM_KEY+"+&format=json&limit=1"; | |
if (window.XMLHttpRequest) { | |
httpRequest = new XMLHttpRequest(); | |
} else if (window.ActiveXObject) { | |
httpRequest = new ActiveXObject("Microsoft.XMLHTTP"); | |
} | |
httpRequest.onreadystatechange = function() { | |
if (httpRequest.readyState === XMLHttpRequest.DONE) { | |
if (httpRequest.status === 200) { | |
// All set | |
var response = JSON.parse(httpRequest.responseText); | |
console.log(response); | |
var currentTrack = response.recenttracks.track[0]; | |
// Check if it's the same, if not then rerender | |
if (!window.nowPlaying || window.nowPlaying.mbid != currentTrack.mbid) { | |
window.nowPlaying = currentTrack; | |
renderNowPlaying(currentTrack); | |
} | |
setTimeout(getNowPlaying, 60*1000); | |
} else { | |
console.log('There was a problem with the last.fm request.'); | |
} | |
} | |
}; | |
httpRequest.open('GET', recentTracksUrl, true); | |
httpRequest.send(); | |
} | |
var nowPlayingNode = null; | |
function renderNowPlaying(track) { | |
console.log(track); | |
if (nowPlayingNode) { | |
nowPlayingNode.remove(); | |
} | |
nowPlayingNode = document.createElement("a"); | |
nowPlayingNode.setAttribute("class", "now-playing"); | |
var imageurl = track.image.slice(-1)[0]["#text"]; | |
var nowPlayingImage = document.createElement("img"); | |
nowPlayingImage.setAttribute("src", imageurl); | |
nowPlayingNode.appendChild(nowPlayingImage); | |
// Add more stuff to the display | |
var currently = track["@attr"] && track["@attr"].nowplaying == "true"; | |
var metadata = document.createElement("div"); | |
metadata.setAttribute("class", "np-metadata"); | |
metadata.innerHTML = | |
"<span class=\"np-heading\">" + (currently ? "Now Playing" : "Latest Track") + "</span>" + | |
"<span class=\"np-title\"><strong>"+track.name+"</strong></span>" + | |
"<span class=\"np-artist\">"+track.artist["#text"]+"</span>" + | |
(currently ? | |
"<span class=\"np-date\"><span class=\"breather\">◉</span> Currently Playing</span>" : | |
"<span class=\"np-date\">"+track.date["#text"]+"</span>"); | |
nowPlayingNode.appendChild(metadata); | |
nowPlayingNode.setAttribute("href", track.url); | |
document.body.appendChild(nowPlayingNode); | |
setTimeout(function() { | |
nowPlayingNode.setAttribute("class", "now-playing loaded"); | |
}, 100); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This comment has been minimized.
This renders on the right-hand side of the page, scaled (somewhat responsively) to window width and height. But you can adjust the css at the top under
.now-playing
and the width under.now-playing img
to change its position and size.