Skip to content

jonesbp/wavesurfer.js

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

64 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

wavesurfer.js

Interactive navigable audio visualization using WebAudio (or <audio> element with pre-generated graphics) and Canvas.

Imgur

API in examples

Create an instance:

var wavesurfer = Object.create(WaveSurfer);

Initialize it with a canvas element (plus some options):

wavesurfer.init({
    canvas: document.querySelector('#wave'),
    waveColor: 'violet',
    progressColor: 'purple'
});

Load an audio file from a URL (via XHR):

wavesurfer.load('media/sonnet_23.mp3');

There is also a method to visualize drag'n'dropped audio files:

wavesurfer.bindDragNDrop(document.body);

HTML5 Audio backend

You can also generate the waveform images on server and use them in combination with HTML5 Audio, which enjoys wider browser support.

See examples/ex.fm.

Credits

Thanks!

License

cc-by

This work is licensed under a Creative Commons Attribution 3.0 Unported License.

About

Navigable waveform using WebAudio and Canvas

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published