/ index.html
index.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Now Playing Widget</title> 7 <link rel="stylesheet" href="styles.css"> 8 </head> 9 <body> 10 <div class="widget"> 11 <!-- <a href="https://www.last.fm/user/Kirito139" style="color: inherit; text-decoration: none; display: inline-block; font-size: 8px;"> 12 <img id="lastfm-logo" src="https://raw.githubusercontent.com/Kirito139/lastfm_now_playing/refs/heads/main/lastfm.png"> <span>Kirito139's Scrobbles:</span> 13 </a> --> 14 <a href="https://www.last.fm/user/Kirito139" target="_blank" class="lastfm-link"> 15 <img id="lastfm-logo" src="https://raw.githubusercontent.com/Kirito139/lastfm_now_playing/refs/heads/main/lastfm.png" alt="Last.fm logo"> 16 <span>Kirito139's Scrobbles:</span> 17 </a> 18 <div class="current-song" id="current-song"> 19 <img id="current-song-art" src="" alt="Current song art"> 20 <div class="current-song-details"> 21 <div id="current-song-info">Loading scrobbles...</div> <!-- Text is now in a div --> 22 <div id="now-playing-text"></div> 23 </div> 24 </div> 25 <ul class="scrobbles" id="scrobbles"></ul> 26 </div> 27 <script> 28 const API_KEY = '55a6bee68905f489858d708932ae824e'; 29 const USERNAME = 'Kirito139'; 30 const currentSongDiv = document.getElementById('current-song'); 31 const currentSongArt = document.getElementById('current-song-art'); 32 const scrobblesList = document.getElementById('scrobbles'); 33 34 async function fetchScrobbles() { 35 const response = await fetch(`https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=${USERNAME}&api_key=${API_KEY}&format=json&limit=5`); 36 const data = await response.json(); 37 return data.recenttracks.track; 38 } 39 40 async function updateWidget() { 41 const tracks = await fetchScrobbles(); 42 if (tracks.length > 0) { 43 const nowPlaying = tracks[0]['@attr']?.nowplaying ? tracks[0] : tracks.find(track => track['@attr']?.nowplaying); 44 /*if (nowPlaying) { 45 currentSongDiv.innerHTML = ` 46 <img src="${nowPlaying.image[2]['#text']}" alt="${nowPlaying.name} album art"> 47 <div id="current-song-info">${nowPlaying.artist['#text']} - ${nowPlaying.name}</div> 48 <div id="now-playing-text" class="now-playing">Now Playing</div> 49 `; 50 } else { 51 currentSongDiv.innerHTML = '<div>No song currently playing</div>'; 52 }*/ 53 if (nowPlaying) { 54 currentSongDiv.innerHTML = ` 55 <img src="${nowPlaying.image[1]['#text']}" alt="${nowPlaying.name} album art"> 56 <div class="current-song-details"> 57 <div id="current-song-info">${nowPlaying.name} - ${nowPlaying.artist['#text']}</div> 58 <div id="now-playing-text" class="now-playing">Now Scrobbling</div> 59 </div> 60 `; 61 } else { 62 currentSongDiv.innerHTML = '<div>No song currently playing</div>'; 63 } 64 scrobblesList.innerHTML = ''; 65 tracks.forEach((track, index) => { 66 if (!track['@attr']?.nowplaying) { 67 const listItem = document.createElement('li'); 68 listItem.className = 'scrobble'; 69 const timeAgo = getTimeAgo(track.date.uts); 70 /*listItem.innerHTML = ` 71 <img src="${track.image[2]['#text']}" alt="${track.name} album art"> 72 <div>${track.artist['#text']} - ${track.name}</div> 73 <div class="time-ago">${timeAgo}</div> 74 `;*/ 75 listItem.innerHTML = ` 76 <img src="${track.image[1]['#text']}" alt="${track.name} album art"> 77 <div class="scrobble-details"> 78 <div class="scrobble-song">${track.name} - ${track.artist['#text']}</div> 79 <div class="time-ago">${timeAgo}</div> 80 </div> 81 `; 82 scrobblesList.appendChild(listItem); 83 } 84 }); 85 } 86 } 87 88 function getTimeAgo(timestamp) { 89 const now = Math.floor(Date.now() / 1000); 90 const seconds = now - timestamp; 91 const minutes = Math.floor(seconds / 60); 92 const hours = Math.floor(minutes / 60); 93 const days = Math.floor(hours / 24); 94 95 if (days > 0) return `${days} day${days > 1 ? 's' : ''} ago`; 96 if (hours > 0) return `${hours} hour${hours > 1 ? 's' : ''} ago`; 97 if (minutes > 0) return `${minutes} minute${minutes > 1 ? 's' : ''} ago`; 98 return 'Just now'; 99 } 100 setInterval(updateWidget, 30000); // Update every 30 seconds 101 updateWidget(); // Initial fetch 102 </script> 103 </body> 104 </html>