Building an Automated Last.fm Tunes Page with GitHub Actions

I wanted to add a “Recently Played” section to my website that automatically updates with my latest music. Instead of manually updating it every day, I built an automated system that fetches data from Last.fm and rebuilds my site daily using GitHub Actions.

Here’s what I’ll cover:

• Setting up Last.fm API integration
• Building the Tunes page with Astro
• Configuring environment variables in Cloudflare Pages
• Automating daily updates with GitHub Actions
• Using Web Scrobbler for YouTube on iOS/Mac

Why Last.fm?

Last.fm is perfect for this because it tracks everything you listen to across different platforms—Spotify, Apple Music, YouTube, and more. Once you connect your accounts, it automatically scrobbles (records) your listening history.

Getting Your Last.fm API Key

First, you’ll need a Last.fm API key:

1. Go to Last.fm API Account
2. Fill in the application details (name, description, callback URL)
3. Copy your API Key and Shared Secret

Building the Tunes Page

I’m using Astro for my site, so I created a page that fetches Last.fm data at build time. Here’s the core implementation:

Creating the Last.fm Library

First, I created a utility library to handle Last.fm API requests in src/lib/lastfm.ts:

1
const LASTFM_API_BASE = 'https://ws.audioscrobbler.com/2.0/'
2
const REQUEST_TIMEOUT_MS = 8000
3

4
async function lastFmRequest(params: Record<string, string>): Promise<any> {
5
  const apiKey = import.meta.env.PUBLIC_LASTFM_API_KEY
6
  if (!apiKey) {
7
    return null
8
  }
9

10
  try {
11
    const searchParams = new URLSearchParams({
12
      api_key: apiKey,
13
      format: 'json',
14
      ...params,
15
    })
16

17
    const url = `${LASTFM_API_BASE}?${searchParams.toString()}`
18
    const controller = new AbortController()
19
    const timeoutId = setTimeout(() => controller.abort(), REQUEST_TIMEOUT_MS)
20

21
    const response = await fetch(url, {
22
      headers: {
23
        'User-Agent': 'merox.dev/1.0',
24
      },
25
      signal: controller.signal,
26
    })
27

28
    clearTimeout(timeoutId)
29

30
    if (!response.ok) {
31
      return null
32
    }
33

34
    const data = await response.json()
35

36
    if (data.error) {
37
      return null
38
    }
39

40
    return data
41
  } catch (error) {
42
    return null
43
  }
44
}
45

46
export async function fetchRecentTracks(
47
  username?: string,
48
  limit: number = 10,
49
): Promise<LastFmTrack[]> {
50
  const user = username || import.meta.env.PUBLIC_LASTFM_USERNAME
51
  if (!user) {
52
    return []
53
  }
54

55
  const data = await lastFmRequest({
56
    method: 'user.getrecenttracks',
57
    user,
58
    limit: Math.min(limit, 200).toString(),
59
  })
60

61
  if (!data?.recenttracks?.track) {
62
    return []
63
  }
64

65
  const tracks = Array.isArray(data.recenttracks.track)
66
    ? data.recenttracks.track
67
    : [data.recenttracks.track]
68

69
  // Include tracks that have a date (played) OR are currently playing
70
  return tracks.filter((track: any) => track.date || track['@attr']?.nowplaying === 'true')
71
}

The Tunes Page Component

The page fetches data at build time and displays it in a clean, retro-style interface. Here’s the implementation in src/pages/tunes.astro:

1
---
2
import { fetchRecentTracks, fetchUserInfo } from '@/lib/lastfm'
3

4
let recentTracks: LastFmTrack[] = []
5
let userInfo = null
6
let hasLastFm = false
7

8
try {
9
  const username = import.meta.env.PUBLIC_LASTFM_USERNAME
10
  const apiKey = import.meta.env.PUBLIC_LASTFM_API_KEY
11

12
  if (username && apiKey) {
13
    hasLastFm = true
14
    const [tracksResult, userInfoResult] = await Promise.allSettled([
15
      fetchRecentTracks(username, 10),
16
      fetchUserInfo(username),
17
    ])
18

19
    recentTracks = tracksResult.status === 'fulfilled' ? tracksResult.value : []
20
    userInfo = userInfoResult.status === 'fulfilled' && userInfoResult.value ? userInfoResult.value : null
21
  }
22
} catch (error) {
23
  // Silently fail in production
24
}
25
---
26

27
<Layout class="max-w-4xl">
28
  <PageHead slot="head" title="Tunes" />
29

30
  <section>
31
    <h1>▶ recently played</h1>
32
    {hasLastFm && (
33
      <p>[updated daily at 20:00 Romania time]</p>
34
    )}
35

36
    {recentTracks.map((track, index) => (
37
      <div key={index}>
38
        <a href={track.url} target="_blank" rel="noopener">
39
          <span>{track.name}</span>
40
          <span>{track.artist['#text']}</span>
41
          {track.date && (
42
            <time>{formatLastFmDate(track.date.uts)}</time>
43
          )}
44
        </a>
45
      </div>
46
    ))}
47
  </section>
48
</Layout>

Here’s how the final Tunes page looks on my site:

Configuring Environment Variables in Cloudflare Pages

Since I’m hosting on Cloudflare Pages, I need to set environment variables:

1. Go to your Cloudflare Pages project
2. Navigate to Settings → Environment Variables
3. Add these variables:
   • PUBLIC_LASTFM_USERNAME - Your Last.fm username
   • PUBLIC_LASTFM_API_KEY - Your Last.fm API key

Here’s how the environment variables look in my Cloudflare Pages dashboard:

These variables are only accessible during the build process and won’t be exposed in your client-side JavaScript.

Automating Daily Updates with GitHub Actions

The key is getting Cloudflare to rebuild your site daily so it fetches fresh data from Last.fm. The simplest approach is to create a small commit that Cloudflare detects and triggers a rebuild automatically.

Here’s my .github/workflows/update-music.yml:

1
name: Daily Site Rebuild
2

3
on:
4
  schedule:
5
    - cron: '0 18 * * *'  # 18:00 UTC daily
6
  workflow_dispatch:
7

8
permissions:
9
  contents: write
10

11
jobs:
12
  trigger-build:
13
    runs-on: ubuntu-latest
14
    steps:
15
      - uses: actions/checkout@v4
16
        with:
17
          token: ${{ secrets.GITHUB_TOKEN }}
18

19
      - name: Trigger rebuild
20
        run: |
21
          date -u +"%Y-%m-%dT%H:%M:%SZ" > .last-build-trigger
22
          git config user.name "github-actions[bot]"
23
          git config user.email "github-actions[bot]@users.noreply.github.com"
24
          git add .last-build-trigger
25
          git commit -m "chore: daily rebuild trigger"
26
          git push

How It Works

1. Schedule: Runs daily at 18:00 UTC (20:00 Romania time in winter, 21:00 in summer)
2. Checkout: Clones the repository using the built-in GITHUB_TOKEN
3. Trigger file: Writes the current UTC timestamp to .last-build-trigger
4. Commit & Push: Commits the change and pushes to main branch
5. Cloudflare detects: The push triggers Cloudflare to rebuild the site

Setting Up the Workflow

The beauty of this approach is that it requires no secrets configuration:

1. GITHUB_TOKEN is automatically provided by GitHub Actions
2. Cloudflare is already connected to your repository (via the Pages integration)
3. Just add the workflow file and you’re done!

Setting Up Web Scrobbler for YouTube

I listen to a lot of music on YouTube, especially on iOS and Mac. To track those plays, I use Web Scrobbler, a browser extension that scrobbles music from various websites.

For Desktop (Chrome/Edge/Firefox)

1. Install Web Scrobbler extension
2. Connect your Last.fm account in the extension settings
3. Enable scrobbling for YouTube
4. That’s it—it works automatically!

For iOS/Mac Safari

Safari doesn’t support extensions the same way, but here’s what I do:

Option 1: Use a different browser

• Install Chrome or Firefox on your Mac
• Use Web Scrobbler extension there
• Most YouTube listening happens on desktop anyway

Option 2: Manual scrobbling (for important tracks)

• Use the Last.fm mobile app to manually scrobble
• Or use Open Scrobbler for quick manual entries

Option 3: Use MusicBrainz Picard (for downloaded music)

• If you download music, Picard can scrobble automatically
• Works great for local music libraries

How It All Works Together

Here’s the complete flow:

1. You listen to music → Last.fm tracks it (via Spotify, Apple Music, Web Scrobbler, etc.)
2. GitHub Actions runs daily at 18:00 UTC → Updates .last-build-trigger with current timestamp
3. Commit pushed to main → Cloudflare detects the new commit
4. Cloudflare rebuilds → Astro fetches fresh data from Last.fm API during build
5. Site updates → Your Tunes page shows the latest tracks

The whole process is fully automated with zero maintenance. No API tokens to manage, no secrets to rotate—just a simple Git commit that keeps your music page fresh.

Troubleshooting

Tracks Not Updating

• Check that your Last.fm account is actually receiving scrobbles
• Verify environment variables are set correctly in Cloudflare Pages
• Check GitHub Actions logs to see if the workflow ran successfully
• Verify the .last-build-trigger file is being updated (check recent commits)

GitHub Actions Workflow Failing

• Ensure the workflow has permissions: contents: write to push commits

• Check if branch protection rules are blocking the push
• Verify the repository is connected to Cloudflare Pages

Build Failing

• Ensure your Last.fm API key is valid
• Check that PUBLIC_LASTFM_USERNAME matches your actual Last.fm username
• Review Cloudflare Pages build logs for specific errors

Web Scrobbler Not Working

• Make sure the extension is enabled for the website
• Check that you’re logged into Last.fm in the extension
• Try refreshing the page after enabling scrobbling

Final Thoughts

This setup has been running smoothly for months. The page updates automatically every day, and I never have to think about it. It’s a great example of how automation can make your website more dynamic without adding maintenance overhead.

If you’re interested in seeing it in action, check out my Tunes page. The code is also available in my GitHub repository if you want to see the full implementation.

Resources

• Last.fm API Documentation
• Web Scrobbler Extension
• GitHub Actions Documentation
• Cloudflare Pages Environment Variables