I'm unable to play music using Musickit.js in the Chrome or Firefox browsers.
Even using the apple guide here: https://js-cdn.music.apple.com/musickit/v1/index.html - I've added my Music Developer Token and song/album url, but it only works in Safari and not in Chrome or Firefox.
I'm unsure if this is a global issue, or if there is something I need to do to enable playback in other browsers, but as it stands it's not working for me.
Thanks for any help in advance!
To add to this, as I know the above link is technically for the old API documentation. Here is my below code, working on Safari, but not Chrome or Firefox.
I can see the automatic audio object is loading at the bottom of the screen, but it's not the same assetURL as the Safari browser version.
document.addEventListener('musickitloaded', function() {
MusicKit.configure({
developerToken: 'MyDeveloperToken',
app: {
name: 'Apple Music App',
build: '1.0.0'
}
});
});
function playASong() {
var music = MusicKit.getInstance();
music.authorize().then(function() {
var url = 'https://music.apple.com/gb/album/hotline-bling/1440841363?i=1440841730';
music.setQueue({ url: url }).then(function(queue) {
music.player.prepareToPlay(queue.nextPlayableItem).then(function() {
music.player.play();
});
});
});
}
const playbtn = document.querySelector(".play-button");
playbtn.addEventListener("click", function () {
playASong();
});
Update:
To add to this, it's now come to my attention that being able to play in Chrome and Firefox depends on the individual track.
Is there a reason why some songs won't play but others will?
For instance, Drake's "Hotline Bling" does work cross browser, but Little Simz's "Hello, Hi" does not.
I have build a demo;
One time:
Per playout:
Test:
Simz's "Hello, Hi" doesnt work for me in Safari nor Chrome
Perhaps this has something to do with the Storefronts?
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
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.