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).


  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

Quick Start

var wavesurfer = WaveSurfer.create({
  container     : '#waveform',
  waveColor     : 'black',
  plugins: [
        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');


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