wavesurfer.js | Media Sesssion plugin

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

add the MediaSession plugin script tag
create a WaveSurfer instance and supply an object for the metadata property
create a MediaSession instance
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.

wavesurfer.js + Media Session API

wavesurfer.js Media Session Plugin

Installation

Quick Start

Options