Custom Built Waveform Player

The waveform-player package is exactly what it says on the tin: given waveform data (i.e from audiowaveform, it can render this data in a graph.

Speed

The primary advantage of this package compared to say, peaks.js, is that it is much much faster! Other packages take a long time to render a larger waveform, but waveform-player can load almost any size in seconds.

Customisation

waveform-player uses a HTML canvas to draw itself; that means we have total control over the look of the output. All colours, spacings, fonts, and more, can be edited as you like (see here.

HLS Support

Other packages do not support working with HLS; that is, given a HTML media source (like a <video>), which is bound to a package like HLS.js, other players do not support being supplied with a pre-computed waveform and binding to a stream source such as HLS. waveform-player is totally happy even without any playable media; it just needs waveform data.

Without playable media, there will be no playhead, but all other features will work as expected.

Install

First, install it as a package:

npm i waveform-player

Now you can simply import the main class:

import { WaveformPlayer } from 'waveform-player';

Alternatively clone this repo:

git clone git@github.com:sharpstream/waveform-player.git

Now you need to build the package:

npm i && npm run build

Then, you can directly import from that file:

import { WaveformPlayer } from './my/custom/filepath/waveform-player/build/main';

It can help to create a symbolic link to the build directory in this case.

Usage

First, initialise the player with its constructor. The constructor requires a HTML container element which will host the player, as well as waveform data to render. An optional third parameter allows you to customise the player as you see fit (see here.

import { WaveformPlayer } from 'waveform-player';

// ... here you will need to acquire the container element and the waveform data any way you like
// we'll also assume you have a HTML media element, possibly using HLS
const container_element = ...;
const waveform_data = ...;
const media_element = ...;

const options = {
  audio: {
    element: media_element,
  },
  style: {
    colours: {
      peaks: {
        unplayed: 'rgba(128,128,128,0.5)', // unplayed parts of the waveform will be gray
        played: 'rgba(64,255,64,1)', // anything behind the playhead will be green
      }
    }
  }
};

const player = new WaveformPlayer(
  container_element,
  waveform_data,
  options,
);

Thats it! Once the contructor has been invoked, if there were no errors, the player will render into the container element.