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

You can use bower (bower install videojs-wavesurfer) or npm (npm install videojs-wavesurfer) to install the plugin, or download and include videojs.wavesurfer.js in your project.

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

<link href="http://vjs.zencdn.net/4.11.1/video-js.css" rel="stylesheet">

<script src="http://wavesurfer.fm/build/wavesurfer.min.js"></script>
<script src="http://vjs.zencdn.net/4.11.1/video.js"></script>

The plugin automatically registers itself when you include videojs.wavesurfer.js on your page:

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

Add an audio element:

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

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("myAudio",
{
    controls: true,
    autoplay: true,
    loop: false,
    width: 600,
    height: 300,
    plugins: {
        wavesurfer: {
            src: "media/heres_johnny.wav",
            msDisplayMax: 10,
            waveColor: "grey",
            progressColor: "black",
            cursorColor: "black",
            hideScrollbar: true
        }
    }
});

See the full example here.

Additional options for this plugin.

If you want to disable and hide specific controls, use the video.js children option:

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

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

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

<script src="http://wavesurfer.fm/plugin/wavesurfer.microphone.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 and hide some player controls that we don't use:

var player = videojs("myLiveAudio",
{
    controls: true,
    width: 600,
    height: 300,
    children: {
        controlBar: {
            children: {
                currentTimeDisplay: false,
                durationDisplay: false,
                muteToggle: false,
                timeDivider: false,
                volumeControl: false
            }
        }
    },
    plugins: {
        wavesurfer: {
            src: "live",
            waveColor: "black",
            cursorWidth: 0,
            interact: false
        }
    }
});

See the full example here.

Install grunt-cli:

sudo npm install -g grunt-cli

Install dependencies:

npm install

Build a minified version:

grunt

Generated files are placed in the dist directory.

This work is licensed under the MIT License.