diff --git a/.gitignore b/.gitignore
index c231ee16..92481947 100644
--- a/.gitignore
+++ b/.gitignore
@@ -16,7 +16,6 @@ bower_components
# Build-related
dist/
-docs/
tmp
coverage/
.build_cache/
diff --git a/CHANGES.md b/CHANGES.md
index a682c5e7..d660a472 100644
--- a/CHANGES.md
+++ b/CHANGES.md
@@ -1,10 +1,9 @@
-videojs-wavesurfer changelog
-============================
+# videojs-wavesurfer changelog
-3.0.0 - unreleased
-------------------
+## 3.0.0 - unreleased
- Support for video.js progress control (#93)
+- Move documentation into docsify website (#100)
- Bump required video.js version to 7.0.5 or newer
- Bump required wavesurfer.js version to 3.3.0 or newer
@@ -15,23 +14,20 @@ videojs-wavesurfer changelog
using the config instead
-2.11.0 - 2019/10/11
--------------------
+## 2.11.0 - 2019/10/11
- Fix loading peaks data from JSON files (#90)
- Add `style` and `sass` entries to `package.json`
- Specify non-minified videojs-wavesurfer in `main` entry of `package.json`
-2.10.0 - 2019/09/30
--------------------
+## 2.10.0 - 2019/09/30
- New `abort` event; triggered when wavesurfer.js fetch call is cancelled (#87)
- Bump required wavesurfer.js version to 3.1.0
-2.9.0 - 2019/07/14
-------------------
+## 2.9.0 - 2019/07/14
- Replace usage of `WaveSurfer.util.ajax()` with `WaveSurfer.util.fetchFile()`
- Bump required wavesurfer.js version to 3.0.0
@@ -39,71 +35,61 @@ videojs-wavesurfer changelog
for `canvas` in the Picture-In-Picture browser API
-2.8.0 - 2019/03/18
-------------------
+## 2.8.0 - 2019/03/18
- Move event types to separate class
- Bump required wavesurfer.js version to 2.2.1
- Display `video` element in video example (#8)
-2.7.0 - 2019/02/08
-------------------
+## 2.7.0 - 2019/02/08
- Fix hiding `playToggle` control
- Fix ES export syntax for `Wavesurfer`
-2.6.4 - 2019/02/04
-------------------
+## 2.6.4 - 2019/02/04
- Bump required wavesurfer.js version to 2.1.3 for Safari browser
improvement
-2.6.3 - 2018/12/03
-------------------
+## 2.6.3 - 2018/12/03
- Improve API documentation (#77)
-2.6.2 - 2018/11/19
-------------------
+## 2.6.2 - 2018/11/19
- Bump required wavesurfer.js version to 2.1.1 for microphone support in
the Safari browser
- Examples: add Safari browser workaround (#47)
-2.6.1 - 2018/10/07
-------------------
+## 2.6.1 - 2018/10/07
- Fix hiding time controls (#73)
-2.6.0 - 2018/10/04
-------------------
+## 2.6.0 - 2018/10/04
- Bump required wavesurfer.js version to 2.1.0 for microphone support in
the MS Edge browser
-2.5.1 - 2018/08/08
-------------------
+## 2.5.1 - 2018/08/08
- Fix minified CSS file (#69)
- Add example showing integration with wavesurfer.js cursor plugin (#67)
-2.5.0 - 2018/06/03
-------------------
+## 2.5.0 - 2018/06/03
- Bugfix: replace custom tech for text tracks to fix high CPU usage and issue
with regular video.js players on the same page (#60, #62)
-2.4.0 - 2018/05/15
-------------------
+## 2.4.0 - 2018/05/15
- Add plugin style `vjs-wavesurfer` and prefix all custom plugin styles with
this selector. This should prevent clashes with regular video.js players
@@ -112,69 +98,59 @@ videojs-wavesurfer changelog
- Compile SCSS into CSS using webpack
-2.3.2 - 2018/05/07
-------------------
+## 2.3.2 - 2018/05/07
- Package library using webpack 4
-2.3.1 - 2018/04/30
-------------------
+## 2.3.1 - 2018/04/30
- Make sure plugin is only registered once
- Add `isDestroyed` method
- Add more tests
-2.3.0 - 2018/04/16
-------------------
+## 2.3.0 - 2018/04/16
- Package library using webpack (#55)
- Add unit tests using karma/webpack/jasmine (#55)
- Check if wavesurfer exists when calling destroy
-2.2.2 - 2018/03/06
-------------------
+## 2.2.2 - 2018/03/06
- Add ability to pass array of peaks data to `load` (#52)
-2.2.1 - 2018/02/20
-------------------
+## 2.2.1 - 2018/02/20
- Fix tech for compatibility with video.js 6.7.x (#49 by @mfairchild365)
-2.2.0 - 2018/01/23
-------------------
+## 2.2.0 - 2018/01/23
- Support for changing audio output device using `setAudioOutput(deviceId)`
- Added example that shows how to select an audio input device
- Bump required wavesurfer.js version to 2.0.3 for setSinkId feature
-2.1.4 - 2018/01/14
-------------------
+## 2.1.4 - 2018/01/14
- Bump required wavesurfer.js version to 2.0.2 for Chrome volume
deprecation fix
-2.1.3 - 2017/12/22
-------------------
+## 2.1.3 - 2017/12/22
- Bump required wavesurfer.js version to 2.0.1
-2.1.2 - 2017/12/13
-------------------
+## 2.1.2 - 2017/12/13
- Fix compatibility issue with videojs-record plugin (#46)
-2.1.1 - 2017/12/12
-------------------
+## 2.1.1 - 2017/12/12
- Added support for changing the playback rate (#43)
- Added `.videojs-wavesurfer` CSS class (#44 by @eiennosihaisya)
@@ -185,33 +161,28 @@ videojs-wavesurfer changelog
@mfairchild365)
-2.1.0 - 2017/12/05
-------------------
+## 2.1.0 - 2017/12/05
- Caption/subtitle support (#36 by @mfairchild365)
-2.0.3 - 2017/11/30
-------------------
+## 2.0.3 - 2017/11/30
- Fix Windows build
-2.0.2 - 2017/11/15
-------------------
+## 2.0.2 - 2017/11/15
- Updated `load` function to optionally load an array of pre-rendered
peak data (#38 by @rbwest)
-2.0.1 - 2017/10/03
-------------------
+## 2.0.1 - 2017/10/03
- Support for video.js 6.3.1 and newer
-2.0.0 - 2017/10/03
-------------------
+## 2.0.0 - 2017/10/03
- Rewrite plugin using ES6 (#29)
- video.js 6.0 or newer is now required: older versions are no longer supported
@@ -228,102 +199,86 @@ videojs-wavesurfer changelog
plugin, e.g. `player.wavesurfer().getDuration()`
-1.3.6 - 2017/09/23
-------------------
+## 1.3.6 - 2017/09/23
- Bugfix: properly update current time and duration display components (#34)
-1.3.5 - 2017/09/19
-------------------
+## 1.3.5 - 2017/09/19
- Bugfix: correct the uiElements check (#26)
-1.3.4 - 2017/09/19
-------------------
+## 1.3.4 - 2017/09/19
- Restricted required wavesurfer.js version to < 2.0.0
-1.3.3 - 2017/05/27
-------------------
+## 1.3.3 - 2017/05/27
- Use `video.js` AMD module name (#30)
-1.3.2 - 2017/04/09
-------------------
+## 1.3.2 - 2017/04/09
- Use `videojs.registerPlugin` in video.js 6.0.0 and newer (#27)
-1.3.1 - 2017/02/26
-------------------
+## 1.3.1 - 2017/02/26
- Added `getDuration` and `getCurrentTime` methods
-1.3.0 - 2017/02/13
-------------------
+## 1.3.0 - 2017/02/13
- Moved main script out of root into a new `src/js` directory
- NPM package now includes `dist` directory with minified files
-1.2.7 - 2017/01/15
-------------------
+## 1.2.7 - 2017/01/15
- Added `playbackFinish` event (#24)
-1.2.6 - 2016/09/30
-------------------
+## 1.2.6 - 2016/09/30
- Bugfix: made sure the `debug` option has a default value (`false`)
-1.2.5 - 2016/09/30
-------------------
+## 1.2.5 - 2016/09/30
- Added `waveReady` event, useful for initializing wavesurfer.js plugins
- Added support for the wavesurfer.js `splitChannels` option (#21)
-1.2.4 - 2016/09/16
-------------------
+## 1.2.4 - 2016/09/16
- Added `exportImage` to save an image of the waveform
- Bumped required wavesurfer.js version to 1.2.0 for `exportImage` method
-1.2.3 - 2016/08/27
-------------------
+## 1.2.3 - 2016/08/27
- Bugfix: added compatibility for video.js 5.11.0 and newer (#20)
-1.2.2 - 2016/08/08
-------------------
+## 1.2.2 - 2016/08/08
- Bugfix: corrected Node name for wavesurfer.js module (#19 by @monachilada)
-1.2.1 - 2016/05/22
-------------------
+## 1.2.1 - 2016/05/22
- Documentation updates
-1.2.0 - 2016/03/25
-------------------
+## 1.2.0 - 2016/03/25
- Prevented negative or invalid values in `formatTime`
- Documentation updates
-1.1.0 - 2016/02/26
-------------------
+## 1.1.0 - 2016/02/26
- Catch microphone device errors
- Bumped required wavesurfer.js version to 1.0.57 for microphone plugin fixes
@@ -331,169 +286,143 @@ videojs-wavesurfer changelog
- Bugfix: pass wavesurfer config to microphone plugin
-1.0.6 - 2016/01/17
-------------------
+## 1.0.6 - 2016/01/17
- Fixed issues with Firefox for Android (#15)
-1.0.5 - 2016/01/17
-------------------
+## 1.0.5 - 2016/01/17
- Propagate wavesurfer errors properly (#13 by @xlc)
-1.0.4 - 2015/12/21
-------------------
+## 1.0.4 - 2015/12/21
- Fixed wrong video.js module require for browserify
-1.0.3 - 2015/10/15
-------------------
+## 1.0.3 - 2015/10/15
- Fixed missing amd/node/global browser dependency for wavesurfer
-1.0.2 - 2015/10/15
-------------------
+## 1.0.2 - 2015/10/15
- Made sure controlBar is always showing (if `controls: true`)
- Fixed module Node/AMD/browser globals
-1.0.1 - 2015/10/14
-------------------
+## 1.0.1 - 2015/10/14
- Bugfix: use flex for controlBar so other plugins, like videojs-record, can
add more controls to it.
-1.0.0 - 2015/10/12
-------------------
+## 1.0.0 - 2015/10/12
- Support for video.js 5
- Dropped support for video.js 4.x
-0.9.9 - 2015/10/06
-------------------
+## 0.9.9 - 2015/10/06
- Use new `microphone.pause` and `microphone.play` during `live` mode
- Bumped minimum version for wavesurfer.js to 1.0.44 (for microphone plugin
updates)
-0.9.8 - 2015/10/04
-------------------
+## 0.9.8 - 2015/10/04
- Updated bower and npm so only video.js v4.x releases are fetched, v5.0 is not
supported yet (#5).
- Added ability to override waveform height (#9)
-0.9.7 - 2015/08/27
-------------------
+## 0.9.7 - 2015/08/27
- Allow custom wavesurfer container (#7)
-0.9.6 - 2015/03/19
-------------------
+## 0.9.6 - 2015/03/19
- Microphone plugin (if enabled) now also being removed in `destroy`
-0.9.5 - 2015/03/03
-------------------
+## 0.9.5 - 2015/03/03
- Compatibility fix for video.js 4.12
-0.9.4 - 2015/02/18
-------------------
+## 0.9.4 - 2015/02/18
- Compatibility with video.js 4.12.0
-0.9.3 - 2015/02/18
-------------------
+## 0.9.3 - 2015/02/18
- Documented video support and added an example (#3)
-0.9.2 - 2015/02/12
-------------------
+## 0.9.2 - 2015/02/12
- Updated metadata for video
-0.9.1 - 2015/01/14
-------------------
+## 0.9.1 - 2015/01/14
- Documentation and packaging fixes.
-0.9.0 - 2015/01/06
-------------------
+## 0.9.0 - 2015/01/06
- Bugfixes
-0.8.1 - 2014/12/17
-------------------
+## 0.8.1 - 2014/12/17
- Fixed bug with loading `Blob` or `File` objects
-0.8.0 - 2014/12/17
-------------------
+## 0.8.0 - 2014/12/17
- Added microphone support for live audio visualization
-0.7.0 - 2014/12/08
-------------------
+## 0.7.0 - 2014/12/08
- Ignore fullscreen mode when no valid src was loaded
- Hide loading spinner when no valid src is found
- Fixed issue with currentTimeDisplay's internal timer
-0.6.0 - 2014/11/25
-------------------
+## 0.6.0 - 2014/11/25
- Bugfixes
-0.5.0 - 2014/11/25
-------------------
+## 0.5.0 - 2014/11/25
- Bugfixes
-0.4.0 - 2014/11/19
-------------------
+## 0.4.0 - 2014/11/19
- Added `msDisplayMax` plugin setting
- Minor bugfixes, more docs
-0.3.0 - 2014/11/14
-------------------
+## 0.3.0 - 2014/11/14
- Added fullscreen feature
- Fixed issue with auto-play (#2)
- Made package available on bower and npm
-0.2.0 - 2014/10/05
-------------------
+## 0.2.0 - 2014/10/05
-- Compatibility with videojs 4.6 - 4.9
+- Compatibility with video.js 4.6 - 4.9
-0.1.0 - 2014/03/18
-------------------
+## 0.1.0 - 2014/03/18
- Initial release
diff --git a/LICENSE b/LICENSE
index 447ac244..bd87de03 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,6 +1,6 @@
The MIT License (MIT)
-Copyright (c) 2014-2019 Collab
+Copyright (c) 2014-2020 Collab
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
diff --git a/README.md b/README.md
index bad34af6..5f912d7d 100644
--- a/README.md
+++ b/README.md
@@ -1,12 +1,12 @@
-Video.js Wavesurfer
-===================
+videojs-wavesurfer
+==================
A [video.js](http://www.videojs.com/) plugin that adds a navigable waveform
for audio and video files, using the [wavesurfer.js](https://github.com/katspaugh/wavesurfer.js)
library. Includes support for fullscreen mode and [real-time visualization of microphone
-input](#microphone-plugin).
+input](https://collab-project.github.io/videojs-wavesurfer/#/microphone).
-![Screenshot](examples/img/screenshot.png?raw=true "Screenshot")
+![Screenshot](docs/img/screenshot.png?raw=true "Screenshot")
[![npm version](https://img.shields.io/npm/v/videojs-wavesurfer.svg?style=flat)](https://www.npmjs.com/package/videojs-wavesurfer)
[![npm](https://img.shields.io/npm/dm/videojs-wavesurfer.svg)](https://github.com/collab-project/videojs-wavesurfer/releases)
@@ -16,438 +16,10 @@ input](#microphone-plugin).
![Size](https://img.shields.io/bundlephobia/minzip/videojs-wavesurfer.svg?style=flat)
![Stars](https://img.shields.io/github/stars/collab-project/videojs-wavesurfer.svg?style=social)
-Table of Contents
------------------
+## Documentation
-- [Installation](#installation)
-- [Using the Plugin](#using-the-plugin)
-- [Plugin Options](#plugin-options)
-- [Examples](#examples)
-- [Methods](#methods)
- - [Other wavesurfer.js methods](#other-wavesurferjs-methods)
-- [Events](#events)
-- [Customizing controls](#customizing-controls)
-- [Responsive layout](#responsive-layout)
-- [Text Tracks](#text-tracks)
-- [Microphone plugin](#microphone-plugin)
-- [Using peaks for long audio files](#using-peaks-for-large-audio-files)
-- [Change audio output or input device](#change-audio-output-or-input-device)
-- [Webpack](#webpack)
-- [Using with React](#using-with-react)
-- [Using other frameworks](#using-other-frameworks)
-- [More features using other plugins](#more-features-using-other-plugins)
-- [Development](#development)
-- [License](#license)
-- [Donate](#donate)
+The documentation and examples can be found on: https://collab-project.github.io/videojs-wavesurfer
-Installation
-------------
-
-You can use [npm](https://www.npmjs.org) (`npm install videojs-wavesurfer`) to install the
-plugin, or [download it here](https://github.com/collab-project/videojs-wavesurfer/releases).
-If you want to try the examples, check [these instructions below](#examples).
-
-Since v3.0 this plugin is compatible with video.js 7.0.5 and wavesurfer.js 3.2.0 and
-newer. If you want to use this plugin with an older video.js or wavesurfer.js version,
-check the [archived releases](https://github.com/collab-project/videojs-wavesurfer/releases)
-for an older release of this plugin.
-
-Take a look at the [changelog](./CHANGES.md) when upgrading from a previous
-version of videojs-wavesurfer.
-
-Using the Plugin
-----------------
-
-The plugin depends on the video.js and wavesurfer.js libraries:
-
-```html
-
-
-
-
-
-
-
-```
-
-The plugin automatically registers itself when the `videojs.wavesurfer.js`
-script is loaded:
-
-```html
-
-```
-
-Add an `audio` element:
-
-```html
-
-```
-
-Or `video` element:
-
-```html
-
-```
-
-Plugin Options
---------------
-
-Configure the player using the video.js
-[options](https://github.com/videojs/video.js/blob/master/docs/guides/options.md),
-and enable the plugin by adding a `wavesurfer` entry with the related wavesurfer.js
-[options](https://wavesurfer-js.org/docs/options.html):
-
-```javascript
-let player = videojs('myClip', {
- controls: true,
- autoplay: false,
- loop: false,
- fluid: false,
- width: 600,
- height: 300,
- plugins: {
- wavesurfer: {
- backend: 'MediaElement',
- msDisplayMax: 10,
- debug: true,
- waveColor: 'grey',
- progressColor: 'black',
- cursorColor: 'black',
- hideScrollbar: true
- }
- }
-}, function() {
- // print version information at startup
- let msg = 'Using video.js ' + videojs.VERSION +
- ' with videojs-wavesurfer ' +
- videojs.getPluginVersion('wavesurfer') +
- ' and wavesurfer.js ' + WaveSurfer.VERSION;
- videojs.log(msg);
-
- // load url
- player.src({src: 'media/hal.wav', type: 'audio/wav'});
-});
-```
-
-The additional options for this plugin are:
-
-| option | type | default | description |
-| ------ | ---- | ------- | ----------- |
-| `peaks` | string | `null` | The URL of the JSON file with peaks data corresponding to the source audio/video file. See the [peaks section](#using-peaks-for-large-audio-files) below for more information. |
-| `debug` | boolean | `false` | Display internal log messages using the `videojs.log` method. |
-| `msDisplayMax` | float | `3` | 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 with a duration that is longer than `msDisplayMax` will be displayed as `M:SS` or `HH:MM:SS`.|
-
-Examples
---------
-
-See the full `audio` example ([demo](https://collab-project.github.io/videojs-wavesurfer/examples/index.html) or [source](https://github.com/collab-project/videojs-wavesurfer/blob/master/examples/index.html)) and
-the `video` example ([demo](https://collab-project.github.io/videojs-wavesurfer/examples/video.html) or [source](https://github.com/collab-project/videojs-wavesurfer/blob/master/examples/video.html)).
-
-To try out the examples locally, download the [zipfile](https://github.com/collab-project/videojs-wavesurfer/archive/master.zip)
-and unpack it, or checkout the repository using Git:
-```
-git clone https://github.com/collab-project/videojs-wavesurfer.git
-```
-
-And install the dependencies using npm:
-```
-cd videojs-wavesurfer
-npm install
-```
-
-Build the library and assets once:
-
-```
-npm run build
-```
-
-And start the local webserver for the examples:
-```
-npm run start
-```
-
-And open http://localhost:8080/examples/index.html in a browser.
-
-Methods
--------
-
-Methods for this plugin documented below are available on the `wavesurfer` method
-of the video.js player instance. For example:
-
-```javascript
-player.on('ready', function() {
- player.wavesurfer().destroy();
-});
-```
-
-| Method | Description |
-| ------ | ----------- |
-| `destroy` | Destroys the wavesurfer instance and children (including the video.js player). |
-| `load(url)` | Load the clip at `url`. Also supports loading [File](https://developer.mozilla.org/nl/docs/Web/API/File) or [Blob](https://developer.mozilla.org/nl/docs/Web/API/Blob) objects. |
-| `setVolume(level)` | Set the volume level (value between 0.0 and 1.0). |
-| `play` | Start playback. |
-| `pause` | Pause playback. |
-| `getDuration` | Get the length of the stream in seconds. Returns 0 if no stream is available (yet). |
-| `getCurrentTime` | Get the current time (in seconds) of the stream during playback. Returns 0 if no stream is available (yet). |
-| `exportImage(format, quality)` | Save waveform image as data URI. Default format is `'image/png'`. |
-| `setAudioOutput(deviceId)` | Change the audio output device using its [deviceId](https://developer.mozilla.org/en-US/docs/Web/API/MediaDeviceInfo/deviceId). |
-
-Other wavesurfer.js methods
----------------------------
-
-You can access the wavesurfer instance, for example to call the
-wavesurfer.js `seekTo` method, by using the `surfer` property of the
-`wavesurfer` plugin instance:
-
-```javascript
-player.wavesurfer().surfer.seekTo(1);
-```
-
-Events
-------
-
-Plugin events that are available on the video.js player instance. For example:
-
-```javascript
-player.on('waveReady', function(event) {
- console.log('waveform is ready!');
-});
-```
-
-| Event | Description |
-| ----- | ----------- |
-| `waveReady` | Audio is loaded, decoded and the waveform is drawn. |
-| `playbackFinish` | Audio playback finished. |
-| `audioOutputReady` | Audio output was changed and is now active. |
-| `abort` | Audio loading process was interrupted and cancelled. |
-| `error` | Error occurred. |
-
-Customizing controls
---------------------
-
-To disable and hide specific controls, use the video.js `controlBar` option:
-
-```javascript
-controlBar: {
- // hide fullscreen control
- fullscreenToggle: false
-},
-```
-
-Responsive layout
------------------
-
-The `fluid` option for video.js will resize the player according to the size
-of the window.
-
-Configure the player; enable the video.js `'fluid'` option:
-
-```javascript
-fluid: true
-```
-
-See the full `fluid` example
-([demo](https://collab-project.github.io/videojs-wavesurfer/examples/fluid.html) or
-[source](https://github.com/collab-project/videojs-wavesurfer/blob/master/examples/fluid.html)).
-
-Text Tracks
------------
-
-Text tracks (or captions/subtitles) are a feature of HTML5 for displaying
-time-triggered text to the user. Video.js offers a cross-browser implementation
-of text tracks. For more information, check the
-[documentation](https://github.com/videojs/video.js/blob/master/docs/guides/text-tracks.md).
-
-![Text tracks screenshot](examples/img/text-tracks.png?raw=true "Text tracks screenshot")
-
-See the full `texttrack` example
-([demo](https://collab-project.github.io/videojs-wavesurfer/examples/texttrack.html) or
-[source](https://github.com/collab-project/videojs-wavesurfer/blob/master/examples/texttrack.html)).
-
-Microphone plugin
------------------
-
-It's also possible to use a microphone for real-time rendering of the audio waveform. This
-uses the [microphone plugin](https://github.com/katspaugh/wavesurfer.js/blob/master/src/plugin/microphone.js)
-that comes with wavesurfer.js.
-
-Include the additional `wavesurfer.microphone.js` plugin on your page.
-
-```html
-
-```
-
-Add an `audio` element:
-
-```html
-
-```
-
-Hide irrelevant controls, specify the `WebAudio` backend and enable the microphone plugin:
-
-```javascript
-let player = videojs('myLiveAudio', {
- controls: true,
- width: 600,
- height: 300,
- controlBar: {
- currentTimeDisplay: false,
- timeDivider: false,
- durationDisplay: false,
- remainingTimeDisplay: false,
- volumePanel: false,
- progressControl: false
- },
- plugins: {
- wavesurfer: {
- debug: true,
- backend: 'WebAudio',
- waveColor: 'black',
- cursorWidth: 0,
- interact: false,
- hideScrollbar: true,
- plugins: [
- // enable microphone plugin
- WaveSurfer.microphone.create({
- bufferSize: 4096,
- numberOfInputChannels: 1,
- numberOfOutputChannels: 1,
- constraints: {
- video: false,
- audio: true
- }
- })
- ]
- }
- }
-});
-```
-
-The microphone plugin has additional configuration
-[options](https://wavesurfer-js.org/plugins/microphone.html).
-
-See the full `live` example
-([demo](https://collab-project.github.io/videojs-wavesurfer/examples/live.html) or
-[source](https://github.com/collab-project/videojs-wavesurfer/blob/master/examples/live.html)).
-
-Using peaks for large audio files
---------------------------------
-
-When you're dealing with long audio files, it's sometimes useful to generate the waveform data,
-called peaks, on the server. This allows wavesurfer.js to load the peaks JSON data and create the
-waveform from that pre-rendered peak data. This JSON file can be generated using the
-[bbc/audiowaveform](https://github.com/bbc/audiowaveform) utility. For more information, see the
-[wavesurfer.js FAQ](https://wavesurfer-js.org/faq/).
-
-See the full `peaks` example
-([demo](https://collab-project.github.io/videojs-wavesurfer/examples/peaks.html) or
-[source](https://github.com/collab-project/videojs-wavesurfer/blob/master/examples/peaks.html)).
-
-Change audio output or input device
------------------------------------
-
-If your device has multiple audio output devices, use `setAudioOutput(deviceId)` to change
-the active audio output device, and listen for the `audioOutputReady` event to be notified
-when the new output device is active.
-
-```javascript
-// change audio output device
-player.wavesurfer().setAudioOutput(deviceId);
-```
-
-See the full `output` example
-([demo](https://collab-project.github.io/videojs-wavesurfer/examples/output.html) or
-[source](https://github.com/collab-project/videojs-wavesurfer/blob/master/examples/output.html)).
-
-If your device has multiple audio input devices and you want to display
-these devices and allow the user to choose one, check out the the full `input` example
-([demo](https://collab-project.github.io/videojs-wavesurfer/examples/input.html) or
-[source](https://github.com/collab-project/videojs-wavesurfer/blob/master/examples/input.html)).
-
-Webpack
--------
-
-The [webpack](https://github.com/collab-project/videojs-wavesurfer/wiki/Webpack) wiki page shows how to configure webpack for videojs-wavesurfer.
-
-Using with React
-----------------
-
-The React [wiki page](https://github.com/collab-project/videojs-wavesurfer/wiki/React) wiki page
-shows how to get started with React and videojs-wavesurfer using the
-[create-react-app](https://github.com/facebook/create-react-app) tool.
-
-Alternatively, the `react` example shows how to integrate this plugin in a [React](https://reactjs.org) component
-([demo](https://collab-project.github.io/videojs-wavesurfer/examples/react/index.html) or
-[source](https://github.com/collab-project/videojs-wavesurfer/blob/master/examples/react/index.html)).
-
-Using other frameworks
-----------------------
-
-The [Angular](https://github.com/collab-project/videojs-wavesurfer/wiki/Angular) wiki page shows how to setup Angular and videojs-wavesurfer.
-
-The [Vue.js](https://github.com/collab-project/videojs-wavesurfer/wiki/Vue.js) wiki page shows how to setup Vue.js and videojs-wavesurfer.
-
-More features using other plugins
----------------------------------
-
-Check the `plugin` example that extends the player with the wavesurfer.js cursor plugin
-([demo](https://collab-project.github.io/videojs-wavesurfer/examples/plugin.html) or
-[source](https://github.com/collab-project/videojs-wavesurfer/blob/master/examples/plugin.html)).
-
-The Video.js community created
-[lots of plugins](https://github.com/videojs/video.js/wiki/Plugins)
-that can be used to enhance the player's functionality. Plugins actually
-tested with `videojs-wavesurfer`:
-
-- [videojs-record](https://github.com/collab-project/videojs-record) - Adds
- support for recording audio/video/image files.
-
-Development
------------
-
-Install dependencies using npm:
-
-```
-npm install
-```
-
-Build development and minified versions of the library and stylesheets:
-
-```
-npm run build
-```
-
-Generated files are placed in the `dist` directory.
-
-During development:
-
-```
-npm run start
-```
-
-This will watch the source directory and rebuild when any changes
-are detected. It will also serve the files on http://127.0.0.1:8080.
-
-Generate the API documentation (placed in the `docs` directory):
-
-```
-npm run docs
-```
-
-All commands for development are listed in the `package.json` file and
-are run using:
-
-```
-npm run
-```
-
-License
--------
+## License
This work is licensed under the [MIT License](LICENSE).
-
-Donate
-------
-
-Please consider donating if you like this project. Bitcoin is accepted
-and can be sent to `3PmXCqUggtq7KUWPbpN8WhMnb1Mfb1jbq8`.
diff --git a/docs/.nojekyll b/docs/.nojekyll
new file mode 100644
index 00000000..e69de29b
diff --git a/docs/README.md b/docs/README.md
new file mode 100644
index 00000000..f14d65cc
--- /dev/null
+++ b/docs/README.md
@@ -0,0 +1,10 @@
+# videojs-wavesurfer
+
+A [video.js](http://www.videojs.com/) plugin that adds a navigable waveform
+for audio and video files, using the [wavesurfer.js](https://github.com/katspaugh/wavesurfer.js)
+library.
+
+Includes support for fullscreen mode and [real-time visualization of microphone
+input](#microphone-plugin).
+
+![Screenshot](img/screenshot.png?raw=true "videojs-wavesurfer")
diff --git a/docs/_sidebar.md b/docs/_sidebar.md
new file mode 100644
index 00000000..31668779
--- /dev/null
+++ b/docs/_sidebar.md
@@ -0,0 +1,27 @@
+- Getting started
+ - [Installation](install.md)
+ - [Usage](usage.md)
+ - [Examples](examples.md)
+
+- Guide
+ - [Options](options.md)
+ - [Methods](methods.md)
+ - [Events](events.md)
+ - [Customizing controls](controls.md)
+ - [Reponsive layout](responsive.md)
+ - [Text tracks](text-tracks.md)
+ - [Microphone plugin](microphone.md)
+ - [Using peaks for large audio files](peaks.md)
+ - [Change audio device](change-device.md)
+ - [More features using other plugins](plugins.md)
+
+- Frameworks
+ - [Webpack](webpack.md)
+ - [React](react.md)
+ - [Angular](angular.md)
+ - [Vue](vue.md)
+
+- [Development](development.md)
+- [Changelog](https://github.com/collab-project/videojs-wavesurfer/blob/master/CHANGES.md)
+- [License](license.md)
+- [Donate](donate.md)
diff --git a/docs/angular.md b/docs/angular.md
new file mode 100644
index 00000000..31929fd3
--- /dev/null
+++ b/docs/angular.md
@@ -0,0 +1,305 @@
+# Angular
+
+This document describes how to setup [Angular](https://angular.io) with videojs-wavesurfer.
+
+For more information, check the video.js [documentation](https://github.com/videojs/video.js/blob/master/docs/guides/angular.md)
+for Angular.
+
+## Installation
+
+Create a project directory, e.g. `angular-videojs-wavesurfer`.
+
+Create a `package.json` file inside that project directory that lists the project
+dependencies:
+
+```json
+{
+ "name": "angular-videojs-wavesurfer",
+ "version": "1.0.0",
+ "scripts": {
+ "start": "webpack-dev-server --mode development"
+ },
+ "dependencies": {
+ "@angular/common": "^8.1.2",
+ "@angular/compiler": "^8.1.2",
+ "@angular/core": "^8.1.2",
+ "@angular/forms": "^8.1.2",
+ "@angular/platform-browser": "^8.1.2",
+ "@angular/platform-browser-dynamic": "^8.1.2",
+ "@angular/router": "^8.1.2",
+ "core-js": "^3.1.4",
+ "rxjs": "^6.5.2",
+ "zone.js": "^0.9.1"
+ },
+ "devDependencies": {
+ "@types/node": "^12.6.8",
+ "html-webpack-plugin": "^3.2.0",
+ "raw-loader": "^3.1.0",
+ "ts-loader": "^6.0.4",
+ "typescript": "^3.5.3",
+ "webpack": "^4.36.1",
+ "webpack-cli": "^3.3.6",
+ "webpack-dev-server": "^3.7.2"
+ }
+}
+```
+
+Install the dependencies:
+
+```console
+npm install
+```
+
+Install and save `videojs-wavesurfer` and `@types/video.js`:
+
+```console
+npm install --save videojs-record @types/video.js
+```
+
+## Configuration
+
+Create `tsconfig.json`:
+
+```json
+{
+ "compilerOptions": {
+ "emitDecoratorMetadata": true,
+ "experimentalDecorators": true,
+ "target": "ES5"
+ }
+}
+```
+
+Create a Webpack configuration file called `webpack.config.js`:
+
+```javascript
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const ProvidePlugin = require('webpack/lib/ProvidePlugin');
+
+module.exports = {
+ entry: './src/main.ts',
+ resolve: {
+ extensions: ['.ts', '.js'],
+ alias: {
+ videojs: 'video.js',
+ WaveSurfer: 'wavesurfer.js'
+ }
+ },
+ module: {
+ rules: [
+ {
+ test: /\.ts$/,
+ use: ['ts-loader']
+ },
+ {
+ test: /\.(html|css)$/,
+ use: 'raw-loader'
+ }
+ ]
+ },
+ plugins: [
+ new ProvidePlugin({
+ videojs: 'video.js/dist/video.cjs.js'
+ }),
+ new HtmlWebpackPlugin({ template: './src/index.html' })
+ ]
+}
+```
+
+## Sample Project
+
+Create the `src/app/` directory and add a new Angular component for videojs-wavesurfer
+in `src/app/videojs.wavesurfer.component.ts`:
+
+```javascript
+import {
+ Component,
+ OnInit,
+ OnDestroy,
+ ElementRef
+} from '@angular/core';
+
+import videojs from 'video.js';
+import * as WaveSurfer from 'wavesurfer.js';
+
+/*
+// Required imports when using videojs-wavesurfer 'live' mode with the microphone plugin
+import * as adapter from 'webrtc-adapter/out/adapter_no_global.js';
+import * as MicrophonePlugin from 'wavesurfer.js/dist/plugin/wavesurfer.microphone.js';
+WaveSurfer.microphone = MicrophonePlugin;
+*/
+
+// Register videojs-wavesurfer plugin
+import * as Wavesurfer from 'videojs-wavesurfer/dist/videojs.wavesurfer.js';
+
+@Component({
+ selector: 'videojs-wavesurfer',
+ template: `
+
+
+ `
+})
+
+export class VideoJSWavesurferComponent implements OnInit, OnDestroy {
+
+ // reference to the element itself: used to access events and methods
+ private _elementRef: ElementRef
+
+ // index to create unique ID for component
+ idx = 'clip1';
+
+ private config: any;
+ private player: any;
+ private plugin: any;
+
+ // constructor initializes our declared vars
+ constructor(elementRef: ElementRef) {
+ this.player = false;
+
+ // save reference to plugin (so it initializes)
+ this.plugin = Wavesurfer;
+
+ // video.js configuration
+ this.config = {
+ controls: true,
+ autoplay: false,
+ fluid: false,
+ loop: false,
+ width: 600,
+ height: 300,
+ plugins: {
+ // configure videojs-wavesurfer plugin
+ wavesurfer: {
+ src: '/hal.wav',
+ msDisplayMax: 10,
+ debug: true,
+ waveColor: '#4A4A22',
+ progressColor: 'black',
+ cursorColor: 'black',
+ hideScrollbar: true
+ }
+ }
+ };
+ }
+
+ ngOnInit() {}
+
+ // use ngAfterViewInit to make sure we initialize the videojs element
+ // after the component template itself has been rendered
+ ngAfterViewInit() {
+ // ID with which to access the template's audio element
+ let el = 'audio_' + this.idx;
+
+ // setup the player via the unique element ID
+ this.player = videojs(document.getElementById(el), this.config, () => {
+ console.log('player ready! id:', el);
+
+ // print version information at startup
+ var msg = 'Using video.js ' + videojs.VERSION +
+ ' with videojs-wavesurfer ' + videojs.getPluginVersion('wavesurfer') +
+ ' and wavesurfer.js ' + WaveSurfer.VERSION;
+ videojs.log(msg);
+ });
+
+ this.player.on('waveReady', event => {
+ console.log('waveform is ready!');
+ });
+
+ this.player.on('playbackFinish', event => {
+ console.log('playback finished.');
+ });
+
+ // error handling
+ this.player.on('error', (element, error) => {
+ console.warn(error);
+ });
+
+ this.player.on('deviceError', () => {
+ console.error('device error:', this.player.deviceErrorCode);
+ });
+ }
+
+ // use ngOnDestroy to detach event handlers and remove the player
+ ngOnDestroy() {
+ if (this.player) {
+ this.player.dispose();
+ this.player = false;
+ }
+ }
+
+}
+```
+
+Create the Angular app module in `src/app/app.module.ts`:
+
+```ts
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+import { VideoJSWavesurferComponent } from './videojs.wavesurfer.component';
+
+@NgModule({
+ imports: [BrowserModule],
+ declarations: [VideoJSWavesurferComponent],
+ bootstrap: [VideoJSWavesurferComponent]
+})
+export class AppModule { }
+```
+
+Create an Angular polyfills file in `src/polyfills.ts`:
+
+```ts
+import 'core-js/features/reflect';
+import 'zone.js/dist/zone';
+```
+
+Create the Angular main file in `src/main.ts`:
+
+```ts
+import './polyfills';
+
+import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
+import { AppModule } from './app/app.module';
+
+platformBrowserDynamic().bootstrapModule(AppModule);
+```
+
+And finally, create the main index HTML file in `src/index.html`:
+
+```html
+
+
+
+
+ Angular videojs-wavesurfer example
+
+
+
+
+
+
+
Angular + videojs-wavesurfer
+
+
+
+```
+
+## Content
+
+Download the [example audio file](https://github.com/collab-project/videojs-wavesurfer/raw/master/examples/media/hal.wav)
+and place it in the project directory.
+
+## Run example
+
+Start the development server:
+
+```console
+npm start
+```
+
+And open http://localhost:8080/ in a browser.
diff --git a/docs/change-device.md b/docs/change-device.md
new file mode 100644
index 00000000..2f33ef07
--- /dev/null
+++ b/docs/change-device.md
@@ -0,0 +1,30 @@
+# Change device
+
+## Output
+
+### Example
+
+- [online demo](https://collab-project.github.io/videojs-wavesurfer/examples/output.html)
+- [demo source](https://github.com/collab-project/videojs-wavesurfer/blob/master/examples/output.html)
+
+
+### Usage
+
+If your device has multiple audio output devices, use `setAudioOutput(deviceId)` to change
+the active audio output device, and listen for the `audioOutputReady` event to be notified
+when the new output device is active.
+
+```javascript
+// change audio output device
+player.wavesurfer().setAudioOutput(deviceId);
+```
+
+## Input
+
+If your device has multiple audio input devices and you want to display
+these devices and allow the user to choose one, check out the input example.
+
+#### Example
+
+- [online demo](https://collab-project.github.io/videojs-wavesurfer/examples/input.html)
+- [demo source](https://github.com/collab-project/videojs-wavesurfer/blob/master/examples/input.html)
diff --git a/docs/controls.md b/docs/controls.md
new file mode 100644
index 00000000..b6fa0e62
--- /dev/null
+++ b/docs/controls.md
@@ -0,0 +1,12 @@
+# Customizing controls
+
+To disable and hide specific controls, use the video.js `controlBar` option:
+
+```javascript
+controlBar: {
+ // hide fullscreen control
+ fullscreenToggle: false
+}
+```
+
+For more information, see the video.js [component options](https://github.com/videojs/video.js/blob/master/docs/guides/options.md#component-options).
diff --git a/docs/development.md b/docs/development.md
new file mode 100644
index 00000000..2c61ae63
--- /dev/null
+++ b/docs/development.md
@@ -0,0 +1,37 @@
+# Development
+
+Install dependencies using npm:
+
+```
+npm install
+```
+
+Build development and minified versions of the library and stylesheets:
+
+```
+npm run build
+```
+
+Generated files are placed in the `dist` directory.
+
+During development:
+
+```
+npm run start
+```
+
+This will watch the source directory and rebuild when any changes
+are detected. It will also serve the files on http://127.0.0.1:8080.
+
+Generate the API documentation (placed in the `docs` directory):
+
+```
+npm run docs
+```
+
+All commands for development are listed in the `package.json` file and
+are run using:
+
+```
+npm run
+```
diff --git a/docs/donate.md b/docs/donate.md
new file mode 100644
index 00000000..358c061a
--- /dev/null
+++ b/docs/donate.md
@@ -0,0 +1,4 @@
+# Donate
+
+Please consider donating if you like this project. Bitcoin is accepted
+and can be sent to `3PmXCqUggtq7KUWPbpN8WhMnb1Mfb1jbq8`.
diff --git a/docs/events.md b/docs/events.md
new file mode 100644
index 00000000..e1f1432e
--- /dev/null
+++ b/docs/events.md
@@ -0,0 +1,19 @@
+# Events
+
+The events for this plugin are available on the video.js player instance.
+
+For example:
+
+```javascript
+player.on('waveReady', function(event) {
+ console.log('waveform is ready!');
+});
+```
+
+| Event | Description |
+| ----- | ----------- |
+| `waveReady` | Audio is loaded, decoded and the waveform is drawn. |
+| `playbackFinish` | Audio playback finished. |
+| `audioOutputReady` | Audio output was changed and is now active. |
+| `abort` | Audio loading process was interrupted and cancelled. |
+| `error` | Error occurred. |
diff --git a/docs/examples.md b/docs/examples.md
new file mode 100644
index 00000000..58ffdeba
--- /dev/null
+++ b/docs/examples.md
@@ -0,0 +1,47 @@
+# Examples
+
+View the examples online:
+
+| Example | Description | Demo | Source |
+| --- | --- | --- | --- |
+| **Audio** | Basic audio example | [online demo](https://collab-project.github.io/videojs-wavesurfer/examples/index.html) | [example source](https://github.com/collab-project/videojs-wavesurfer/blob/master/examples/index.html) |
+| **Video** | Basic video example | [online demo](https://collab-project.github.io/videojs-wavesurfer/examples/video.html) | [example source](https://github.com/collab-project/videojs-wavesurfer/blob/master/examples/video.html) |
+| **Responsive** | Enable [responsive layout](responsive.md) | [online demo](https://collab-project.github.io/videojs-wavesurfer/examples/fluid.html) | [example source](https://github.com/collab-project/videojs-wavesurfer/blob/master/examples/fluid.html) |
+| **Text tracks** | Display [text tracks](text-tracks.md) | [online demo](https://collab-project.github.io/videojs-wavesurfer/examples/texttrack.html) | [example source](https://github.com/collab-project/videojs-wavesurfer/blob/master/examples/texttrack.html) |
+| **Microphone** | Real-time waveform rendering of [microphone](microphone.md) | [online demo](https://collab-project.github.io/videojs-wavesurfer/examples/live.html) | [example source](https://github.com/collab-project/videojs-wavesurfer/blob/master/examples/live.html) |
+| **Peaks** | Use JSON [peaks data](peaks.md) to render waveform | [online demo](https://collab-project.github.io/videojs-wavesurfer/examples/peaks.html) | [example source](https://github.com/collab-project/videojs-wavesurfer/blob/master/examples/peaks.html) |
+| **Output device** | Change audio [output device](change-device.md) | [online demo](https://collab-project.github.io/videojs-wavesurfer/examples/output.html) | [example source](https://github.com/collab-project/videojs-wavesurfer/blob/master/examples/output.html) |
+| **Input device** | Change audio [input device](change-device.md) | [online demo](https://collab-project.github.io/videojs-wavesurfer/examples/input.html) | [example source](https://github.com/collab-project/videojs-wavesurfer/blob/master/examples/input.html) |
+| **Cursor** | Enable more [wavesurfer.js plugins](plugins.md) | [online demo](https://collab-project.github.io/videojs-wavesurfer/examples/plugin.html) | [example source](https://github.com/collab-project/videojs-wavesurfer/blob/master/examples/plugin.html) |
+| **React** | Basic [React](react.md) example | [online demo](https://collab-project.github.io/videojs-wavesurfer/examples/react/index.html) | [example source](https://github.com/collab-project/videojs-wavesurfer/blob/master/examples/react/index.html) |
+
+## Local
+
+To try out the examples locally either:
+
+- download the [zipfile](https://github.com/collab-project/videojs-wavesurfer/archive/master.zip) and unpack it
+- or checkout the repository with Git:
+```console
+git clone https://github.com/collab-project/videojs-wavesurfer.git
+```
+
+1. Install the dependencies:
+
+```console
+cd /path/to/videojs-wavesurfer
+npm install
+```
+
+2. Build the library and assets once:
+
+```console
+npm run build
+```
+
+3. And start the local examples webserver:
+
+```console
+npm run start
+```
+
+Open http://localhost:8080/examples/index.html in a browser.
diff --git a/examples/img/screenshot.png b/docs/img/screenshot.png
similarity index 100%
rename from examples/img/screenshot.png
rename to docs/img/screenshot.png
diff --git a/examples/img/text-tracks.png b/docs/img/text-tracks.png
similarity index 100%
rename from examples/img/text-tracks.png
rename to docs/img/text-tracks.png
diff --git a/docs/index.html b/docs/index.html
new file mode 100644
index 00000000..b298a6ce
--- /dev/null
+++ b/docs/index.html
@@ -0,0 +1,24 @@
+
+
+
+
+ videojs-wavesurfer
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/docs/install.md b/docs/install.md
new file mode 100644
index 00000000..97e40ace
--- /dev/null
+++ b/docs/install.md
@@ -0,0 +1,41 @@
+# Installation
+
+You can use [npm](https://www.npmjs.org) to install the plugin:
+
+```
+npm install videojs-wavesurfer
+```
+
+Or [download it from Github](https://github.com/collab-project/videojs-wavesurfer/releases).
+
+## CDN
+
+Using the [unpkg.com](https://unpkg.com) CDN:
+
+```html
+
+
+
+
+
+```
+
+Alternative CDN locations:
+
+- https://cdn.jsdelivr.net/npm/videojs-wavesurfer/
+- https://cdnjs.com/libraries/videojs-wavesurfer
+- http://www.bootcdn.cn/videojs-wavesurfer
+
+## Upgrade
+
+Since v3.0 this plugin is compatible with:
+
+- video.js 7.0.5 or newer
+- wavesurfer.js 3.3.0 or newer
+
+If you want to use this plugin with an older video.js or wavesurfer.js version,
+check the [archived releases](https://github.com/collab-project/videojs-wavesurfer/releases)
+for an older release of this plugin.
+
+Also take a look at the [changelog](changelog.md) when upgrading from a previous
+version of videojs-wavesurfer.
diff --git a/docs/license.md b/docs/license.md
new file mode 100644
index 00000000..2ad58116
--- /dev/null
+++ b/docs/license.md
@@ -0,0 +1,3 @@
+# License
+
+This work is licensed under the [MIT License](https://github.com/collab-project/videojs-wavesurfer/blob/master/LICENSE).
diff --git a/docs/methods.md b/docs/methods.md
new file mode 100644
index 00000000..4bef3bba
--- /dev/null
+++ b/docs/methods.md
@@ -0,0 +1,34 @@
+# Methods
+
+Methods for this plugin are documented below. These are available on the
+`wavesurfer` plugin instance of the video.js player.
+
+For example:
+
+```javascript
+player.on('ready', function() {
+ player.wavesurfer().destroy();
+});
+```
+
+| Method | Description |
+| ------ | ----------- |
+| `destroy` | Destroys the wavesurfer instance and children (including the video.js player). |
+| `load(url)` | Load the clip at `url`. Also supports loading [File](https://developer.mozilla.org/nl/docs/Web/API/File) or [Blob](https://developer.mozilla.org/nl/docs/Web/API/Blob) objects. |
+| `setVolume(level)` | Set the volume level (value between 0.0 and 1.0). |
+| `play` | Start playback. |
+| `pause` | Pause playback. |
+| `getDuration` | Get the length of the stream in seconds. Returns 0 if no stream is available (yet). |
+| `getCurrentTime` | Get the current time (in seconds) of the stream during playback. Returns 0 if no stream is available (yet). |
+| `exportImage(format, quality)` | Save waveform image as data URI. Default format is `'image/png'`. |
+| `setAudioOutput(deviceId)` | Change the audio output device using its [deviceId](https://developer.mozilla.org/en-US/docs/Web/API/MediaDeviceInfo/deviceId). |
+
+## Other wavesurfer.js methods
+
+You can access the wavesurfer instance, for example to call the
+wavesurfer.js `seekTo` method, by using the `surfer` property of the
+`wavesurfer` plugin instance:
+
+```javascript
+player.wavesurfer().surfer.seekTo(1);
+```
diff --git a/docs/microphone.md b/docs/microphone.md
new file mode 100644
index 00000000..21f0d4f9
--- /dev/null
+++ b/docs/microphone.md
@@ -0,0 +1,67 @@
+# Microphone plugin
+
+It's also possible to use a microphone for real-time rendering of the audio waveform. This
+uses the [microphone plugin](https://wavesurfer-js.org/plugins/microphone.html) that comes
+with wavesurfer.js.
+
+## Example
+
+- [online demo](https://collab-project.github.io/videojs-wavesurfer/examples/live.html)
+- [demo source](https://github.com/collab-project/videojs-wavesurfer/blob/master/examples/live.html)
+
+## Usage
+
+Include the additional `wavesurfer.microphone.js` plugin on your page.
+
+```html
+
+```
+
+Add an `audio` element:
+
+```html
+
+```
+
+Hide irrelevant controls, specify the `WebAudio` backend and enable the microphone plugin:
+
+```javascript
+let player = videojs('myLiveAudio', {
+ controls: true,
+ width: 600,
+ height: 300,
+ controlBar: {
+ currentTimeDisplay: false,
+ timeDivider: false,
+ durationDisplay: false,
+ remainingTimeDisplay: false,
+ volumePanel: false,
+ progressControl: false
+ },
+ plugins: {
+ wavesurfer: {
+ debug: true,
+ backend: 'WebAudio',
+ waveColor: 'black',
+ cursorWidth: 0,
+ interact: false,
+ hideScrollbar: true,
+ plugins: [
+ // enable microphone plugin
+ WaveSurfer.microphone.create({
+ bufferSize: 4096,
+ numberOfInputChannels: 1,
+ numberOfOutputChannels: 1,
+ constraints: {
+ video: false,
+ audio: true
+ }
+ })
+ ]
+ }
+ }
+});
+```
+
+The wavesurfer.js microphone plugin has additional configuration
+[options](https://wavesurfer-js.org/plugins/microphone.html).
diff --git a/docs/options.md b/docs/options.md
new file mode 100644
index 00000000..c644bab8
--- /dev/null
+++ b/docs/options.md
@@ -0,0 +1,14 @@
+# Options
+
+Configure the player with:
+
+- [video.js options](https://github.com/videojs/video.js/blob/master/docs/guides/options.md)
+- [wavesurfer.js options](https://wavesurfer-js.org/docs/options.html)
+
+Additional options for this plugin are:
+
+| option | type | default | description |
+| ------ | ---- | ------- | ----------- |
+| `peaks` | string | `null` | The URL of the JSON file with peaks data corresponding to the source audio/video file. See the [peaks section](#using-peaks-for-large-audio-files) below for more information. |
+| `debug` | boolean | `false` | Display internal log messages using the `videojs.log` method. |
+| `msDisplayMax` | float | `3` | 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 with a duration that is longer than `msDisplayMax` will be displayed as `M:SS` or `HH:MM:SS`.|
diff --git a/docs/peaks.md b/docs/peaks.md
new file mode 100644
index 00000000..b968583c
--- /dev/null
+++ b/docs/peaks.md
@@ -0,0 +1,28 @@
+# Using peaks for large audio files
+
+When you're dealing with long audio files, it's sometimes useful to generate the waveform data,
+called peaks, on the server. This allows wavesurfer.js to load the peaks JSON data and create the
+waveform from that pre-rendered peak data. This JSON file can be generated using the
+[bbc/audiowaveform](https://github.com/bbc/audiowaveform) utility.
+
+For more information, see the wavesurfer.js [FAQ](https://wavesurfer-js.org/faq/).
+
+## Example
+
+- [online demo](https://collab-project.github.io/videojs-wavesurfer/examples/peaks.html)
+- [demo source](https://github.com/collab-project/videojs-wavesurfer/blob/master/examples/peaks.html)
+
+## Usage
+
+Load peaks data:
+
+```javascript
+// load file with peaks
+player.src({
+ src: 'media/hal.wav',
+ type: 'audio/wav',
+ // Use peaks from JSON file. See https://wavesurfer-js.org/faq/
+ // for instructions on how to generate peaks
+ peaks: 'media/hal-peaks.json'
+});
+```
diff --git a/docs/plugins.md b/docs/plugins.md
new file mode 100644
index 00000000..30b33a95
--- /dev/null
+++ b/docs/plugins.md
@@ -0,0 +1,20 @@
+# More features using other plugins
+
+## video.js
+
+The Video.js community created
+[lots of plugins](https://github.com/videojs/video.js/wiki/Plugins)
+that can be used to enhance the player's functionality.
+
+Plugins actually tested with videojs-wavesurfer include:
+
+- [videojs-record](https://github.com/collab-project/videojs-record) - Adds
+ support for recording audio/video/image files.
+
+## wavesurfer.js
+
+The plugin example extends videojs-wavesurfer with the wavesurfer.js
+[cursor plugin](https://wavesurfer-js.org/example/cursor/index.html):
+
+- [online demo](https://collab-project.github.io/videojs-wavesurfer/examples/plugin.html)
+- [demo source](https://github.com/collab-project/videojs-wavesurfer/blob/master/examples/plugin.html)
diff --git a/docs/react.md b/docs/react.md
new file mode 100644
index 00000000..c36d3d89
--- /dev/null
+++ b/docs/react.md
@@ -0,0 +1,194 @@
+# React
+
+This page shows how to get started with [React](https://reactjs.org) and
+videojs-wavesurfer using [create-react-app](https://github.com/facebook/create-react-app).
+
+For more information, check the video.js [documentation](https://github.com/videojs/video.js/blob/master/docs/guides/react.md)
+for React.
+
+## Installation
+
+Create an example React application called `audio-app`:
+
+```console
+npx create-react-app audio-app
+```
+
+Install videojs-wavesurfer:
+
+```console
+cd audio-app
+npm install --save videojs-wavesurfer
+```
+
+Install [react-app-wired](https://github.com/timarney/react-app-rewired) that we'll
+use to configure Webpack:
+
+```console
+npm install react-app-rewired --save-dev
+```
+
+## Application
+
+Edit `src/index.js`:
+
+```javascript
+import React from 'react';
+import ReactDOM from 'react-dom';
+import './index.css';
+import App from './App';
+import * as serviceWorker from './serviceWorker';
+
+const videoJsOptions = {
+ controls: true,
+ width: 600,
+ height: 300,
+ fluid: false,
+ plugins: {
+ wavesurfer: {
+ src: 'hal.wav',
+ msDisplayMax: 10,
+ debug: true,
+ waveColor: '#163b5b',
+ progressColor: 'black',
+ cursorColor: 'black',
+ hideScrollbar: true
+ }
+ }
+};
+
+ReactDOM.render(, document.getElementById('root'));
+
+// If you want your app to work offline and load faster, you can change
+// unregister() to register() below. Note this comes with some pitfalls.
+// Learn more about service workers: http://bit.ly/CRA-PWA
+serviceWorker.unregister();
+```
+
+Edit `src/App.js`:
+
+```javascript
+/* eslint-disable */
+import React, { Component } from 'react';
+
+import './App.css';
+
+import 'video.js/dist/video-js.css';
+import videojs from 'video.js';
+
+import WaveSurfer from 'wavesurfer.js';
+
+/*
+// the following imports are only needed when you're using
+// the microphone plugin
+import 'webrtc-adapter';
+
+import MicrophonePlugin from 'wavesurfer.js/dist/plugin/wavesurfer.microphone.js';
+WaveSurfer.microphone = MicrophonePlugin;
+*/
+
+// register videojs-wavesurfer plugin with this import
+import 'videojs-wavesurfer/dist/css/videojs.wavesurfer.css';
+import Wavesurfer from 'videojs-wavesurfer/dist/videojs.wavesurfer.js';
+
+class App extends Component {
+ componentDidMount() {
+ // instantiate Video.js
+ this.player = videojs(this.audioNode, this.props, () => {
+ // print version information at startup
+ var version_info = 'Using video.js ' + videojs.VERSION +
+ ' with videojs-wavesurfer ' + videojs.getPluginVersion('wavesurfer') +
+ ' and wavesurfer.js ' + WaveSurfer.VERSION;
+ videojs.log(version_info);
+ });
+
+ this.player.on('waveReady', (event) => {
+ console.log('waveform: ready!');
+ });
+
+ this.player.on('playbackFinish', (event) => {
+ console.log('playback finished.');
+ });
+
+ // error handling
+ this.player.on('error', (element, error) => {
+ console.error(error);
+ });
+ }
+
+ // destroy player on unmount
+ componentWillUnmount() {
+ if (this.player) {
+ this.player.dispose();
+ }
+ }
+ render() {
+ return (
+
+
+
+ );
+ }
+}
+
+export default App;
+```
+
+Add this to `src/index.css`:
+
+```css
+/* change player background color */
+#myAudio {
+ background-color: #ACB2F2;
+}
+```
+
+## Webpack configuration
+
+Create a `config-overrides.js` file in the root directory:
+
+```javascript
+const webpack = require("webpack");
+
+module.exports = function override(config, env) {
+ // Extend the config to work with the videojs-wavesurfer project without ejecting create react app.
+ // Reference: https://github.com/collab-project/videojs-wavesurfer/wiki/React
+ const videojsPlugin = new webpack.ProvidePlugin({
+ videojs: "video.js/dist/video.cjs.js"
+ });
+ const videojsAlias = {
+ videojs: "video.js",
+ WaveSurfer: "wavesurfer.js"
+ };
+ config.resolve.alias = { ...config.resolve.alias, ...videojsAlias };
+ config.plugins.push(videojsPlugin);
+ return config;
+};
+```
+
+Change the existing calls to `react-scripts` in the `scripts` section of `package.json`
+for `start`, `build` and `test`:
+
+```json
+"scripts": {
+ "start": "react-app-rewired start",
+ "build": "react-app-rewired build",
+ "test": "react-app-rewired test --env=jsdom",
+ "eject": "react-scripts eject"
+}
+```
+
+## Content
+
+Download the [example audio file](https://github.com/collab-project/videojs-wavesurfer/raw/master/examples/media/hal.wav)
+and place it in the `public` directory.
+
+## Run
+
+Start the development server:
+
+```
+npm start
+```
+
+And open http://localhost:3000 in a browser.
diff --git a/docs/responsive.md b/docs/responsive.md
new file mode 100644
index 00000000..d885bc29
--- /dev/null
+++ b/docs/responsive.md
@@ -0,0 +1,17 @@
+# Responsive layout
+
+The `fluid` option for video.js will resize the player according to the size
+of the window.
+
+Configure the player and enable the video.js `fluid` option:
+
+```javascript
+fluid: true
+```
+
+For more information, see the video.js [layout documentation](https://github.com/videojs/video.js/blob/master/docs/guides/layout.md).
+
+## Example
+
+- [online demo](https://collab-project.github.io/videojs-wavesurfer/examples/fluid.html)
+- [demo source](https://github.com/collab-project/videojs-wavesurfer/blob/master/examples/fluid.html)
diff --git a/docs/text-tracks.md b/docs/text-tracks.md
new file mode 100644
index 00000000..85f02528
--- /dev/null
+++ b/docs/text-tracks.md
@@ -0,0 +1,15 @@
+# Text Tracks
+
+Text tracks (or captions/subtitles) are a feature of HTML5 for displaying
+time-triggered text to the user. Video.js offers a cross-browser implementation
+of text tracks.
+
+For more information, check the video.js
+[text tracks documentation](https://github.com/videojs/video.js/blob/master/docs/guides/text-tracks.md).
+
+![Text tracks screenshot](img/text-tracks.png?raw=true "Text tracks screenshot")
+
+## Example
+
+- [online demo](https://collab-project.github.io/videojs-wavesurfer/examples/texttrack.html)
+- [demo source](https://github.com/collab-project/videojs-wavesurfer/blob/master/examples/texttrack.html)
diff --git a/docs/usage.md b/docs/usage.md
new file mode 100644
index 00000000..0b79c913
--- /dev/null
+++ b/docs/usage.md
@@ -0,0 +1,79 @@
+# Usage
+
+The plugin depends on the video.js and wavesurfer.js libraries:
+
+```html
+
+
+
+
+
+
+
+```
+
+The plugin automatically registers itself when the `videojs.wavesurfer.js`
+script is loaded:
+
+```html
+
+```
+
+Add an `audio` element:
+
+```html
+
+```
+
+Or `video` element:
+
+```html
+
+```
+
+Define the player configuration and enable the videojs-wavesurfer plugin by
+adding a `wavesurfer` entry:
+
+```javascript
+// configuration for video.js
+let options = {
+ controls: true,
+ autoplay: false,
+ loop: false,
+ fluid: false,
+ width: 600,
+ height: 300,
+ plugins: {
+ // enable videojs-wavesurfer plugin
+ wavesurfer: {
+ // configure videojs-wavesurfer
+ backend: 'MediaElement',
+ msDisplayMax: 10,
+ debug: true,
+ waveColor: 'grey',
+ progressColor: 'black',
+ cursorColor: 'black',
+ hideScrollbar: true
+ }
+ }
+};
+```
+
+Finally, create the player and load a file:
+
+```javascript
+let player = videojs('myClip', options, function() {
+ // print version information at startup
+ let msg = 'Using video.js ' + videojs.VERSION +
+ ' with videojs-wavesurfer ' +
+ videojs.getPluginVersion('wavesurfer') +
+ ' and wavesurfer.js ' + WaveSurfer.VERSION;
+ videojs.log(msg);
+
+ // load wav file from url
+ player.src({src: 'media/hal.wav', type: 'audio/wav'});
+});
+```
+
+Check the [options](options.md), [methods](methods.md) and [events](events.md) documentation
+for more information.
diff --git a/docs/vue.md b/docs/vue.md
new file mode 100644
index 00000000..bc323484
--- /dev/null
+++ b/docs/vue.md
@@ -0,0 +1,170 @@
+# Vue
+
+This page shows how to get started with [Vue.js](https://vuejs.org/) and videojs-wavesurfer.
+
+For more information, check the video.js [documentation](https://github.com/videojs/video.js/blob/master/docs/guides/vue.md) for Vue.js.
+
+## Installation
+
+Install the [Vue.js CLI](https://cli.vuejs.org/guide/) globally:
+
+```console
+npm install -g @vue/cli
+```
+
+Create a new application, e.g. `videojs-wavesurfer-app`:
+
+```console
+vue create --preset default videojs-wavesurfer-app
+```
+
+Install videojs-wavesurfer:
+
+```console
+cd videojs-wavesurfer-app
+npm install --save videojs-wavesurfer
+```
+
+## Webpack config
+
+Create `vue.config.js` with the following content:
+
+```javascript
+const webpack = require('webpack');
+
+module.exports = {
+ configureWebpack: {
+ resolve: {
+ alias: {
+ videojs: 'video.js',
+ WaveSurfer: 'wavesurfer.js',
+ RecordRTC: 'recordrtc'
+ }
+ },
+ plugins: [
+ new webpack.ProvidePlugin({
+ videojs: 'video.js/dist/video.cjs.js',
+ RecordRTC: 'recordrtc'
+ })
+ ]
+ }
+}
+```
+
+## Application
+
+Create `src/components/VideoJSWavesurfer.vue`:
+
+```html
+
+
+
+
+
+```
+
+Change `src/App.vue` to:
+
+```html
+
+