wavesurfer.js 5.0.0 → 6.0.0

package/src/plugin/minimap/index.js

@@ -96,16 +96,7 @@ export default class MinimapPlugin {
         this.drawer = new ws.Drawer(this.params.container, this.params);
         this.wavesurfer = ws;
         this.util = ws.util;
-        /**
-         * Minimap needs to listen for the `ready` and `waveform-ready` events
-         * to work with the `MediaElement` backend. The moment the `ready` event
-         * is called is different (and peaks would not load).
-         *
-         * @type {string}
-         * @see https://github.com/katspaugh/wavesurfer.js/issues/736
-         */
-        this.renderEvent =
-            ws.params.backend === 'MediaElement' ? 'waveform-ready' : 'ready';
+        this.renderEvent = 'redraw';
         this.overviewRegion = null;
         this.regionsPlugin = this.wavesurfer[this.params.regionsPluginName];
 
@@ -144,7 +135,8 @@ export default class MinimapPlugin {
         // event listeners for the overview region
         this._onScroll = e => {
             if (!this.draggingOverview) {
-                this.moveOverviewRegion(e.target.scrollLeft / this.ratio);
+                const orientedTarget = this.util.withOrientation(e.target, this.wavesurfer.params.vertical);
+                this.moveOverviewRegion(orientedTarget.scrollLeft / this.ratio);
             }
         };
         this._onMouseover = e => {
@@ -245,8 +237,13 @@ export default class MinimapPlugin {
     createElements() {
         this.drawer.createElements();
         if (this.params.showOverview) {
-            this.overviewRegion = this.util.style(
-                document.createElement('overview'),
+            this.overviewRegion = this.util.withOrientation(
+                this.drawer.wrapper.appendChild(document.createElement('overview')),
+                this.wavesurfer.params.vertical
+            );
+
+            this.util.style(
+                this.overviewRegion,
                 {
                     top: 0,
                     bottom: 0,
@@ -262,7 +259,6 @@ export default class MinimapPlugin {
                     opacity: this.params.overviewOpacity
                 }
             );
-            this.drawer.wrapper.appendChild(this.overviewRegion);
         }
     }
 
@@ -307,24 +303,27 @@ export default class MinimapPlugin {
         }
 
         if (this.params.showOverview) {
-            this.overviewRegion.addEventListener('mousedown', event => {
+            this.overviewRegion.domElement.addEventListener('mousedown', e => {
+                const event = this.util.withOrientation(e, this.wavesurfer.params.vertical);
                 this.draggingOverview = true;
                 relativePositionX = event.layerX;
                 positionMouseDown.clientX = event.clientX;
                 positionMouseDown.clientY = event.clientY;
             });
 
-            this.drawer.wrapper.addEventListener('mousemove', event => {
+            this.drawer.wrapper.addEventListener('mousemove', e => {
                 if (this.draggingOverview) {
+                    const event = this.util.withOrientation(e, this.wavesurfer.params.vertical);
                     this.moveOverviewRegion(
                         event.clientX -
-                            this.drawer.container.getBoundingClientRect().left -
-                            relativePositionX
+                        this.drawer.container.getBoundingClientRect().left -
+                        relativePositionX
                     );
                 }
             });
 
-            this.drawer.wrapper.addEventListener('mouseup', event => {
+            this.drawer.wrapper.addEventListener('mouseup', e => {
+                const event = this.util.withOrientation(e, this.wavesurfer.params.vertical);
                 if (
                     positionMouseDown.clientX - event.clientX === 0 &&
                     positionMouseDown.clientX - event.clientX === 0
@@ -356,7 +355,9 @@ export default class MinimapPlugin {
             this.moveOverviewRegion(
                 this.wavesurfer.drawer.wrapper.scrollLeft / this.ratio
             );
-            this.overviewRegion.style.width = this.overviewWidth + 'px';
+            this.util.style(this.overviewRegion, {
+                width: this.overviewWidth + 'px'
+            });
         }
     }
 
@@ -372,7 +373,9 @@ export default class MinimapPlugin {
             this.overviewPosition =
                 this.drawer.container.offsetWidth - this.overviewWidth;
         }
-        this.overviewRegion.style.left = this.overviewPosition + 'px';
+        this.util.style(this.overviewRegion, {
+            left: this.overviewPosition + 'px'
+        });
         if (this.draggingOverview) {
             this.wavesurfer.drawer.wrapper.scrollLeft =
                 this.overviewPosition * this.ratio;

package/src/plugin/regions/index.js

@@ -129,15 +129,14 @@ export default class RegionsPlugin {
         this.wavesurfer.Region = Region;
 
         // By default, scroll the container if the user drags a region
-        // within 5% of its edge
+        // within 5% (based on its initial size) of its edge
         const scrollWidthProportion = 0.05;
         this._onBackendCreated = () => {
             this.wrapper = this.wavesurfer.drawer.wrapper;
             this.orientation = this.wavesurfer.drawer.orientation;
+            this.defaultEdgeScrollWidth = this.wrapper.clientWidth * scrollWidthProportion;
             if (this.params.regions) {
                 this.params.regions.forEach(region => {
-                    region.edgeScrollWidth = this.params.edgeScrollWidth ||
-                        this.wrapper.clientWidth * scrollWidthProportion;
                     this.add(region);
                 });
             }
@@ -171,6 +170,11 @@ export default class RegionsPlugin {
     destroy() {
         this.wavesurfer.un('ready', this._onReady);
         this.wavesurfer.un('backend-created', this._onBackendCreated);
+        // Disabling `region-removed' because destroying the plugin calls
+        // the Region.remove() method that is also used to remove regions based
+        // on user input. This can cause confusion since teardown is not a
+        // user event, but would emit `region-removed` as if it was.
+        this.wavesurfer.setDisabledEventEmissions(['region-removed']);
         this.disableDragSelection();
         this.clear();
     }
@@ -197,6 +201,16 @@ export default class RegionsPlugin {
             return null;
         }
 
+        params = {
+            edgeScrollWidth: this.params.edgeScrollWidth || this.defaultEdgeScrollWidth,
+            ...params
+        };
+
+        // Take formatTimeCallback from plugin params if not already set
+        if (!params.formatTimeCallback && this.params.formatTimeCallback) {
+            params = {...params, formatTimeCallback: this.params.formatTimeCallback};
+        }
+
         if (!params.minLength && this.regionsMinLength) {
             params = {...params, minLength: this.regionsMinLength};
         }
@@ -284,6 +298,19 @@ export default class RegionsPlugin {
                 this.vertical
             );
 
+            // set the region channel index based on the clicked area
+            if (this.wavesurfer.params.splitChannels) {
+                const y = (e.touches ? e.touches[0].clientY : e.clientY) - wrapperRect.top;
+                const channelCount = this.wavesurfer.backend.buffer != null ? this.wavesurfer.backend.buffer.numberOfChannels : 1;
+                const channelHeight = this.wrapper.clientHeight / channelCount;
+                const channelIdx = Math.floor(y / channelHeight);
+                params.channelIdx = channelIdx;
+                const channelColors = this.wavesurfer.params.splitChannelsOptions.channelColors[channelIdx];
+                if (channelColors && channelColors.dragColor) {
+                    params.color = channelColors.dragColor;
+                }
+            }
+
             drag = true;
             start = this.wavesurfer.drawer.handleEvent(e, true);
             region = null;

package/src/plugin/regions/region.js

@@ -62,6 +62,7 @@ export class Region {
         // select channel ID to set region
         let channelIdx =
             params.channelIdx == null ? -1 : parseInt(params.channelIdx);
+        this.channelIdx = channelIdx;
         this.regionHeight = '100%';
         this.marginTop = '0px';
 
@@ -87,7 +88,7 @@ export class Region {
     }
 
     /* Update region params. */
-    update(params) {
+    update(params, eventParams) {
         if (params.start != null) {
             this.start = Number(params.start);
         }
@@ -125,7 +126,7 @@ export class Region {
 
         this.updateRender();
         this.fireEvent('update');
-        this.wavesurfer.fireEvent('region-updated', this);
+        this.wavesurfer.fireEvent('region-updated', this, eventParams);
     }
 
     /* Remove a single region. */
@@ -190,7 +191,7 @@ export class Region {
 
         this.style(this.element, {
             position: 'absolute',
-            zIndex: 2,
+            zIndex: 3,
             height: this.regionHeight,
             top: this.marginTop
         });
@@ -211,7 +212,7 @@ export class Region {
 
             // Default CSS properties for both handles.
             const css = {
-                cursor: 'row-resize',
+                cursor: this.vertical ? 'row-resize' : 'col-resize',
                 position: 'absolute',
                 top: '0px',
                 width: '2px',
@@ -680,7 +681,7 @@ export class Region {
         this.element.addEventListener('touchstart', onDown);
 
         document.body.addEventListener('mousemove', onMove);
-        document.body.addEventListener('touchmove', onMove);
+        document.body.addEventListener('touchmove', onMove, {passive: false});
 
         document.addEventListener('mouseup', onUp);
         document.body.addEventListener('touchend', onUp);
@@ -708,10 +709,33 @@ export class Region {
             delta = this.start * -1;
         }
 
+        const eventParams = {
+            direction: this._getDragDirection(delta),
+            action: 'drag'
+        };
+
         this.update({
             start: this.start + delta,
             end: this.end + delta
-        });
+        }, eventParams);
+    }
+
+    /**
+     * Returns the direction of dragging region based on delta
+     * Negative delta means region is moving to the left
+     * Positive - to the right
+     * For zero delta the direction is not defined
+     * @param {number} delta Drag offset
+     * @returns {string|null} Direction 'left', 'right' or null
+     */
+    _getDragDirection(delta) {
+        if (delta < 0) {
+            return 'left';
+        }
+        if (delta > 0) {
+            return 'right';
+        }
+        return null;
     }
 
     /**
@@ -724,13 +748,22 @@ export class Region {
      */
     onResize(delta, direction) {
         const duration = this.wavesurfer.getDuration();
+        const eventParams = {
+            action: 'resize',
+            direction: direction === 'start' ? 'left' : 'right'
+        };
+
         if (direction === 'start') {
             // Check if changing the start by the given delta would result in the region being smaller than minLength
-            // Ignore cases where we are making the region wider rather than shrinking it
             if (delta > 0 && this.end - (this.start + delta) < this.minLength) {
                 delta = this.end - this.minLength - this.start;
             }
 
+            // Check if changing the start by the given delta would result in the region being larger than maxLength
+            if (delta < 0 && this.end - (this.start + delta) > this.maxLength) {
+                delta = this.end - this.start - this.maxLength;
+            }
+
             if (delta < 0 && (this.start + delta) < 0) {
                 delta = this.start * -1;
             }
@@ -738,14 +771,18 @@ export class Region {
             this.update({
                 start: Math.min(this.start + delta, this.end),
                 end: Math.max(this.start + delta, this.end)
-            });
+            }, eventParams);
         } else {
             // Check if changing the end by the given delta would result in the region being smaller than minLength
-            // Ignore cases where we are making the region wider rather than shrinking it
             if (delta < 0 && this.end + delta - this.start < this.minLength) {
                 delta = this.start + this.minLength - this.end;
             }
 
+            // Check if changing the end by the given delta would result in the region being larger than maxLength
+            if (delta > 0 && this.end + delta - this.start > this.maxLength) {
+                delta = this.maxLength - (this.end - this.start);
+            }
+
             if (delta > 0 && (this.end + delta) > duration) {
                 delta = duration - this.end;
             }
@@ -753,7 +790,7 @@ export class Region {
             this.update({
                 start: Math.min(this.end + delta, this.start),
                 end: Math.max(this.end + delta, this.start)
-            });
+            }, eventParams);
         }
     }
 

package/src/plugin/spectrogram/index.js

@@ -8,6 +8,8 @@ import FFT from './fft';
  * which to render
  * @property {number} fftSamples=512 Number of samples to fetch to FFT. Must be
  * a power of 2.
+ * @property {boolean} splitChannels=false Render with separate spectrograms for
+ * the channels of the audio
  * @property {boolean} labels Set to true to display frequency labels.
  * @property {number} noverlap Size of the overlapping window. Must be <
  * fftSamples. Auto deduced from canvas size by default.
@@ -127,6 +129,8 @@ export default class SpectrogramPlugin {
             this.noverlap = params.noverlap;
             this.windowFunc = params.windowFunc;
             this.alpha = params.alpha;
+            this.splitChannels = params.splitChannels;
+            this.channels = this.splitChannels ? ws.backend.buffer.numberOfChannels : 1;
 
             this.createWrapper();
             this.createCanvas();
@@ -176,7 +180,7 @@ export default class SpectrogramPlugin {
                 left: 0,
                 position: 'absolute',
                 zIndex: 9,
-                height: `${this.height / this.pixelRatio}px`,
+                height: `${this.height * this.channels / this.pixelRatio}px`,
                 width: `${55 / this.pixelRatio}px`
             });
             this.wrapper.appendChild(labelsEl);
@@ -197,7 +201,7 @@ export default class SpectrogramPlugin {
             position: 'relative',
             userSelect: 'none',
             webkitUserSelect: 'none',
-            height: `${this.height / this.pixelRatio}px`
+            height: `${this.height * this.channels / this.pixelRatio}px`
         });
 
         if (wsParams.fillParent || wsParams.scrollParent) {
@@ -244,55 +248,58 @@ export default class SpectrogramPlugin {
     updateCanvasStyle() {
         const width = Math.round(this.width / this.pixelRatio) + 'px';
         this.canvas.width = this.width;
-        this.canvas.height = this.height;
+        this.canvas.height = this.height * this.channels;
         this.canvas.style.width = width;
     }
 
     drawSpectrogram(frequenciesData, my) {
+        if (!isNaN(frequenciesData[0][0])) { // data is 1ch [sample, freq] format
+            // to [channel, sample, freq] format
+            frequenciesData = [frequenciesData];
+        }
+
         const spectrCc = my.spectrCc;
         const height = my.height;
         const width = my.width;
-        const pixels = my.resample(frequenciesData);
-        const heightFactor = my.buffer ? 2 / my.buffer.numberOfChannels : 1;
-        const imageData = spectrCc.createImageData(width, height);
-        let i;
-        let j;
-        let k;
 
-        for (i = 0; i < pixels.length; i++) {
-            for (j = 0; j < pixels[i].length; j++) {
-                const colorMap = my.colorMap[pixels[i][j]];
-                /* eslint-disable max-depth */
-                for (k = 0; k < heightFactor; k++) {
-                    let y = height - j * heightFactor;
-                    if (heightFactor === 2 && k === 1) {
-                        y--;
-                    }
-                    const redIndex = y * (width * 4) + i * 4;
+        if (!spectrCc) {
+            return;
+        }
+
+        for (let c = 0; c < frequenciesData.length; c++) { // for each channel
+            const pixels = my.resample(frequenciesData[c]);
+            const imageData = spectrCc.createImageData(width, height);
+
+            for (let i = 0; i < pixels.length; i++) {
+                for (let j = 0; j < pixels[i].length; j++) {
+                    const colorMap = my.colorMap[pixels[i][j]];
+                    const redIndex = ((height - j) * width + i) * 4;
                     imageData.data[redIndex] = colorMap[0] * 255;
                     imageData.data[redIndex + 1] = colorMap[1] * 255;
                     imageData.data[redIndex + 2] = colorMap[2] * 255;
                     imageData.data[redIndex + 3] = colorMap[3] * 255;
                 }
-                /* eslint-enable max-depth */
             }
+
+            // stack spectrograms
+            spectrCc.putImageData(imageData, 0, height * c);
         }
-        spectrCc.putImageData(imageData, 0, 0);
     }
 
     getFrequencies(callback) {
         const fftSamples = this.fftSamples;
         const buffer = (this.buffer = this.wavesurfer.backend.buffer);
-        const channelOne = buffer.getChannelData(0);
-        const bufferLength = buffer.length;
-        const sampleRate = buffer.sampleRate;
-        const frequencies = [];
+        const channels = this.channels;
 
         if (!buffer) {
             this.fireEvent('error', 'Web Audio buffer is not available');
             return;
         }
 
+        // This may differ from file samplerate. Browser resamples audio.
+        const sampleRate = buffer.sampleRate;
+        const frequencies = [];
+
         let noverlap = this.noverlap;
         if (!noverlap) {
             const uniqueSamplesPerPx = buffer.length / this.canvas.width;
@@ -305,24 +312,30 @@ export default class SpectrogramPlugin {
             this.windowFunc,
             this.alpha
         );
-        const maxSlicesCount = Math.floor(
-            bufferLength / (fftSamples - noverlap)
-        );
-        let currentOffset = 0;
 
-        while (currentOffset + fftSamples < channelOne.length) {
-            const segment = channelOne.slice(
-                currentOffset,
-                currentOffset + fftSamples
-            );
-            const spectrum = fft.calculateSpectrum(segment);
-            const array = new Uint8Array(fftSamples / 2);
-            let j;
-            for (j = 0; j < fftSamples / 2; j++) {
-                array[j] = Math.max(-255, Math.log10(spectrum[j]) * 45);
+        for (let c = 0; c < channels; c++) { // for each channel
+            const channelData = buffer.getChannelData(c);
+            const channelFreq = [];
+            let currentOffset = 0;
+
+            while (currentOffset + fftSamples < channelData.length) {
+                const segment = channelData.slice(
+                    currentOffset,
+                    currentOffset + fftSamples
+                );
+                const spectrum = fft.calculateSpectrum(segment);
+                const array = new Uint8Array(fftSamples / 2);
+                let j;
+                for (j = 0; j < fftSamples / 2; j++) {
+                    array[j] = Math.max(-255, Math.log10(spectrum[j]) * 45);
+                }
+                channelFreq.push(array);
+                // channelFreq: [sample, freq]
+
+                currentOffset += fftSamples - noverlap;
             }
-            frequencies.push(array);
-            currentOffset += fftSamples - noverlap;
+            frequencies.push(channelFreq);
+            // frequencies: [channel, sample, freq]
         }
         callback(frequencies, this);
     }
@@ -375,50 +388,56 @@ export default class SpectrogramPlugin {
 
         // prepare canvas element for labels
         const ctx = this.labelsEl.getContext('2d');
-        this.labelsEl.height = this.height;
+        this.labelsEl.height = this.height * this.channels;
         this.labelsEl.width = bgWidth;
 
-        // fill background
-        ctx.fillStyle = bgFill;
-        ctx.fillRect(0, 0, bgWidth, getMaxY);
-        ctx.fill();
-        let i;
-
-        // render labels
-        for (i = 0; i <= labelIndex; i++) {
-            ctx.textAlign = textAlign;
-            ctx.textBaseline = 'middle';
+        if (!ctx) {
+            return;
+        }
 
-            const freq = freqStart + step * i;
-            const index = Math.round(
-                (freq / (this.sampleRate / 2)) * this.fftSamples
-            );
-            const label = this.freqType(freq);
-            const units = this.unitType(freq);
-            const yLabelOffset = 2;
-            const x = 16;
-            let y;
-
-            if (i == 0) {
-                y = getMaxY + i - 10;
-                // unit label
-                ctx.fillStyle = textColorUnit;
-                ctx.font = fontSizeUnit + ' ' + fontType;
-                ctx.fillText(units, x + 24, y);
-                // freq label
-                ctx.fillStyle = textColorFreq;
-                ctx.font = fontSizeFreq + ' ' + fontType;
-                ctx.fillText(label, x, y);
-            } else {
-                y = getMaxY - i * 50 + yLabelOffset;
-                // unit label
-                ctx.fillStyle = textColorUnit;
-                ctx.font = fontSizeUnit + ' ' + fontType;
-                ctx.fillText(units, x + 24, y);
-                // freq label
-                ctx.fillStyle = textColorFreq;
-                ctx.font = fontSizeFreq + ' ' + fontType;
-                ctx.fillText(label, x, y);
+        for (let c = 0; c < this.channels; c++) { // for each channel
+            // fill background
+            ctx.fillStyle = bgFill;
+            ctx.fillRect(0, c * getMaxY, bgWidth, (1 + c) * getMaxY);
+            ctx.fill();
+            let i;
+
+            // render labels
+            for (i = 0; i <= labelIndex; i++) {
+                ctx.textAlign = textAlign;
+                ctx.textBaseline = 'middle';
+
+                const freq = freqStart + step * i;
+                const index = Math.round(
+                    (freq / (this.sampleRate / 2)) * this.fftSamples
+                );
+                const label = this.freqType(freq);
+                const units = this.unitType(freq);
+                const yLabelOffset = 2;
+                const x = 16;
+                let y;
+
+                if (i == 0) {
+                    y = (1 + c) * getMaxY + i - 10;
+                    // unit label
+                    ctx.fillStyle = textColorUnit;
+                    ctx.font = fontSizeUnit + ' ' + fontType;
+                    ctx.fillText(units, x + 24, y);
+                    // freq label
+                    ctx.fillStyle = textColorFreq;
+                    ctx.font = fontSizeFreq + ' ' + fontType;
+                    ctx.fillText(label, x, y);
+                } else {
+                    y = (1 + c) * getMaxY - i * 50 + yLabelOffset;
+                    // unit label
+                    ctx.fillStyle = textColorUnit;
+                    ctx.font = fontSizeUnit + ' ' + fontType;
+                    ctx.fillText(units, x + 24, y);
+                    // freq label
+                    ctx.fillStyle = textColorFreq;
+                    ctx.font = fontSizeFreq + ' ' + fontType;
+                    ctx.fillText(label, x, y);
+                }
             }
         }
     }

package/src/plugin/timeline/index.js

@@ -434,7 +434,10 @@ export default class TimelinePlugin {
      */
     setFillStyles(fillStyle) {
         this.canvases.forEach(canvas => {
-            canvas.getContext('2d').fillStyle = fillStyle;
+            const context = canvas.getContext('2d');
+            if (context) {
+                context.fillStyle = fillStyle;
+            }
         });
     }
 
@@ -445,7 +448,10 @@ export default class TimelinePlugin {
      */
     setFonts(font) {
         this.canvases.forEach(canvas => {
-            canvas.getContext('2d').font = font;
+            const context = canvas.getContext('2d');
+            if (context) {
+                context.font = font;
+            }
         });
     }
 
@@ -471,14 +477,17 @@ export default class TimelinePlugin {
             };
 
             if (intersection.x1 < intersection.x2) {
-                canvas
-                    .getContext('2d')
-                    .fillRect(
-                        intersection.x1 - leftOffset,
-                        intersection.y1,
-                        intersection.x2 - intersection.x1,
-                        intersection.y2 - intersection.y1
-                    );
+                const context = canvas
+                    .getContext('2d');
+                if (context) {
+                    context
+                        .fillRect(
+                            intersection.x1 - leftOffset,
+                            intersection.y1,
+                            intersection.x2 - intersection.x1,
+                            intersection.y2 - intersection.y1
+                        );
+                }
             }
         });
     }
@@ -496,18 +505,20 @@ export default class TimelinePlugin {
 
         this.canvases.forEach(canvas => {
             const context = canvas.getContext('2d');
-            const canvasWidth = context.canvas.width;
+            if (context) {
+                const canvasWidth = context.canvas.width;
 
-            if (xOffset > x + textWidth) {
-                return;
-            }
+                if (xOffset > x + textWidth) {
+                    return;
+                }
 
-            if (xOffset + canvasWidth > x) {
-                textWidth = context.measureText(text).width;
-                context.fillText(text, x - xOffset, y);
-            }
+                if (xOffset + canvasWidth > x && context) {
+                    textWidth = context.measureText(text).width;
+                    context.fillText(text, x - xOffset, y);
+                }
 
-            xOffset += canvasWidth;
+                xOffset += canvasWidth;
+            }
         });
     }
 

package/src/util/index.js

@@ -11,3 +11,4 @@ export { default as preventClick } from './prevent-click';
 export { default as fetchFile } from './fetch';
 export { default as clamp } from './clamp';
 export { default as withOrientation } from './orientation';
+export { default as ignoreSilenceMode } from './silence-mode';