diff --git a/example/zoom/main.js b/example/zoom/main.js
index e08853865..33161a51e 100644
--- a/example/zoom/main.js
+++ b/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'
+ })
+ ]
});
diff --git a/src/drawer.multicanvas.js b/src/drawer.multicanvas.js
index 11c7c1ca6..6c25764a9 100644
--- a/src/drawer.multicanvas.js
+++ b/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);
}
/**
diff --git a/src/mediaelement.js b/src/mediaelement.js
index 3846e3abb..90b4a6526 100755
--- a/src/mediaelement.js
+++ b/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.
*
diff --git a/src/plugin/timeline.js b/src/plugin/timeline.js
index ce1739de1..c97bd3849 100644
--- a/src/plugin/timeline.js
+++ b/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) {
diff --git a/src/wavesurfer.js b/src/wavesurfer.js
index 772285ab1..c2aeeb35e 100755
--- a/src/wavesurfer.js
+++ b/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
*
diff --git a/src/webaudio.js b/src/webaudio.js
index ecd35bb11..24bdb4f49 100755
--- a/src/webaudio.js
+++ b/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