Article

Adding MusicKit Features Using HTML

Add a music player, Apple Music content, and media controls to your web content using declarative markup elements.

Overview

After configuring and authorizing MusicKit JS in your web content, you can add elements of the player to your webpage's user interface using declarative HTML markup.

Add Media Playback Controls

Add these buttons for playback controls for the media player. This markup is analogous to pause, play, skipToNextItem, and skipToPreviousItem in a MusicKit instance.

<button data-apple-music-pause></button>
<button data-apple-music-play></button>
<button data-apple-music-skip-to-next-item></button>
<button data-apple-music-skip-to-previous-item></button>

Add a Media Playback Queue

Add these buttons to set a playback queue for a playlist or album. This markup is analagous to setQueue in a MusicKit instance.

<button data-apple-music-set-queue="pl.da219c87667b4018968b94c4be8bc793"></button>

<!-- Disable autoplay -->
<button data-apple-music-set-queue="1025210938" data-apple-music-autoplay="false"></button>

To set a queue using an album identifier in the Apple Music API:

<button data-apple-music-set-queue="1025210938"></button>

To set a queue using a playlist identifier in the Apple Music API:

<button data-apple-music-set-queue="pl.d133de76fb4f4ccf98846231899874c0"></button>

Add a Now Playing Item

Add this information to display the currently playing media item. This information defaults to nowPlayingItem information in a MusicKit.Player instance. MusicKit.MediaItem attributes are valid arguments.

<!-- Default nowPlayingItem.info -->
<p data-apple-music-now-playing></p>

<!-- nowPlayingItem.albumInfo -->
<span data-apple-music-now-playing="albumInfo"></span>

<!-- nowPlayingItem.artistName -->
<span data-apple-music-now-playing="artistName"></span>

<!-- nowPlayingItem.artworkURL -->
<img data-apple-music-now-playing="artworkURL" width="100" height="100" />

Add Current Playback Information

Add this information to display the current playback time and the length of the current media item. These values are analagous to currentPlaybackDuration, currentPlaybackTime, and currentPlaybackProgress in a MusicKit.Player instance.

<time id="apple-music-current-playback-duration"></time>
<time id="apple-music-current-playback-time"></time>
<span id="apple-music-current-playback-progress"></span>

Add Media Library Items

Add these buttons to allow your user to include the indicated media item from the Apple Music catalog to their library. This markup is analagous to addToLibrary in a MusicKit.API instance.

<button data-apple-music-add-to-library="pl.da219c87667b4018968b94c4be8bc793"></button>
<button data-apple-music-add-to-library="1025210938"></button>
<button data-apple-music-add-to-library="1107054256" data-apple-music-type="songs"></button>

See Also

Getting Started

Accessing MusicKit Features Using JavaScript

Add a music player, Apple Music content, and media controls to your web content using JavaScript methods.