# Media Session API

The Media Session API allows web developers to customize the media notifications that appear on mobile devices, notification centers, and lock screens. It also allows handling media control events (like play, pause, seek, next track) triggered by hardware keys or headsets.

## 1. Setting Metadata

You can provide rich metadata about the media currently playing, such as the title, artist, album, and artwork. This information is displayed in the OS's media controls.

```javascript
if ('mediaSession' in navigator) {
  navigator.mediaSession.metadata = new MediaMetadata({
    title: 'Never Gonna Give You Up',
    artist: 'Rick Astley',
    album: 'Whenever You Need Somebody',
    artwork: [
      { src: 'https://dummyimage.com/96x96',   sizes: '96x96',   type: 'image/png' },
      { src: 'https://dummyimage.com/128x128', sizes: '128x128', type: 'image/png' },
      { src: 'https://dummyimage.com/192x192', sizes: '192x192', type: 'image/png' },
      { src: 'https://dummyimage.com/256x256', sizes: '256x256', type: 'image/png' },
      { src: 'https://dummyimage.com/384x384', sizes: '384x384', type: 'image/png' },
      { src: 'https://dummyimage.com/512x512', sizes: '512x512', type: 'image/png' },
    ]
  });
}
```

## 2. Handling Actions

You can listen for media control actions using `setActionHandler`. This allows users to control your web app's media playback using hardware keys (keyboards, headsets) or software controls (notification area).

```javascript
const audio = document.querySelector('audio');

if ('mediaSession' in navigator) {
  // Play
  navigator.mediaSession.setActionHandler('play', () => {
    audio.play();
  });

  // Pause
  navigator.mediaSession.setActionHandler('pause', () => {
    audio.pause();
  });

  // Seek Backward
  navigator.mediaSession.setActionHandler('seekbackward', (details) => {
    const skipTime = details.seekOffset || 10;
    audio.currentTime = Math.max(audio.currentTime - skipTime, 0);
  });

  // Seek Forward
  navigator.mediaSession.setActionHandler('seekforward', (details) => {
    const skipTime = details.seekOffset || 10;
    audio.currentTime = Math.min(audio.currentTime + skipTime, audio.duration);
  });

  // Previous Track
  navigator.mediaSession.setActionHandler('previoustrack', () => {
    console.log('Playing previous track...');
    // Logic to load previous track
  });

  // Next Track
  navigator.mediaSession.setActionHandler('nexttrack', () => {
    console.log('Playing next track...');
    // Logic to load next track
  });
  
  // Stop
  navigator.mediaSession.setActionHandler('stop', () => {
      audio.pause();
      audio.currentTime = 0;
      // Clear metadata if needed
      navigator.mediaSession.metadata = null;
  });
}
```

[[programming/javascript/vanilla/javascript]]
[[programming/javascript/vanilla/events]]
[[programming/javascript/vanilla/page-visibility-api]]