Customize Media Notifications and Handle Playlists

With the brand new Media Session API, you can now customize media
notifications by providing metadata for the media your web app is
playing. It also allows you to handle media related events such as seeking
or track changing which may come from notifications or media keys. Excited? Try
out the official Media Session samples.

The Media Session API is supported in Chrome 57 (beta in February 2017, stable
in March 2017).

Note: I could have used a <video> element instead to showcase the Media Session
API.

As you may know, autoplay is disabled for audio elements on Chrome
for Android which means we have to use the play() method of the audio
element. This method must be triggered by a user gesture such as a touch or a
mouse click.
That means listening to
pointerup, click, and touchend
events. In other words, the user must click a button before your web app can
actually make noise.

Note: If the <audio> element has the controls attribute, you can simply set
up the media session in the audio play event listener instead which occurs
when user taps the "play" audio control.

If you don't want to play audio right after the first interaction, I recommend
you use the load() method of the audio element. This is one way for the
browser to keep track of whether the user interacted with the element. Note
that it may also help smooth the playback because the content will already
be loaded.

Customize the notification

When your web app is playing audio, you can already see a media notification
sitting in the notification tray. On Android, Chrome does its best to show
appropriate information by using the document's title and the largest icon
image it can find.

Without media session

With media session

Set metadata

Let's see how to customize this media notification by setting some media
session metadata such as the title, artist, album name, and artwork with the
Media Session API.

Once playback is done, you don't have to "release" the media session as the
notification will automatically disappear. Keep in mind that current
navigator.mediaSession.metadata will be used when any playback starts. This
is why you need to update it to make sure you're always showing relevant
information in the media notification.

Previous track / next track

If your web app provides a playlist, you may want to allow the user to navigate
through your playlist directly from the media notification with some "Previous
Track" and "Next Track" icons.

Note that media action handlers will persist. This is very similar to the event
listener pattern except that handling an event means that the browser stops
doing any default behaviour and uses this as a signal that your web app
supports the media action. Hence, media action controls won't be shown unless
you set the proper action handler.

By the way, unsetting a media action handler is as easy as assigning it to null.

Seek backward / seek forward

The Media Session API allows you to show "Seek Backward" and "Seek Forward"
media notification icons if you want to control the amount of time skipped.

Play / pause

The "Play/Pause" icon is always shown in the media notification and the related
events are handled automatically by the browser. If for some reason the default
behaviour doesn't work out, you can still handle "Play" and "Pause" media events.

Note: The browser may consider that the web app is not playing media when files
are seeking or loading. You can override this behaviour by setting
navigator.mediaSession.playbackState
to "playing" or "paused". This comes in handy when you want to make sure
your web app UI stays in sync with the media notification controls.

Notifications everywhere

The cool thing about the Media Session API is that the notification tray is not
the only place where media metadata and controls are visible. The media
notification is synced automagically to any paired wearable device. And it also
shows up on lock screens.

Caution: If you want your service worker to be able to intercept artwork
network requests on the very first page load, you may want to call
clients.claim() within your service worker once it's activated.

Let user control cache

As the user consumes content from your web app, media and artwork files may
take a lot of space on their device. It is your responsibility to show how
much cache is used and give users the ability to clear it. Thankfully for us,
doing so is pretty easy with the Cache API.

Implementation notes

Chrome for Android requests "full" audio focus to show media notifications
only when the media file duration is at least 5 seconds.

Notification artwork support blob URLs and data URLs.

If no artwork is defined and there is an icon image at a desirable size, media
notifications will use it.

Notification artwork size in Chrome for Android is 512x512. For
low-end devices, it is 256x256.

Dismiss media notifications with audio.src = ''.

As the Web Audio API doesn't request Android Audio Focus for historical
reasons, the only way to make it work with the Media Session API is to hook
up an <audio> element as the input source to the Web Audio API. Hopefully,
the proposed Web AudioFocus API will improve the situation in the
near future.

Media Mession calls will affect media notifications only if they come from
the same frame as the media resource. See the snippet below.

Support

At the time of writing, Chrome for Android is the only platform that supports
the Media Session API. More up-to-date information on browser implementation
status can be found on Chrome Platform Status.