Post

Replies

Boosts

Views

Activity

Reply to Playing music with Musickit.js in Chrome and Firefox
Changed the code and now doing a search: // Use the Apple Music API endpoint for fetching song details const response = await fetch(`https://api.music.apple.com/v1/catalog/${storefront}/search?term=${query}&limit=2&types=songs`, { headers: { Authorization: `Bearer ${devtok}` } }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } else { console.log("Data loaded ..."); } const data = await response.json(); music.setQueue({ url: data.results.songs.data[0].attributes.url }).then(function(queue) { music.player.prepareToPlay(queue.nextPlayableItem).then(function() { music.player.play(); }); }); This is working for all songs in Safari but most of the result are not playing in Chrome. Little Sims now also working for me : https://music.apple.com/nl/album/hello-hi/1787174372?i=1787174374 My Storefront is set to NL
Topic: Media Technologies SubTopic: General Tags:
Jan ’25
Reply to How to set volume with MusicKit Web?
MusicKit Adds an Element Dynamically: MusicKit JS dynamically creates and manages an element internally when playback begins (i.e., when play() is called). This element is part of MusicKit’s internal _player object. Accessing the Audio Element: The element can be accessed directly through music._player._currentPlayer.audio. Once accessed, you can interact with it using standard HTML5 Audio API methods and properties. You can simply fire these commands in the console of your browser: Show HTML5 Audio Controls: music._player._currentPlayer.audio.controls = true Seektotime (jump to 10 seconds): music._player._currentPlayer.audio.currentTime = 10 Change volume: music._player._currentPlayer.audio.volume = 0.1
Topic: Media Technologies SubTopic: Audio Tags:
Jan ’25
Reply to MusicKit - Authorization failed: AUTHORIZATION_ERROR: Unauthorized
Hi, I created the Node file and i am able to generate the token: const fs = require('fs'); const privateKeyPath = '/Users/demo/AuthKey_xxx.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>
Topic: Media Technologies SubTopic: General Tags:
Jan ’25
Reply to Musickit Media player missing output device selection
Hi All, I found a sort of workaround, but it’s not ideal. I can capture the output of my MusicKit player and route it to an audio device using Loopback 2 (from Rogue Amoeba). While I could build a HAL device driver to mimic Loopback’s functionality, there’s clearly should be a better way to do this. Does anyone have a more elegant solution? -P
Topic: Media Technologies SubTopic: General Tags:
Dec ’24
Reply to Playing music with Musickit.js in Chrome and Firefox
I have abandoned MusicKit JS V1 and switched to V3, this seems to be more reliable. With V1 the DRM implementation is causing issues for me in Chrome while Safari is working fine.
Topic: Media Technologies SubTopic: General Tags:
Replies
Boosts
Views
Activity
Jan ’25
Reply to Playing music with Musickit.js in Chrome and Firefox
Changed the code and now doing a search: // Use the Apple Music API endpoint for fetching song details const response = await fetch(`https://api.music.apple.com/v1/catalog/${storefront}/search?term=${query}&limit=2&types=songs`, { headers: { Authorization: `Bearer ${devtok}` } }); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } else { console.log("Data loaded ..."); } const data = await response.json(); music.setQueue({ url: data.results.songs.data[0].attributes.url }).then(function(queue) { music.player.prepareToPlay(queue.nextPlayableItem).then(function() { music.player.play(); }); }); This is working for all songs in Safari but most of the result are not playing in Chrome. Little Sims now also working for me : https://music.apple.com/nl/album/hello-hi/1787174372?i=1787174374 My Storefront is set to NL
Topic: Media Technologies SubTopic: General Tags:
Replies
Boosts
Views
Activity
Jan ’25
Reply to How to set volume with MusicKit Web?
MusicKit Adds an Element Dynamically: MusicKit JS dynamically creates and manages an element internally when playback begins (i.e., when play() is called). This element is part of MusicKit’s internal _player object. Accessing the Audio Element: The element can be accessed directly through music._player._currentPlayer.audio. Once accessed, you can interact with it using standard HTML5 Audio API methods and properties. You can simply fire these commands in the console of your browser: Show HTML5 Audio Controls: music._player._currentPlayer.audio.controls = true Seektotime (jump to 10 seconds): music._player._currentPlayer.audio.currentTime = 10 Change volume: music._player._currentPlayer.audio.volume = 0.1
Topic: Media Technologies SubTopic: Audio Tags:
Replies
Boosts
Views
Activity
Jan ’25
Reply to Playing music with Musickit.js in Chrome and Firefox
I have build a demo; One time: Get token Authorize Per playout: Queue song based on song id Prepare load Play Test: Simz's "Hello, Hi" doesnt work for me in Safari nor Chrome Perhaps this has something to do with the Storefronts?
Topic: Media Technologies SubTopic: General Tags:
Replies
Boosts
Views
Activity
Jan ’25
Reply to MusicKit - Authorization failed: AUTHORIZATION_ERROR: Unauthorized
Hi, I created the Node file and i am able to generate the token: const fs = require('fs'); const privateKeyPath = '/Users/demo/AuthKey_xxx.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>
Topic: Media Technologies SubTopic: General Tags:
Replies
Boosts
Views
Activity
Jan ’25
Reply to Apple Music Won't Play using the latest version of Xcode/MacOS
Almost the same issue, my code was working last week and now there is no audio played anymore. The preview links are working but full songs are not audible, the player says playing and doesnt show any error accept: [1] ASYNC-WATCHDOG-1: Attempting to wake up the remote [2] process Playback started successfully.
Topic: Media Technologies SubTopic: Audio Tags:
Replies
Boosts
Views
Activity
Jan ’25
Reply to Musickit Media player missing output device selection
Hi All, I found a sort of workaround, but it’s not ideal. I can capture the output of my MusicKit player and route it to an audio device using Loopback 2 (from Rogue Amoeba). While I could build a HAL device driver to mimic Loopback’s functionality, there’s clearly should be a better way to do this. Does anyone have a more elegant solution? -P
Topic: Media Technologies SubTopic: General Tags:
Replies
Boosts
Views
Activity
Dec ’24
Reply to MusicKit - Authorization failed: AUTHORIZATION_ERROR: Unauthorized
Hi, Was also looking into the JS stuff for my app. Did you create the tokens and enable access to MusicKit in your Dev Account? -P
Topic: Media Technologies SubTopic: General Tags:
Replies
Boosts
Views
Activity
Dec ’24