Changes at a glance

  • ES6 Syntax: Refactored all code to use the new ES6/ES2015 syntax (especially arrow functions, classes, spread operators etc.)

  • New build system: Webpack is being used as a build system to compile the code. It can be imported like this:

    // EITHER - accessing modules with >script< tags
    var WaveSurfer = window.WaveSurfer;
    var TimelinePlugin = window.WaveSurfer.timeline;
    var MinimapPlugin = window.WaveSurfer.minimap;
    
    // OR - importing as es6 module
    import WaveSurfer from 'wavesurfer.js';
    import TimelinePlugin from 'wavesurfer.js/dist/plugin/wavesurfer.timeline.min.js';
    import MinimapPlugin from 'wavesurfer.js/dist/plugin/wavesurfer.minimap.min.js';
    
    // OR - importing as require.js/commonjs modules
    var WaveSurfer = require('wavesurfer.js');
    var TimelinePlugin = require('wavesurfer.js/dist/plugin/wavesurfer.timeline.min.js');
    var MinimapPlugin = require('wavesurfer.js/dist/plugin/wavesurfer.minimap.min.js');
    
  • Documentation: Added loads of jsdoc style documentation tags and the esdoc documentation generator (the documentation needs to be also made public, currently it is generated into ./doc by calling npm run doc) – The idea being that it is easier to keep documentation up to date easier than having to always edit HTML code in the gh-pages branch.

  • New plugin API: Previously all plugins, backends and drawers relied on the window.WaveSurfer global variable. This made it difficult to work with module bundlers (You had to expose the WaveSurfer object, which means it's not really modular) – To fix this plugins now all follow a common format which is used by wavesurfer core to register the plugins correctly. (see an example of a plugin class at the bottom of this page)

    A plugin can be destroyed like this: wavesurfer.destroyPlugin('timeline');

    There are three ways to add a plugin:

    1. Adding and initialising plugin immediately (this will do in 99% of the cases):

      var wavesurfer = WaveSurfer.create({
          container: '#waveform',
          waveColor: 'violet',
          plugins: [
              TimelinePlugin.create({
                  container: '#wave-timeline'
              })
          ]
      });
      
    2. Adding a plugin immediately and initialising it dynamically:

      var wavesurfer = WaveSurfer.create({
          container: '#waveform',
          plugins: [
              TimelinePlugin.create({
                  container: '#wave-timeline',
                  deferInit: true // stop the plugin from initialising immediately
              })
          ]
      });
      wavesurfer.initPlugin('timeline');
      
    3. Adding and initialising a plugin dynamically:

      var wavesurfer = WaveSurfer.create({
          container: '#waveform',
          waveColor: 'violet'
      });
      // adding and initialising a plugin after initialisation
      wavesurfer.addPlugin(TimelinePlugin.create({
          container: '#wave-timeline',
      })).initPlugin('timeline');
      
  • New HTML init script: The html-init.js was extended to allow more complicated initialisation options (including autoloading of plugin code) – Example usage:

    <wavesurfer>
      data-url="../media/demo.wav"
      data-plugins="minimap,timeline"
      data-minimap-height="30"
      data-minimap-wave-color="#ddd"
      data-minimap-progress-color="#999"
      data-timeline-font-size="13px"
      data-timeline-container="#timeline"
    >
    </wavesurfer>
    <div id="timeline"></div>
    
  • MultiCanvas is the default renderer: It supports the functionality of the default renderer but is not constrained by maximum canvas sizes.

Fork me on GitHub