Drag'n'drop your favorite -file here!
Customizable waveform audio visualization built on top of Web Audio API and HTML5 Canvas. With wavesurfer.js you can create anything from an HTML5 audio player to a sophisticated DJ application. For a list of other projects using wavesurfer.js, check out the wiki where you can also add your own project.
wavesurfer.js runs on modern browsers supporting Web Audio. Including Firefox, Chrome, Safari, Mobile Safari and Opera.
var wavesurfer = WaveSurfer.create({
container: '#wave',
waveColor: 'violet',
progressColor: 'purple'
});
wavesurfer.on('ready', function () {
wavesurfer.play();
});
wavesurfer.load('audio.wav');
The full list of options and methods can be found in the README file.
Thanks to the everyting-is-public API, it's easy to write wavesurfer.js plugins.
Adds ability to display and interact with audio regions. Regions are visual overlays that can be resized and dragged around the waveform. You can play back and loop a region.
Reads ELAN files and displays audio annotations as an interactive widget. ELAN is parsed into a JavaScript object with some denormalization.
Adds a nice simple timeline to your waveform. By Instajams.
Visualizes audio input from a microphone. By Thijs Triemstra.
Zooming feature can be used with an HTML5 slider.
Creating a panner with wavesurfer.js is easy-peasy. Follow the 4 steps.
Simple equalizer to demonstrate how to connect multiple filters in chain.
HTML5 media element fallback for browsers without Web Audio.
Display multiple waveforms, one for each channel, in a single player.
Embed wavesurfer.js in an Angular directive.
An example using wavesurfer.js with Angular Material. This can be used in your application without having to change much.