every story has a song.

Writing has a mood, and music says it faster than a paragraph can. This step lets every article on your site carry a theme song: the artist and title sit in the bar at the top of the article, next to a play button. Readers with Apple Music hear the whole song right there. The song plays through Apple MusicKit, using a key from your own Apple Developer account.

Where	What readers see	How you add it
The bar at the top of an article	Its theme song, with a play button	appleMusicUrl on the article
Inside an article	A song player between paragraphs	A music section
Next to every player	The Listen on Apple Music badge	Nothing. It is already there

WhereThe bar at the top of an article

What readers seeIts theme song, with a play button

How you add itappleMusicUrl on the article

WhereInside an article

What readers seeA song player between paragraphs

How you add itA music section

WhereNext to every player

What readers seeThe Listen on Apple Music badge

How you add itNothing. It is already there

It costs $99 a year — MusicKit keys come with the Apple Developer Program. If you build an iPhone app later, it is the same membership
Readers need Apple Music for the full song — the first time someone presses play, Apple asks them to sign in. Your site never sees their account
Each song is optional — an article without a theme song shows no player. Skip this step, and leave theme songs off your articles

BUILD.

✓ Success: you pressed play on your own article and heard the song.

this is a work in progress

An Apple Developer Program membership — join at developer.apple.com/programs. Approval can take a day or two, so start early
Your site name — from Your identity. It is the name Apple shows readers when it asks them to allow access
An article to try it on — from Your first article

1️⃣ Tell Apple What Will Play Music

Apple calls this a Media ID: a name for the thing that will use Apple Music, here your website. You make it once.

Sign in at developer.apple.com/account and open Certificates, Identifiers & Profiles
Click Identifiers in the sidebar, then the + button
Choose Media IDs and click Continue
For the description, type your site name. For the identifier, type your domain backwards with media. in front, like media.com.yourname
Check MusicKit, click Continue, then Register

2️⃣ One Key File, Three Values

Now make the key your site signs with. Apple gives you the file once, so have a safe place ready, like your password manager.

Still in Certificates, Identifiers & Profiles, click Keys in the sidebar, then the + button
Name it after your site, like yourname music
Check Media Services. If you have more than one Media ID, click Configure and choose the one from step 1
Click Continue, then Confirm
Click Download. You get a file named like AuthKey_ABC123DEFG.p8. Save it now: Apple will not let you download it again
Click the key in the list. The 10 characters under its name are your Key ID
Click Membership in the sidebar. The 10 characters under your team name are your Team ID

Open the .p8 file in TextEdit (or Notepad). Copy all of it, including the BEGIN and END lines, and paste it into .env between the quotes. Add the same three to Vercel's Environment Variables, then redeploy:

bash

# .env
APPLE_MUSIC_TEAM_ID="ABC123DEFG"     # Membership
APPLE_MUSIC_KEY_ID="XYZ987WVUT"      # under the key name
APPLE_MUSIC_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----
MIGTAgEAMBMGByqGSM49...
-----END PRIVATE KEY-----"

Check it worked: open /api/musickit-token on your site, like localhost:3000/api/musickit-token. A long token means your site can talk to Apple Music. An error sends you to the list at the end.

3️⃣ Give One Article a Theme Song

In Apple Music, find the song. Click ••• next to the song (not the album), then Share → Copy Link
Open your article file in src/app/constants/editorial-articles/articles/
Below the line with date:, add the link as appleMusicUrl, like the example below
Save and open the article. The bar at the top shows the artist and title, with a play button

typescript

// the theme song, in the bar at the top
  date: '2026-09-30',
  appleMusicUrl: 'https://music.apple.com/us/album/dtmf/1787022393?i=1787023936',

// a song inside the article, as one of its sections
  {
    id: 'mood',
    type: 'music',
    content: 'What I had on while writing this.',
    metadata: { appleMusicUrl: 'https://music.apple.com/us/song/dtmf/1787023936' }
  },

“The song says what the headline cannot.”
— unparty-app

⚖️ Apple's Rules, Already Followed

Apple lets you use Apple Music on your site if you play by a few rules. Your copy already does. Keep it that way:

Readers press play — music never starts by itself
The badge stays — the Listen on Apple Music badge appears next to every player. Do not remove or restyle it
The fine print stays — your footer credits Apple Music, and your privacy policy says how Apple Music sign-in works. Keep both when you edit those pages
Never charge for the music — you can sell your work, but not access to the songs

⚠️ Good to Know

The key does not expire — your site makes a fresh pass from it every few hours. If the .p8 file ever leaks, revoke the key in Keys and make a new one
Readers without Apple Music — they see the song and the badge. Pressing play asks them to sign in to Apple Music first
The songs that came with your copy — a few articles from the template use songs from src/data/musicTracks.json. Change those articles, or the list, to your own songs

🧯 If Something Is Off

Unable to initialize music player. — this is what readers see whenever your site cannot reach Apple Music. Open /api/musickit-token to see why
It says Music playback not configured. — one of the three values is missing where you tested. Check the names, then restart npm run dev or redeploy
It says Music authentication failed. — the key did not paste whole. Copy the full .p8 file again, BEGIN and END lines included, between double quotes
No theme song in the bar — the link points to an album, not a song. Copy the link from the song itself
Unknown Artist — the link worked, but your site could not ask Apple for the details. Check the Key ID and Team ID
Nothing happens on play — your browser blocked Apple's sign-in window. Allow pop-ups for your site

🤖 Ask Your LLM

prompt

Here is the opening of my article: [paste it]. Suggest five songs
that match its mood, with one line each on why.

In src/app/constants/editorial-articles/articles/[file].ts, add
this song as the theme song with appleMusicUrl: [paste link].

My site shows "[paste the message]" on the theme song. Using
src/lib/apple-music-token.ts, tell me what to check.

✅ You Are Done When

Your Apple Developer account has a Media ID with MusicKit, and a key with Media Services
The .p8 file is saved somewhere safe
.env and Vercel both have APPLE_MUSIC_TEAM_ID, APPLE_MUSIC_KEY_ID and APPLE_MUSIC_PRIVATE_KEY
/api/musickit-token on your live site shows a token
One article shows its theme song, and you heard it play

Your articles have a sound now. Pick songs the way you pick words: on purpose.

“Turn it up. Then write.”
— unparty-app