wavesurfer.js

Navigable waveform built on Web Audio and Canvas

wavesurfer-js/wavesurfer.js wavesurfer-js.org wavesurfer.js

README

wavesurfer.js

Interactive navigable audio visualization using Web Audio and Canvas.

See a tutorial and examples on wavesurfer-js.org.

Questions

Have a question about integrating wavesurfer.js on your website? Feel free to ask in our forum: https://github.com/wavesurfer-js/wavesurfer.js/discussions/categories/q-a

Quick start

Install the package:

```
npm install wavesurfer.js --save
# or
yarn add wavesurfer.js
```

And import it like so:

```
import WaveSurfer from 'wavesurfer.js'
```

If you're not using a package manager, simply insert the script from a CDN:

```
<script src="https://unpkg.com/wavesurfer.js"></script>
```

Create a container in your HTML:

```html
<div id="waveform"></div>
```

Create an instance of wavesufer.js, passing the container selector and a few options:

```javascript
var wavesurfer = WaveSurfer.create({
container: '#waveform',
waveColor: 'violet',
progressColor: 'purple'
});
```

Subscribe to some events:

```javascript
wavesurfer.on('ready', function () {
wavesurfer.play();
});
```

Load an audio file from a URL:

```javascript
wavesurfer.load('example/media/demo.wav');
```

Documentation

See the documentation on all available methods, options and events on the homepage.

Projects using wavesurfer.js

For the list of projects using wavesurfer.js, check out

the projects page.

Contributing

Have an idea and want to contribute to wavesurfer.js?

Please first start a discussion in the Ideas section of our forum to coordinate with the maintainers.

Development

Install development dependencies:

```
npm install
```

Development tasks automatically rebuild certain parts of the library when files are changed (start – wavesurfer, start:plugins – plugins). Start a dev task and go to localhost:8080/example/ to test the current build.

Start development server for core library:

```
npm run start
```

Start development server for plugins:

```
npm run start:plugins
```

Build all the files. (generated files are placed in the dist directory.)

```
npm run build
```

Running tests only:

```
npm run test
```

Build documentation with esdoc (generated files are placed in the doc directory.)

```
npm run doc
```

If you want to use the VS Code - Debugger for Chrome, there is already a launch.json with a properly configuredsourceMapPathOverrides for you.

Editing documentation

The homepage and documentation files are maintained in the [gh-pages branch](https://github.com/wavesurfer-js/wavesurfer.js/tree/gh-pages). Contributions to the documentation are especially welcome.

Updating the NPM package

When preparing a new release, update the version in the package.json and have it merged to master. The new version of the package will be published to NPM automatically via GitHub Actions.