# wavesurfer.js + Media Session API

#### wavesurfer.js Media Session Plugin

The Media Session API plugin for wavesurfer.js allows you to 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 playback which may come from notifications or media keys.

Note: this plugin only works in Chrome 57 and newer (Firefox is working on it).

#### Installation

1. add the MediaSession plugin script tag
2. create a `WaveSurfer` instance and supply an object for the `metadata` property
3. create a `MediaSession` instance
4. control playback from the notification screen on a mobile device

Download the plugin (1.2 KB)

#### Quick Start

    var wavesurfer = Object.create(WaveSurfer);

    wavesurfer.init({
      container     : '#waveform',
      waveColor     : 'black',
      backend       : 'MediaElement'
    });

    var msPlugin = Object.create(WaveSurfer.MediaSession);

    msPlugin.init({
        wavesurfer: wavesurfer,
        metadata: {
            title: 'Wavesurfer.js Example',
            artist: 'The Wavesurfer.js Project',
            album: 'Media Session Example',
            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'},
            ]
        }
    });

    // load audio from existing media element
    var mediaElt = document.querySelector('audio');
    wavesurfer.load(mediaElt);

#### Options

Name | Required | Default | Description
--- | --- | --- | ---
`wavesurfer` | yes |  | A WaveSurfer instance.
`metadata` | yes |  | A MediaMetadata object: a representation of the metadata associated with a MediaSession that can be used by user agents to provide customized user interface.

Fork me on GitHub