Ports from es5: Part two

README.md

@@ -177,7 +177,7 @@ npm run doc
 ```
 
 ## Editing documentation
-The homepage and the documentation are in the [`gh-pages` branch](https://github.com/katspaugh/wavesurfer.js/tree/gh-pages). Contributions to the documentation are especially welcome.
+The homepage and documentation files are maintained in the [`gh-pages` branch](https://github.com/katspaugh/wavesurfer.js/tree/gh-pages). Contributions to the documentation are especially welcome.
 
 ## Credits
 

example/zoom/index.html

@@ -15,6 +15,8 @@
 
         <!-- wavesurfer.js -->
         <script src="../../dist/wavesurfer.js"></script>
+        <script src="../../dist/plugin/wavesurfer.timeline.js"></script>
+        <script src="../../dist/plugin/wavesurfer.regions.js"></script>
 
         <!-- Demo -->
         <script src="main.js"></script>
@@ -35,6 +37,8 @@ <h1 itemprop="name">Zooming Feature Example</h1>
                     <!-- Here be the waveform -->
                 </div>
 
+                <div id="timeline"></div>
+
                 <div class="controls">
                     <div class="row">
                         <div class="col-sm-7">

example/zoom/main.js

@@ -10,7 +10,25 @@ document.addEventListener('DOMContentLoaded', function () {
         container: document.querySelector('#waveform'),
         waveColor: '#A8DBA8',
         progressColor: '#3B8686',
-        backend: 'MediaElement'
+        backend: 'MediaElement',
+        plugins: [
+            WaveSurfer.regions.create({
+                regions: [
+                    {
+                        start: 0,
+                        end: 5,
+                        color: 'hsla(400, 100%, 30%, 0.1)'
+                    }, {
+                        start: 10,
+                        end: 100,
+                        color: 'hsla(200, 50%, 70%, 0.1)'
+                    }
+                ]
+            }),
+            WaveSurfer.timeline.create({
+                container: '#timeline'
+            })
+        ]
     });
 
 

src/drawer.multicanvas.js

@@ -259,7 +259,7 @@ export default class MultiCanvas extends Drawer {
             const gap = Math.max(this.params.pixelRatio, ~~(bar / 2));
             const step = bar + gap;
 
-            let absmax = 1;
+            let absmax = 1 / this.params.barHeight;
             if (this.params.normalize) {
                 const max = util.max(peaks);
                 const min = util.min(peaks);
@@ -275,7 +275,7 @@ export default class MultiCanvas extends Drawer {
                 this.fillRect(i + this.halfPixel, halfH - h + offsetY, bar + this.halfPixel, h * 2);
             }
 
-        });
+        })(peaks, channelIndex, start, end);
     }
 
     /**
@@ -321,7 +321,7 @@ export default class MultiCanvas extends Drawer {
             const offsetY = height * channelIndex || 0;
             const halfH = height / 2;
 
-            let absmax = 1;
+            let absmax = 1 / this.params.barHeight;
             if (this.params.normalize) {
                 const max = util.max(peaks);
                 const min = util.min(peaks);
@@ -332,7 +332,7 @@ export default class MultiCanvas extends Drawer {
 
             // Always draw a median line
             this.fillRect(0, halfH + offsetY - this.halfPixel, this.width, this.halfPixel);
-        });
+        })(peaks, channelIndex, start, end);
     }
 
     /**

src/mediaelement.js

@@ -190,6 +190,15 @@ export default class MediaElement extends WebAudio {
         return (this.getCurrentTime() / this.getDuration()) || 0;
     }
 
+    /**
+     * Get the audio source playback rate.
+     *
+     * @return {number}
+     */
+    getPlaybackRate() {
+        return this.playbackRate || this.media.playbackRate;
+    }
+
     /**
      * Set the audio source playback rate.
      *

src/plugin/timeline.js

@@ -126,6 +126,7 @@ export default class TimelinePlugin {
 
         this.canvases = [];
 
+        this._onZoom = () => this.render();
         this._onScroll = () => {
             if (this.wrapper && this.drawer.wrapper) {
                 this.wrapper.scrollLeft = this.drawer.wrapper.scrollLeft;
@@ -142,6 +143,7 @@ export default class TimelinePlugin {
             this.render();
             ws.drawer.wrapper.addEventListener('scroll', this._onScroll);
             ws.on('redraw', this._onRedraw);
+            ws.on('zoom', this._onZoom);
         };
     }
 
@@ -156,6 +158,7 @@ export default class TimelinePlugin {
     destroy() {
         this.unAll();
         this.wavesurfer.un('redraw', this._onRedraw);
+        this.wavesurfer.un('zoom', this._onZoom);
         this.wavesurfer.un('ready', this._onReady);
         this.wavesurfer.drawer.wrapper.removeEventListener('scroll', this._onScroll);
         if (this.wrapper && this.wrapper.parentNode) {

src/wavesurfer.js

@@ -27,6 +27,7 @@ import PeakCache from './peakcache';
  * @property {string} backend='WebAudio' `'WebAudio'|'MediaElement'` In most cases
  * you don't have to set this manually. MediaElement is a fallback for
  * unsupported browsers.
+ * @property {number} barHeight=1 The height of the wave
  * @property {boolean} closeAudioContext=false Close and nullify all audio
  * contexts when the destroy method is called.
  * @property {!string|HTMLElement} container CSS selector or HTML element where
@@ -172,6 +173,7 @@ export default class WaveSurfer extends util.Observer {
         audioRate     : 1,
         autoCenter    : true,
         backend       : 'WebAudio',
+        barHeight     : 1,
         container     : null,
         cursorColor   : '#333',
         cursorWidth   : 1,
@@ -348,7 +350,6 @@ export default class WaveSurfer extends util.Observer {
         this._onResize = util.debounce(() => {
             if (prevWidth != this.drawer.wrapper.clientWidth) {
                 prevWidth = this.drawer.wrapper.clientWidth;
-                this.empty();
                 this.drawBuffer();
             }
         }, typeof this.params.responsive === 'number' ? this.params.responsive : 100);
@@ -838,6 +839,17 @@ export default class WaveSurfer extends util.Observer {
         return this.isMuted;
     }
 
+    /**
+     * Get the list of current set filters as an array.
+     *
+     * Filters must be set with setFilters method first
+     *
+     * @return {array}
+     */
+    getFilters() {
+        return this.backend.filters || [];
+    }
+
     /**
      * Toggles `scrollParent` and redraws
      *

src/webaudio.js

@@ -439,7 +439,7 @@ export default class WebAudio extends util.Observer {
         // close the audioContext if closeAudioContext option is set to true
         if (this.params.closeAudioContext) {
             // check if browser supports AudioContext.close()
-            if (typeof this.ac.close === 'function') {
+            if (typeof this.ac.close === 'function' && this.ac.state != 'closed') {
                 this.ac.close();
             }
             // clear the reference to the audiocontext