videojs-wavesurfer

Video.js Wavesurfer

A video.js plugin that adds a navigable waveform for audio files, using the excellent wavesurfer.js library.

Using the Plugin

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.10.2/video-js.css" rel="stylesheet">

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

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

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

Include an audio tag:

<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
        }
    }
});

Notice the src option for the plugin; this setting is used to specify the URL of the audio file.

The msDisplayMax plugin option is an optional setting that defaults to 3 sec. It indicates the number of seconds that is considered the boundary value for displaying milliseconds in the time controls. An audio clip with a total length of 2 seconds and a msDisplayMax of 3 will use the format M:SS:MMM. Clips longer than msDisplayMax will be displayed as M:SS or HH:MM:SS.

License

This work is licensed under the MIT License.