Video.js Wavesurfer

A video.js plugin that adds a navigable waveform for audio and video files, using the wavesurfer.js library. Includes support for fullscreen mode and real-time visualization of microphone input.

Installation

You can use bower (bower install videojs-wavesurfer) or npm (npm install videojs-wavesurfer) to install the plugin, or download it here.

Since v1.0 this plugin is compatible with video.js 5.0 and newer. If you want to use this plugin with an older video.js 4.x version, check the archived releases for a 0.9.x or older release of this plugin.

Take a look at the changelog when upgrading from a previous version of videojs-wavesurfer.

Using the Plugin

The plugin depends on the video.js and wavesurfer.js libraries:

<link href="video-js.min.css" rel="stylesheet">
<script src="video.min.js"></script>

<script src="wavesurfer.min.js"></script>

The plugin automatically registers itself when the videojs.wavesurfer.js script is loaded:

<script src="videojs.wavesurfer.js"></script>

Add an audio element:

<audio id="myClip" class="video-js vjs-default-skin"></audio>

Or video element:

<video id="myClip" class="video-js vjs-default-skin"></video>

Plugin Options

Configure the player using the video.js options, and enable the plugin by adding a wavesurfer entry with the related wavesurfer.js options:

var player = videojs('myClip',
{
    controls: true,
    autoplay: true,
    loop: false,
    width: 600,
    height: 300,
    plugins: {
        wavesurfer: {
            src: 'media/hal.wav',
            msDisplayMax: 10,
            debug: true,
            waveColor: 'grey',
            progressColor: 'black',
            cursorColor: 'black',
            hideScrollbar: true
        }
    }
});

See the full audio example (demo or source) and the video example (demo or source).

The additional options for this plugin are:

Methods

Methods for this plugin documented below are available on the waveform object of the video.js player instance. For example:

player.waveform.destroy();

Other wavesurfer.js methods

You can access the wavesurfer instance, for example to call the zoom method, by using the waveform.surfer property on the player instance:

player.waveform.surfer.zoom(2);

Events

Plugin events that are available on the video.js player instance. For example:

player.on('waveReady', function()
{
    console.log('waveform is ready!');
});

Customizing controls

To disable and hide specific controls, use the video.js controlBar option:

controlBar: {
    // hide fullscreen control
    fullscreenToggle: false
},

Microphone plugin

It's also possible to use a microphone for real-time rendering of the audio waveform. This uses the microphone plugin that comes with wavesurfer.js.

Include the additional wavesurfer.microphone.js plugin on your page.

<script src="wavesurfer.microphone.min.js"></script>

Add an audio element:

<audio id="myLiveAudio" class="video-js vjs-default-skin"></audio>

Configure the player: use the value 'live' for the src option:

var player = videojs('myLiveAudio',
{
    controls: true,
    width: 600,
    height: 300,
    plugins: {
        wavesurfer: {
            src: 'live',
            debug: true,
            waveColor: 'black',
            cursorWidth: 0,
            interact: false
        }
    }
});

The microphone plugin has additional configuration options.

See the full live example (demo or source).

More features using other plugins

The Video.js community created lots of plugins that can be used to enhance the player's functionality. Plugins actually tested with videojs-wavesurfer:

• videojs-record - Adds support for recording audio/video/image files.

Contributing

Install grunt-cli:

sudo npm install -g grunt-cli

Install dependencies using npm:

npm install

Build a minified version:

grunt

Generated files are placed in the dist directory.

License

This work is licensed under the MIT License.