madkoding/lastfm-spotify.md

## lastfm-spotify.md

      
    Raw
  

              lastfm-spotify.md
            
          
    Como crear una pagina que muestre lo que estas escuchando en spotify

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 gap-4 justify-center items-center">
            <div class="flex-shrink-0">
                <a href="#" class="block relative">
                    <img id="artwork" alt="Album Artwork" src="/cd.png" 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 Title</span>
                <span id="artist" class="text-gray-50 text-xs">Artist Name</span>
            </div>
        </div>
    </div>

    <script src="lastfm.js"></script>
</body>
</html>
Javascript

document.addEventListener("DOMContentLoaded", function () {
    const artwork = document.getElementById("artwork");
    const song = document.getElementById("song");
    const artist = document.getElementById("artist");

    const url = "https://ws.audioscrobbler.com/2.0/?";
    const apiKey = "INSERT YOUR LAST.FM API KEY HERE";

    async function setTrackData() {
        try {
            const params = new URLSearchParams({
                method: "user.getrecenttracks",
                user: "n1ckdm",
                api_key: apiKey,
                format: "json",
                from: Math.floor(new Date().getTime() / 1000) - 10,
            });

            const response = await fetch(`${url}${params}`);
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }

            const data = await response.json();
            let tracks = data.recenttracks.track;

            if (!Array.isArray(tracks)) {
                tracks = [tracks];
            }

            if (tracks.length > 0) {
                const track = tracks[0];
                artwork.src = track.image[1]["#text"];
                song.innerHTML = `<a href="${track.url}" target="_blank">${track.name}</a>`;
                artist.textContent = track.artist["#text"];
            }

            setTimeout(setTrackData, 10000);
        } catch (e) {
            console.error("Error fetching track data: ", e);
            setTimeout(setTrackData, 60000);
        }
    }

    setTrackData();
});