Connecting Apple Music to My Website

March 07, 2025

I always wanted a way to display my currently playing song from Apple Music on my website. Spotify has an easy way to do this, but Apple Music? Not so much. After some digging, I found a workaround using Last.fm, and here’s how I did it.

The Problem

Unlike Spotify, Apple Music doesn’t have a direct way to show what you're listening to in real time on a website. Their API requires authentication and is complicated to set up and I don't own a Macbook. So, I needed another way to fetch my “Now Playing” song.

Why I Wanted This Feature

Music is a huge part of my life, and I love sharing what I’m listening to. I wanted my website to feel more personal, almost like a live journal of my music taste. Having a "Now Playing" section adds a dynamic touch to my site it changes with my mood, my day, and what I’m vibing with at the moment. Plus, it just looks cool!

The Solution: Last.fm Scrobbling

Luckily, Last.fm can track songs played on Apple Music if you enable scrobbling. This means every time I play a song, it gets logged on my Last.fm account. And Last.fm provides an API that lets me fetch this data and display it on my website.

How I Set It Up

Step 1: Get a Last.fm Account and API Key

I created an account on Last.fm and went to their developer section to get an API key. This is needed to fetch my listening history.

Step 2: Enable Scrobbling on Apple Music

Since Apple Music doesn’t scrobble by default, I had to use a third-party app like QuietScrob (for iOS) and if you have Macbook use NepTunes (for Mac) to send tracks to Last.fm.

Step 3: Fetch Now Playing Data with JavaScript

Once my songs were being logged on Last.fm, I wrote a simple JavaScript function to grab the latest track and display it on my site. Here’s what it does:

• Requests my recent tracks from the Last.fm API.
• Checks if the latest song is still playing.
• Updates my website with the song name, artist, and album art.

Step 4: Add It to My Website

I inserted this script into my HTML:

            
                <div class="currently-listening">
                    <img id="album-art" class="album-art" src="" alt="Album Art">
                    <span id="current-song">Fetching now playing...</span>
                </div>

                <script>
                const apiKey = "YOUR_LASTFM_API_KEY"; 
                const username = "YOUR_LASTFM_USERNAME";
                const url = `https://ws.audioscrobbler.com/2.0/?method=user.getrecenttracks&user=${username}&api_key=${apiKey}&format=json`;

                async function fetchNowPlaying() {
                    try {
                        const response = await fetch(url);
                        const data = await response.json();
                        const track = data.recenttracks.track[0];
                        const artist = track.artist["#text"];
                        const song = track.name;
                        const albumArt = track.image[2]["#text"];
                        const isPlaying = track["@attr"]?.nowplaying;

                        let nowPlayingText = isPlaying 
                            ? `🎵 Now Playing: <strong>${song}</strong> by <strong>${artist}</strong>` 
                            : `Last Played: <strong>${song}</strong> by <strong>${artist}</strong>`;

                        document.getElementById("current-song").innerHTML = nowPlayingText;
                        document.getElementById("album-art").src = albumArt;
                        document.getElementById("album-art").style.display = albumArt ? "block" : "none";
                    } catch (error) {
                        console.error("Error fetching data:", error);
                        document.getElementById("current-song").innerHTML = "Error loading Now Playing data.";
                    }
                }

                fetchNowPlaying();
                setInterval(fetchNowPlaying, 10000);
                </script>
            
        

The Final Result

Now, every time I play a song on Apple Music, it updates my website in real-time with the current track and album art. If nothing is playing, it shows my last played song instead.

Lessons Learned

• Apple Music makes things unnecessarily hard compared to Spotify.
• Last.fm is still useful in 2025!
• Sometimes, the best solutions are workarounds.

If you want this feature on your site, just grab a Last.fm API key, enable scrobbling, and use the code above. Hope this helps!