Package Exports

videojs-wavesurfer

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (videojs-wavesurfer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Video.js Wavesurfer

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

Screenshot

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.