JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.


  • ×

    Wavesurfer.js

    Navigable waveform built on Web Audio and Canvas
    Filed under 

    • 🔾76%Overall
    • 3,501
    • 5 days
    • 🕩838
    • 👥33

    wavesurfer.js

    npm version npm Join the chat at https://gitter.im/katspaugh/wavesurfer.js

    Interactive navigable audio visualization using Web Audio and Canvas.

    Screenshot

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

    Browser support

    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.

    FAQ

    Can the audio start playing before the waveform is drawn?

    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.

    Can drawing be done as file loads?

    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).

    API in examples

    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');
    

    Documentation

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

    Upgrade

    See the upgrade document if you're upgrading from a previous version of wavesurfer.js.

    Using with a module bundler

    Wavesurfer can be used with a module system like this:

    // import
    import WaveSurfer from 'wavesurfer.js';
    
    // commonjs/requirejs
    var WaveSurfer = require('wavesurfer.js');
    
    // amd
    define(['WaveSurfer'], function(WaveSurfer) {
      // ... code
    });
    

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

    Development

    Build Status Coverage Status Size

    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
    

    Editing documentation

    The homepage and documentation files are maintained in the gh-pages branch. Contributions to the documentation are especially welcome.

    Credits

    Initial idea by Alex Khokhulin. Many thanks to the awesome contributors!

    License

    License

    This work is licensed under a BSD 3-Clause License.

    Show All