Give Users Control: The Media Session API

Imagine this: A killer Kendrick Lamar track blasts from one of your many browser tabs. You're grooving, but someone enters, and you need to pause it. Which tab? Browsers offer limited help; you might mute all audio, but wouldn't direct control be better?

The Media Session API solves this. It extends media playback controls beyond the playing tab, offering access via:

• Mobile device notification areas
• Wearables
• Desktop media hubs

Furthermore, it enables control using media keys and voice assistants (Siri, Google Assistant, Bixby, Alexa).

Understanding the Media Session API

The API centers on two interfaces:

• MediaMetadata: Provides media details (title, album, artwork, artist – Kendrick Lamar, in our example).
• MediaSession: Manages playback functionality.

Before implementation, always check browser support:

if ('mediaSession' in navigator) {
  // Media Session API code here
}

MediaMetadata Interface

MediaMetadata.MediaMetadata() creates a MediaMetadata object. Key properties include:

• MediaMetadata.title: Media title.
• MediaMetadata.artist: Artist or group.
• MediaMetadata.album: Album name.
• MediaMetadata.artwork: Array of MediaImage objects (image URLs, sizes, MIME types).

Example for Kendrick Lamar's "Alright":

if ('mediaSession' in navigator) {
  navigator.mediaSession.metadata = new MediaMetadata({
    title: 'Alright',
    artist: 'Kendrick Lamar',
    album: 'To Pimp A Butterfly',
    artwork: [
      { src: 'https://mytechnicalarticle/kendrick-lamar/to-pimp-a-butterfly/alright/96x96', sizes: '96x96', type: 'image/png' },
      { src: 'https://mytechnicalarticle/kendrick-lamar/to-pimp-a-butterfly/alright/128x128', sizes: '128x128', type: 'image/png' },
      // Add more sizes (192x192, 256x256, etc.)
    ]
  });
}

MediaSession Interface

This interface provides user playback control:

• play(): Starts playback.
• pause(): Pauses playback.
• previoustrack(): Plays the previous track.
• nexttrack(): Plays the next track.
• seekbackward(): Seeks backward (by a specified offset).
• seekforward(): Seeks forward.
• seekto(): Seeks to a specific time.
• stop(): Stops playback.
• skipad(): Skips ads (implementation details omitted here for brevity).

setActionHandler() registers handlers for these actions. Example for play/pause:

let alright = new Audio(); // Use Audio instead of HTMLAudioElement

if ('mediaSession' in navigator) {
  navigator.mediaSession.setActionHandler('play', () => alright.play());
  navigator.mediaSession.setActionHandler('pause', () => alright.pause());
}

Similar handlers are implemented for previoustrack, nexttrack, seekbackward, seekforward, seekto, and stop. seekbackward and seekforward use a default 10-second offset if details.seekOffset is unavailable. seekto handles both standard and fast seeking. The stop handler pauses and resets the playback time.

Remember to update the playback state using setPositionState() after each action:

if ('mediaSession' in navigator) {
  navigator.mediaSession.setPositionState({
    duration: alright.duration,
    playbackRate: alright.playbackRate,
    position: alright.currentTime
  });
}

Error handling is crucial; wrap setActionHandler calls in a try...catch block to gracefully handle unsupported actions.

A complete example incorporating error handling and state updates is provided in the original article. Remember to replace placeholder image URLs with actual URLs. The demo showcases the API's functionality across various devices and platforms. Consider implementing this API in your media-rich applications for enhanced user experience.

The above is the detailed content of Give Users Control: The Media Session API. For more information, please follow other related articles on the PHP Chinese website!