Interactive navigable audio visualization using Web Audio and Canvas.
See a tutorial and examples on wavesurfer-js.org.
wavesurfer.js works only in modern browsers supporting Web Audio.
It will fallback to Audio Element in other browsers (without graphics). You can also try wavesurfer.swf which is a Flash-based fallback.
Yes, if you use the backend: 'MediaElement' option. See here: https://wavesurfer-js.org/example/audio-element/. The audio will start playing as you press play. A thin line will be displayed until the whole audio file is downloaded and decoded to draw the waveform.
No. Web Audio needs the whole file to decode it in the browser. You can however load pre-decoded waveform data to draw the waveform immediately. See here: https://wavesurfer-js.org/example/audio-element/ (the "Pre-recoded Peaks" section).
Choose a container:
<div id="waveform"></div>Create an instance, passing the container selector and options:
var wavesurfer = WaveSurfer.create({
container: '#waveform',
waveColor: 'violet',
progressColor: 'purple'
});Subscribe to some events:
wavesurfer.on('ready', function () {
wavesurfer.play();
});Load an audio file from a URL:
wavesurfer.load('example/media/demo.wav');See the documentation on all available methods, options and events on the homepage.
For a list of projects using wavesurfer.js, check out the projects page.
Install grunt-cli using npm:
npm install -g grunt-cli
Install development dependencies:
npm install
Build a minified version of the library and plugins. This command also checks for code-style mistakes and runs the tests:
grunt
Generated files are placed in the dist directory.
Running tests only:
grunt test
Creating a coverage report:
grunt coverage
The HTML report can be found in coverage/html/index.html.
The homepage and the documentation are in the gh-pages branch. Contributions to the documentation are especially welcome.
Initial idea by Alex Khokhulin. Many thanks to the awesome contributors!
This work is licensed under a Creative Commons Attribution 3.0 Unported License.