Apple music web kit play issues (MusicKit JS)

Hello,

I am trying to follow the getting started guide. I have produced a developer token via the music kit embedding approach and can confirm I'm successfully authorized.

When I try to do play music, I'm unable to hear anything. Thought it could be some auto-play problems with the browser, but it doesn't appear to be related, as I can trigger play from a button with no further success.

  const music = MusicKit.getInstance()
  try {
    await music.authorize() // successful
     const result = await music.api.music(`/v1/catalog/gb/search`, {
       term: 'Sound Travels',
       types: 'albums',
     })
    await music.play()
  } catch (error) {
    console.error('play error', error) // ! No error triggered
  }

I have searched the forum, have found similar queries but apparently none using V3 of the API.

Other potentially helpful information:

  • OS: macos 15.1 (24B83)
  • API version: V3
  • On localhost
  • Browser: Arc (chromium based), also tried on Safari,
    • The only difference between the two browsers is that safari appears to exit the breakpoint, whereas Arc will continue (without throwing any errors)
  • authorizationStatus: 3

Side note, any reason this is still in beta so many years later?

Answered by remy90 in 819351022

I wrestled with this issue for a while and found the issue. For the initial script declaration:

              <script
                src="https://js-cdn.music.apple.com/musickit/v3/musickit.js"
              />

I removed the async property. The result was synchronous loading of music kit. If you remove async, setQueue() will always return void and play() won't play or provide any error message as to why it isn't working.

I don't think this is intended behaviour but on the slim chance that it is, the documentation could really benefit from specifying that the removal of the async property may apply for the return of search queries but not for playback.

The reason for I removed async in the first place was because the initial load was failing more often than not, with:

Uncaught TypeError: Cannot read properties of undefined (reading 'node')
    at musickit.js:13:10194
    at musickit.js:13:140
    at musickit.js:13:209

It's successful < 25% of the time.

Removing async resolved this issue, which may be helpful to others with different app requirements. I'll create a new post regarding this async issue.

Accepted Answer

I wrestled with this issue for a while and found the issue. For the initial script declaration:

              <script
                src="https://js-cdn.music.apple.com/musickit/v3/musickit.js"
              />

I removed the async property. The result was synchronous loading of music kit. If you remove async, setQueue() will always return void and play() won't play or provide any error message as to why it isn't working.

I don't think this is intended behaviour but on the slim chance that it is, the documentation could really benefit from specifying that the removal of the async property may apply for the return of search queries but not for playback.

The reason for I removed async in the first place was because the initial load was failing more often than not, with:

Uncaught TypeError: Cannot read properties of undefined (reading 'node')
    at musickit.js:13:10194
    at musickit.js:13:140
    at musickit.js:13:209

It's successful < 25% of the time.

Removing async resolved this issue, which may be helpful to others with different app requirements. I'll create a new post regarding this async issue.

Apple music web kit play issues (MusicKit JS)
 
 
Q