Yes, though I am not able to get the full features to work. I am able to search for music and I can see songs/artists/albums/etc, I cannot interact with anything when I click a song or any other feature in Apple Music.
y0ttabit
Users receive reputation points by contributing quality content to the forums.
Posts include post and replies published on the forums.
Post authors can mark replies as Accepted to indicate successful solutions.
Apple Developer Forums admins can mark replies as Apple Recommended to indicate an approved solution
Post
Replies
Boosts
Views
Activity
Figured out that my Nginx configuration for my project included a root path (/var/www/media/html/index.html)for index.html that was different from the location where I was editing index.html from. I somehow managed to created an additional index.html file in my home folder (/home/theloungeuser/index.html) that I was editing from, I switched the root path in Nginx configuration to "/home/theloungeuser".
I'm rebuilding my web player, which I started with the minimal script Pancras provided in an earlier post (https://developer.apple.com/forums/edit/answer/825987022) and have been working to integrate the features I had setup using v1 before attempting to migrate to v3. I am able to successfully authorize when signing into my paid Apple Music Account, although the music.player/music.api.library is not loading how it should, "Radio" not working. I can see images of artists/songs in the "Home" section of my Apple Music player as well as when I search for an artist/song, though they cannot be interacted with. When I click any artist/song, nothing happens.
I am seeing the following information of my Firefox developer console:
A resource is blocked by OpaqueResponseBlocking, please check browser console for details. play--v3.png MusicKit loaded and event triggered. media.mydomain.com:396:15
Attempting to authorize with Apple Music... media.mydomain.com:442:15
Opening multiple popups was blocked due to lack of user activation. musickit.js:13:86737
Storage access automatically granted for origin “https://authorize.music.apple.com” on “https://media.mydomain.com”.
Authorization successful media.mydomain.com:445:17
music.player is not available; skipping player event listeners. media.mydomain.com:455:19
music.api.library is not available. Skipping library calls. media.domain.com:462:19
music.player not available; cannot play item.
Figured out that my Nginx configuration for my project included a root path (/var/www/media/html/index.html)for index.html that was different from the location where I was editing index.html from. I somehow managed to created an additional index.html file in my home folder (/home/theloungeuser/index.html) that I was editing from, I switched the root path in Nginx configuration to "/home/theloungeuser".
I'm rebuilding my web player, which I started with the minimal script Pancras provided and have been working to integrate the features I had setup using v1 before attempting to migrate to v3. I am able to successfully authorize when signing into my paid Apple Music Account, although the music.player/music.api.library is not loading how it should, "Radio" not working. I can see images of artists/songs in the "Home" section of my Apple Music player as well as when I search for an artist/song, though they cannot be interacted with. When I click any artist/song, nothing happens.
I am seeing the following information of my Firefox developer console:
A resource is blocked by OpaqueResponseBlocking, please check browser console for details. play--v3.png MusicKit loaded and event triggered. media.mydomain.com:396:15
Attempting to authorize with Apple Music... media.mydomain.com:442:15
Opening multiple popups was blocked due to lack of user activation. musickit.js:13:86737
Storage access automatically granted for origin “https://authorize.music.apple.com” on “https://media.mydomain.com”.
Authorization successful media.mydomain.com:445:17
music.player is not available; skipping player event listeners. media.mydomain.com:455:19
music.api.library is not available. Skipping library calls. media.domain.com:462:19
music.player not available; cannot play item.
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>MusicKit Minimal Test</title>
<!-- Load MusicKit JS v3 -->
<script src="https://js-cdn.music.apple.com/musickit/v3/musickit.js" data-web-components async></script>
</head>
<body>
<!-- Minimal UI -->
<button id="authorize-btn">Authorize Apple Music</button>
<button id="play-preview-btn">Play Preview</button>
<script>
// Wait for MusicKit to finish loading
document.addEventListener('musickitloaded', async () => {
console.log('MusicKit loaded.');
// Configure MusicKit with your developer token
await MusicKit.configure({
developerToken: 'MY_VALID_TOKEN', // <-- Replace with your valid token
app: {
name: 'MinimalTestApp',
build: '1.0.0'
}
});
const music = MusicKit.getInstance();
// 1) Authorization Flow
// Per the article: "User authorization is required before your app can access
// the user’s Apple Music data ... or for full playback of media."
document.getElementById('authorize-btn').addEventListener('click', async () => {
try {
console.log('Attempting to authorize...');
await music.authorize();
console.log('Authorization successful!');
} catch (error) {
console.error('Authorization failed:', error);
}
});
// 2) Playing a Preview
// "Without user authorization, or for users who do not have a valid Apple Music subscription,
// your app can still play previews of media from Apple Music."
document.getElementById('play-preview-btn').addEventListener('click', async () => {
try {
console.log('Attempting to play a preview...');
// Set a queue with a known track ID that supports previews.
// This ID is just an example; you can replace it with any track that has a preview.
await music.setQueue({ song: '1641309998' });
await music.player.play();
console.log('Playing preview (if available)...');
} catch (error) {
console.error('Error playing preview:', error);
}
});
// If you want to play the full length of a song, ensure the user is authorized
// with an active Apple Music subscription. Then do:
//
// await music.authorize();
// await music.play();
//
// per the article’s guidance.
});
</script>
</body>
</html>
generate_token.js:
const jwt = require('jsonwebtoken'); // <-- This line is required!
const fs = require('fs');
const privateKeyPath = '/home/theloungeuser/AuthKey_**********.p8'; // Path to your .p8 file
const teamId = '*********'; // Your Apple Developer Team ID
const keyId = '**********'; // Key ID for MusicKit
const privateKey = fs.readFileSync(privateKeyPath, 'utf8');
const token = jwt.sign(
{
iss: teamId, // Issuer: Your Apple Developer Team ID
iat: Math.floor(Date.now() / 1000), // Issued at: current timestamp (in seconds)
exp: Math.floor(Date.now() / 1000) + (60 * 60 * 24 * 180), // Expiration: 180 days from now
aud: 'music' // Audience for MusicKit must be "music"
},
privateKey, // Private key used for signing the token
{
algorithm: 'ES256', // Signing algorithm
header: { kid: keyId } // Include your Key ID in the header
}
);
console.log(token);
[Error] Authorization failed:
AUTHORIZATION_ERROR: Unauthorized
MKError — musickit.js:13:6443
(anonymous function) — musickit.js:28:276672
asyncGeneratorStep$w — musickit.js:28:273705
_next — musickit.js:28:273952
(anonymous function) (media.mydomain.com:398)
Hi Pancras,
I posted this in the main thread by accident believing I was replying to this thread of yours, my apologies!
I've been having issues with authorization after switching from v1 to v3, have tried some of the suggestions you provided in a reply to a post of mine. Have tried to reach out to Apple Support a few times, though I haven't received any support that has helped me to move forward.
I have tested my token at https://jwt.io and I'm getting a "Signature Verified", tried multiple browsers in private/incognito mode, now when I try to sign into my Apple Account to test my player I am receiving an error that stats "There is a Problem Connecting. There May be an Issue with Your Network." (which is not the case).
I have tried everything I can think of, I'm at a loss and would appreciate any help to get my project moving forward. This is what I am seeing in the browser developer console (using Firefox):
Authorization failed: AUTHORIZATION_ERROR: Unauthorized MKError https://js-cdn.music.apple.com/musickit/v3/musickit.js:13 authorize https://js-cdn.music.apple.com/musickit/v3/musickit.js:28 asyncGeneratorStep$w https://js-cdn.music.apple.com/musickit/v3/musickit.js:28 _next https://js-cdn.music.apple.com/musickit/v3/musickit.js:28 media.mydomain.com:398:19 https://media.mydomain.com/:398
When I try to generate a token using the script you provided, I am experiencing error(s), although I've been able to successfully generate a token with the following script. Each time I test (using v3 in my html code), though, I am getting authentication errors (these errors have been occurring since I've adjusted code to use the v3 music kit version instead of v1 in my html code):
// generate_token.js
const jwt = require('jsonwebtoken');
const fs = require('fs');
// Adjust these to your Apple Developer details:
const privateKeyPath = '/home/theloungeuser/AuthKey_*****.p8'; // Path to the .p8
const teamId = 'My TeamID'; // Your Apple Developer Team ID
const keyId = 'KeyID'; // 10-char Key ID for MusicKit
// Read the private key
const privateKey = fs.readFileSync(privateKeyPath, 'utf8');
// Generate Apple MusicKit dev token (valid max 180 days)
const token = jwt.sign(
{
iss: teamId,
iat: Math.floor(Date.now() / 1000),
exp: Math.floor(Date.now() / 1000) + (60 * 60 * 24 * 180), // 180 days
aud: 'appstoreconnect-v1'
},
privateKey,
{
algorithm: 'ES256',
header: {
kid: keyId
}
}
);
console.log(token);
Here are the errors I am seeing in browser developer console when testing using the html code you've provided:
[Error] Failed to load resource: the server responded with a status of 403 () (webPlayerLogout, line 0)
[Error] Authorization failed:
AUTHORIZATION_ERROR: Unauthorized
MKError — musickit.js:13:6433
(anonymous function) — musickit.js:28:274505
asyncGeneratorStep$w — musickit.js:28:271538
_next — musickit.js:28:271785
(anonymous function) (media.mydomain.com:398)
Pancras,
Thank you for responding to my post, I appreciate any feedback. My apologies for the delayed reply, I have been traveling and haven't been able to make any adjustments to my work.
I recall you mentioning that you were attempting to use MusicKit for your application and was wondering if you were experiencing the same/similar issue I was experiencing when posting my original thread, "[Error] Failed to load resource: the server responded with a status of 403 () (webPlayerLogout, line 0) [Error] Authorization failed: AUTHORIZATION_ERROR: Unauthorized (anonymous function) (media.mydomain.com:398)"?
Hi _Pancras,
What I did was create an Identifier>Media ID as "media.com.mydomain", downloaded my MusicKit Key (created using the Media ID), then used script to generate token. Not really sure what to do from here, next step is to reach out to Apple support 🤷🏻♂️
Here is the script I am using to generate token:
// generate_token.js
const jwt = require('jsonwebtoken');
const fs = require('fs');
// Adjust these to your Apple Developer details:
const privateKeyPath = '/home/theloungeuser/AuthKey_mykey.p8'; // Path to the .p8
const teamId = 'myTeamID'; // Your Apple Developer Team ID
const keyId = 'myKeyID'; // 10-char Key ID for MusicKit
// Read the private key
const privateKey = fs.readFileSync(privateKeyPath, 'utf8');
// Generate Apple MusicKit dev token (valid max 180 days)
const token = jwt.sign(
{
iss: teamId,
iat: Math.floor(Date.now() / 1000),
exp: Math.floor(Date.now() / 1000) + (60 * 60 * 24 * 180), // 180 days
aud: 'appstoreconnect-v1'
},
privateKey,
{
algorithm: 'ES256',
header: {
kid: keyId
}
}
);
console.log(token);
Hello,
Has anyone been able to help you with the issue you were having? I am experiencing a similar issue, after successful sign-in and allowing my web app to connect with my Apple Music account, getting an error popup that states "Authorization failed. Please try again.".
Developer Console Info:
[Error] Authorization failed:
AUTHORIZATION_ERROR: Unauthorized
(anonymous function) (media.mydomain.com:398)
If you've found a solution to this, would greatly appreciate any help!