Hello,
I am having difficulties with configuring MusicKit correctly for my web app that I am building, seeking assistance with the issues I am having. Would greatly appreciate any help!
After allowing access to the following,
"Access Request media.mydomain.com would like to access Apple Music, media library, and listening activity for myemail'@icloud.com.",
I get a popup error that states, "Authorization failed. Please try again.".
Following is the information that is given in developer console:
[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,
I created the Node file and i am able to generate the token:
const fs = require('fs');
const privateKeyPath = '/Users/demo/AuthKey_***.p8'; // Path to the .p8 file
const teamId = 'XXXX'; // Your Apple Developer Team ID
const keyId = 'XXXX'; // 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: 'appstoreconnect-v1' // Audience: Identifies the intended recipient
},
privateKey, // Private key used for signing the token
{
algorithm: 'ES256', // Signing algorithm (Elliptic Curve)
header: { kid: keyId } // Key ID included in the header of the token
}
);
console.log(token)
I just the following HTML code to test the token:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Apple Music Player</title>
<script src="https://js-cdn.music.apple.com/musickit/v1/musickit.js"></script>
</head>
<body>
<h1>Apple Music Player</h1>
<button id="authorize">Authorize</button>
<button id="play">Play Preview</button>
<button id="playFull">Play Full Song</button>
<script>
// Configure MusicKit
MusicKit.configure({
developerToken: 'TOKEN', // Replace with your actual developer token
app: {
name: 'My Music App',
build: '1.0.0'
}
});
// Get an instance of MusicKit
const music = MusicKit.getInstance();
// Handle Authorization Button
document.getElementById('authorize').addEventListener('click', async () => {
try {
await music.authorize(); // Prompts the user to authorize
alert('Authorized! You can now play full songs.');
} catch (error) {
console.error('Authorization failed:', error);
}
});
// Handle Play Preview Button
document.getElementById('play').addEventListener('click', async () => {
try {
// Play a preview of a song
await music.setQueue({ songs: ['203709340'] }); // Replace with a valid Apple Music song ID
music.play();
} catch (error) {
console.error('Error playing preview:', error);
}
});
// Handle Play Full Song Button
document.getElementById('playFull').addEventListener('click', async () => {
try {
if (!music.isAuthorized) {
alert('Please authorize first to play full songs!');
return;
}
// Play a full-length song (requires user authorization)
await music.setQueue({ songs: ['1559745848'] }); // Replace with a valid Apple Music song ID
music.play();
} catch (error) {
console.error('Error playing full song:', error);
}
});
</script>
</body>
</html>