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>