MusicKit on the web

This web application provides executable sample code for some of the API methods provided by the MusicKit JavaScript library. While this will cover many typical use cases, it does not cover the full set of MusicKit APIs.

MusicKit JS must be embedded in your webpage by using the script tag and link to Apple’s hosted version of MusicKit JS:

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

Configure

You use a developer token to authenticate yourself as a trusted developer and member of the Apple Developer Program and to use MusicKit JS. You can find more information about creating an Apple Music API token in Developer Account Help.


Additional Configuration
Affiliate Program 
                    
MusicKit.configure({
  affiliateToken: undefined,
  campaignToken: undefined,
  declarativeMarkup: true,
  developerToken: 'DEVELOPER-TOKEN',
  debug: false,
  features: ['player-accurate-timing', 'api-data-store', 'api-session-storage', 'api-artist-include'],
  storefrontId: 'us',
  suppressErrorDialog: false
});

Subscriber

Sign In and Authorization

Sign In an Apple Music subscriber and prompt for Authorization.

                    
let music = MusicKit.getInstance();

music.authorize().catch(function(error) {
  console.log(error);
});

Subscriber Details

Authorization Status
Subscriber Storefront
Content Restrictions

Unauthorize and Sign Out

Unauthorize the subscriber and Sign Out.

                    
MusicKit.getInstance().unauthorize();

Cloud Library

Interact with a user's Cloud Library.

Library Albums

Fetch all library albums in alphabetical order.

Query Parameters
See the Apple Music API Developer Reference for a complete list of query parameters available. 
                    
let music = MusicKit.getInstance();

music.api.library.albums({ limit: 25, offset: 0 }).then(function(results) {
  console.log(results);
}).catch(function(error) {
  window.alert(error);
});

Library Album

Fetch a library album by using its identifier.


See the Apple Music API Developer Reference for a complete list of query parameters available. 
                    
let music = MusicKit.getInstance();

music.api.library.album('CONTENT-ID', { include: 'tracks' }).then(function(results) {
  console.log(results);
}).catch(function(error) {
  window.alert(error);
});

Library Album Relationships

Fetch relationship data for a library album by using its identifier and relationship type.


Relationship

See the Apple Music API Developer Reference for a complete list of query parameters available. 
                    
let music = MusicKit.getInstance();

music.api.library.albumRelationship('CONTENT-ID', 'artists').then(function(results) {
  console.log(results);
}).catch(function(error) {
  window.alert(error);
});

Library Artist

Fetch a library artist by using its identifier.


See the Apple Music API Developer Reference for a complete list of query parameters available. 
                  
let music = MusicKit.getInstance();

music.api.library.artist('CONTENT-ID').then(function(results) {
console.log(results);
}).catch(function(error) {
window.alert(error);
});

Library Artist Relationships

Fetch relationship data for a library artist albums by using its identifier and relationship type.


See the Apple Music API Developer Reference for a complete list of query parameters available. 
                  
let music = MusicKit.getInstance();

music.api.library.artistRelationship('CONTENT-ID', 'albums', { include: 'tracks' }).then(function(results) {
console.log(results);
}).catch(function(error) {
window.alert(error);
});

Library Playlists

Fetch all library playlists in alphabetical order.

Query Parameters
See the Apple Music API Developer Reference for a complete list of query parameters available. 
                      
let music = MusicKit.getInstance();

music.api.library.playlists({ limit: 25, offset: 0 }).then(function(results) {
  console.log(results);
}).catch(function(error) {
  window.alert(error);
});

Library Playlist

Fetch a library playlist by using its identifier.


See the Apple Music API Developer Reference for a complete list of query parameters available. 
                  
let music = MusicKit.getInstance();

music.api.library.playlist('CONTENT-ID', { include: 'tracks' }).then(function(results) {
  console.log(results);
}).catch(function(error) {
  window.alert(error);
});

Library Playlist Relationships

Fetch relationship data for a library playlist track relationship by using its identifier and relationship type.


See the Apple Music API Developer Reference for a complete list of query parameters available. 
                    
let music = MusicKit.getInstance();

music.api.library.playlistRelationship('CONTENT-ID', 'tracks').then(function(results) {
  console.log(results);
}).catch(function(error) {
  window.alert(error);
});

Library Songs

Fetch all library songs in alphabetical order.

Query Parameters
See the Apple Music API Developer Reference for a complete list of query parameters available. 
                      
let music = MusicKit.getInstance();

music.api.library.songs({ limit: 25, offset: 0 }).then(function(results) {
  console.log(results);
}).catch(function(error) {
  window.alert(error);
});

Library Song

Fetch a library song by using its identifier.


See the Apple Music API Developer Reference for a complete list of query parameters available. 
                      
let music = MusicKit.getInstance();

music.api.library.song('CONTENT-ID', { include: 'albums' }).then(function(results) {
  console.log(results);
}).catch(function(error) {
  window.alert(error);
});

Recently Added

Fetch the resources recently added to the library.

Query Parameters
See the Apple Music API Developer Reference for a complete list of query parameters available. 
                      
let music = MusicKit.getInstance();

music.api.library.recentlyAdded({ limit: 10, offset: 0 }).then(function(results) {
  console.log(results);
}).catch(function(error) {
  window.alert(error);
});

Events

You can listen for events on the MusicKit instance.

                
let music = MusicKit.getInstance();

music.addEventListener('EVENT-NAME', function(event) {
  console.log(event);
});

Events Viewer

MusicKit.Events

Media Player

Represents the media player for a MusicKit instance.

Playback Modes

                    
MusicKit.getInstance().player.shuffle = false;

Playback Rate

                    
MusicKit.getInstance().player.playbackRate = 1.0;

Volume

                      
  MusicKit.getInstance().player.volume = 1.0;

Media Controls

Using Declarative Markup 
                  
<button data-apple-music-skip-to-previous-item></button>
<button data-apple-music-seek-backward></button>
<button data-apple-music-pause></button>
<button data-apple-music-play></button>
<button data-apple-music-seek-forward></button>
<button data-apple-music-skip-to-next-item></button>

Media Queue

You can initialize a playback queue by using the setQueue method, either with a content URL, individual media items, or with an album or playlist.

Title Artist Name Album Name isExplicit isPlayable
Media Queue is Empty
MusicKit.Queue properties
MusicKit.getInstance().player.queue.isEmpty
MusicKit.getInstance().player.queue.position
For additional properties and methods, see the MusicKit.Queue Developer Reference.

Set Queue

You can find more information in Accessing MusicKit Features Using JavaScript Developer Reference.


Queue Descriptor Type 
                    
let music = MusicKit.getInstance();

music.setQueue({ url: 'CONTENT-DESCRIPTOR' }).then(function(queue) {
  console.log(queue);
});

Play Next / Play Later

Play Next

Inserts the media items for the descriptor immediately after the currently playing media item in the queue.


Queue Descriptor Type 
                    
let music = MusicKit.getInstance();

music.playNext({ url: 'CONTENT-DESCRIPTOR' }).then(function(queue) {
  console.log(queue);
});

Play Later

Inserts the media items for the descriptor after the last media item in the queue.


Queue Descriptor Type 
                      
  let music = MusicKit.getInstance();

  music.playLater({ url: 'CONTENT-DESCRIPTOR' }).then(function(queue) {
    console.log(queue);
  });

Music Catalog

Interact with the Apple Music API.

Catalog Albums

Fetch one or more albums using their identifiers.

                    
let music = MusicKit.getInstance();

music.api.album('CONTENT-ID').then(function(results) {
  console.log(results);
});

Catalog Album Relationships

Fetch relationship data for an album.


Relationship 
                    
let music = MusicKit.getInstance();

music.api.albumRelationship('CONTENT-ID', 'artists').then(function(results) {
  console.log(results);
});

Catalog Artists

Fetch one or more artists using their identifiers.

                    
let music = MusicKit.getInstance();

music.api.artist('CONTENT-ID').then(function(results) {
  console.log(results);
});

Catalog Artist Relationships

Fetch relationship data for an artist.


Relationship 
                    
let music = MusicKit.getInstance();

music.api.artistRelationship('CONTENT-ID', 'albums').then(function(results) {
  console.log(results);
});

Catalog Playlists

Fetch one or more playlists using their identifiers.

                    
let music = MusicKit.getInstance();

music.api.playlist('CONTENT-ID').then(function(results) {
  console.log(results);
});

Catalog Playlist Relationships

Fetch relationship data for a playlist.


Relationship 
                    
let music = MusicKit.getInstance();

music.api.playlistRelationship('CONTENT-ID', 'curator').then(function(results) {
  console.log(results);
});

Catalog Songs

Fetch one or more songs using their identifiers.

                    
let music = MusicKit.getInstance();

music.api.song('CONTENT-ID').then(function(results) {
  console.log(results);
});

ISRC Catalog Lookup

Fetch one or more songs using their ISRC.

                    
let music = MusicKit.getInstance();

music.api.songs({ filter: { isrc: 'ISRC' }}).then(function(results) {
  console.log(results);
});

Recent History

Heavy Rotation

Fetch the resources in heavy rotation for the user.

Query Parameters
See the Apple Music API Developer Reference for a complete list of query parameters available. 
                      
  let music = MusicKit.getInstance();

  music.api.historyHeavyRotation({ limit: 10, offset: 0 }).then(function(results) {
    console.log(results);
  });

Recently Played

Fetch the recently played resources for the user.

Query Parameters
See the Apple Music API Developer Reference for a complete list of query parameters available. 
                      
let music = MusicKit.getInstance();

music.api.recentPlayed({ limit: 10, offset: 0 }).then(function(results) {
  console.log(results);
});

Utilities

Generate Embed

Generates Apple Music web player markup.

Note: If you are only generating embed codes, you can include only the generateEmbedCode() method on your webpage by using the following script tag (instead of musickit.js) and link to Apple’s hosted version of the MusicKit JS generator:

<script src="https://js-cdn.music.apple.com/musickit/v1/generate.js"></script> 
                  
let code = MusicKit.generateEmbedCode('CONTENT-URL');

document.getElementById('generated-output').innerText = code;
document.getElementById('generated-embed').innerHTML = code;