n1ckdm/nowplaying.html

## nowplaying.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
    <title>Spotify Now Playing</title>
  </head>
  <body>
    <div class="bg-gray-600 bg-opacity-50 p-4">
      <div class="flex-row gap-4 flex justify-center items-center">
        <div class="flex-shrink-0">
          <a href="#" class="block relative">
            <img
              id="artwork"
              alt="profil"
              src="/images/person/1.jpg"
              class="mx-auto object-cover rounded h-16 w-16"
            />
          </a>
        </div>
        <div class="flex flex-col">
          <span
            id="song"
            class="text-gray-200 dark:text-white text-lg font-medium"
          >
            Song
          </span>
          <span id="artist" class="text-gray-50 text-xs"> CTO </span>
        </div>
      </div>
    </div>

    <script>
      var url = "https://ws.audioscrobbler.com/2.0/?";

      function setTrackData() {
        let xhr = new XMLHttpRequest();
        xhr.open(
          "GET",
          url +
            new URLSearchParams({
              method: "user.getrecenttracks",
              user: "n1ckdm",
              api_key: "INSERT YOUR LAST.FM API KEY HERE",
              format: "json",
              from: new Date().getTime() / 1000 - 10,
            })
        );

        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4) {
            if (xhr.status === 200) {
              const tracks = JSON.parse(xhr.responseText).recenttracks.track;
              if (tracks.length > 0) {
                const track = tracks[0];
                console.log(track);
                let imageParent = document.getElementById("artwork");
                imageParent.src = track.image[1]["#text"];
                let song = document.getElementById("song");
                song.innerHTML = track.name;
                let artist = document.getElementById("artist");
                artist.innerHTML = track.artist["#text"];
                setTimeout(setTrackData, 10000);
              }
            } else {
              setTimeout(setTrackData, 60000);
            }
          }
        };
        xhr.send();
      }

      setTrackData();
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<script src="https://cdn.tailwindcss.com"></script>
	<title>Spotify Now Playing</title>
	</head>
	<body>
	<div class="bg-gray-600 bg-opacity-50 p-4">
	<div class="flex-row gap-4 flex justify-center items-center">
	<div class="flex-shrink-0">
	<a href="#" class="block relative">
	<img
	id="artwork"
	alt="profil"
	src="/images/person/1.jpg"
	class="mx-auto object-cover rounded h-16 w-16"
	/>
	</a>
	</div>
	<div class="flex flex-col">
	<span
	id="song"
	class="text-gray-200 dark:text-white text-lg font-medium"
	>
	Song
	</span>
	<span id="artist" class="text-gray-50 text-xs"> CTO </span>
	</div>
	</div>
	</div>

	<script>
	var url = "https://ws.audioscrobbler.com/2.0/?";

	function setTrackData() {
	let xhr = new XMLHttpRequest();
	xhr.open(
	"GET",
	url +
	new URLSearchParams({
	method: "user.getrecenttracks",
	user: "n1ckdm",
	api_key: "INSERT YOUR LAST.FM API KEY HERE",
	format: "json",
	from: new Date().getTime() / 1000 - 10,
	})
	);

	xhr.onreadystatechange = function () {
	if (xhr.readyState === 4) {
	if (xhr.status === 200) {
	const tracks = JSON.parse(xhr.responseText).recenttracks.track;
	if (tracks.length > 0) {
	const track = tracks[0];
	console.log(track);
	let imageParent = document.getElementById("artwork");
	imageParent.src = track.image[1]["#text"];
	let song = document.getElementById("song");
	song.innerHTML = track.name;
	let artist = document.getElementById("artist");
	artist.innerHTML = track.artist["#text"];
	setTimeout(setTrackData, 10000);
	}
	} else {
	setTimeout(setTrackData, 60000);
	}
	}
	};
	xhr.send();
	}

	setTrackData();
	</script>
	</body>
	</html>