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 to install the plugin (bower install videojs-wavesurfer), or simply 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",
            "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.

License

This work is licensed under the MIT License.