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.
_Pancras
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
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
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
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?
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>
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.
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
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