wavesurfer.js 5.2.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';
 
@@ -190,7 +191,7 @@ export class Region {
 
         this.style(this.element, {
             position: 'absolute',
-            zIndex: 2,
+            zIndex: 3,
             height: this.regionHeight,
             top: this.marginTop
         });
@@ -749,16 +750,20 @@ export class Region {
         const duration = this.wavesurfer.getDuration();
         const eventParams = {
             action: 'resize',
-            direction: direction === 'start' ? 'right' : 'left'
+            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;
             }
@@ -769,11 +774,15 @@ export class Region {
             }, 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;
             }

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,57 +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;
-        if (spectrCc) {
+
+        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);
-            let i;
-            let j;
-            let k;
 
-            for (i = 0; i < pixels.length; i++) {
-                for (j = 0; j < pixels[i].length; j++) {
+            for (let i = 0; i < pixels.length; i++) {
+                for (let 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;
-                        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 */
+                    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;
                 }
             }
-            spectrCc.putImageData(imageData, 0, 0);
+
+            // stack spectrograms
+            spectrCc.putImageData(imageData, 0, height * c);
         }
     }
 
     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;
@@ -307,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);
     }
@@ -377,13 +388,17 @@ 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;
 
-        if (ctx) {
+        if (!ctx) {
+            return;
+        }
+
+        for (let c = 0; c < this.channels; c++) { // for each channel
             // fill background
             ctx.fillStyle = bgFill;
-            ctx.fillRect(0, 0, bgWidth, getMaxY);
+            ctx.fillRect(0, c * getMaxY, bgWidth, (1 + c) * getMaxY);
             ctx.fill();
             let i;
 
@@ -403,7 +418,7 @@ export default class SpectrogramPlugin {
                 let y;
 
                 if (i == 0) {
-                    y = getMaxY + i - 10;
+                    y = (1 + c) * getMaxY + i - 10;
                     // unit label
                     ctx.fillStyle = textColorUnit;
                     ctx.font = fontSizeUnit + ' ' + fontType;
@@ -413,7 +428,7 @@ export default class SpectrogramPlugin {
                     ctx.font = fontSizeFreq + ' ' + fontType;
                     ctx.fillText(label, x, y);
                 } else {
-                    y = getMaxY - i * 50 + yLabelOffset;
+                    y = (1 + c) * getMaxY - i * 50 + yLabelOffset;
                     // unit label
                     ctx.fillStyle = textColorUnit;
                     ctx.font = fontSizeUnit + ' ' + fontType;

package/src/wavesurfer.js

@@ -69,6 +69,8 @@ import MediaElementWebAudio from './mediaelement-webaudio';
  * pixels.
  * @property {boolean} hideScrollbar=false Whether to hide the horizontal
  * scrollbar when one would normally be shown.
+ * @property {boolean} hideCursor=false Whether to hide the mouse cursor
+ * when one would normally be shown by default.
  * @property {boolean} ignoreSilenceMode=false If true, ignores device silence mode
  * when using the `WebAudio` backend.
  * @property {boolean} interact=true Whether the mouse interaction will be
@@ -270,6 +272,7 @@ export default class WaveSurfer extends util.Observer {
         forceDecode: false,
         height: 128,
         hideScrollbar: false,
+        hideCursor: false,
         ignoreSilenceMode: false,
         interact: true,
         loopSelection: true,
@@ -1125,40 +1128,58 @@ export default class WaveSurfer extends util.Observer {
     /**
      * Get the fill color of the waveform after the cursor.
      *
-     * @return {string} A CSS color string.
+     * @param {?number} channelIdx Optional index of the channel to get its wave color if splitChannels is true
+     * @return {string|object} A CSS color string, or an array of CSS color strings.
      */
-    getWaveColor() {
+    getWaveColor(channelIdx = null) {
+        if (this.params.splitChannelsOptions.channelColors[channelIdx]) {
+            return this.params.splitChannelsOptions.channelColors[channelIdx].waveColor;
+        }
         return this.params.waveColor;
     }
 
     /**
      * Set the fill color of the waveform after the cursor.
      *
-     * @param {string} color A CSS color string.
+     * @param {string|object} color A CSS color string, or an array of CSS color strings.
+     * @param {?number} channelIdx Optional index of the channel to set its wave color if splitChannels is true
      * @example wavesurfer.setWaveColor('#ddd');
      */
-    setWaveColor(color) {
-        this.params.waveColor = color;
+    setWaveColor(color, channelIdx = null) {
+        if (this.params.splitChannelsOptions.channelColors[channelIdx]) {
+            this.params.splitChannelsOptions.channelColors[channelIdx].waveColor = color;
+        } else {
+            this.params.waveColor = color;
+        }
         this.drawBuffer();
     }
 
     /**
      * Get the fill color of the waveform behind the cursor.
      *
-     * @return {string} A CSS color string.
+     * @param {?number} channelIdx Optional index of the channel to get its progress color if splitChannels is true
+     * @return {string|object} A CSS color string, or an array of CSS color strings.
      */
-    getProgressColor() {
+    getProgressColor(channelIdx = null) {
+        if (this.params.splitChannelsOptions.channelColors[channelIdx]) {
+            return this.params.splitChannelsOptions.channelColors[channelIdx].progressColor;
+        }
         return this.params.progressColor;
     }
 
     /**
      * Set the fill color of the waveform behind the cursor.
      *
-     * @param {string} color A CSS color string.
+     * @param {string|object} color A CSS color string, or an array of CSS color strings.
+     * @param {?number} channelIdx Optional index of the channel to set its progress color if splitChannels is true
      * @example wavesurfer.setProgressColor('#400');
      */
-    setProgressColor(color) {
-        this.params.progressColor = color;
+    setProgressColor(color, channelIdx) {
+        if (this.params.splitChannelsOptions.channelColors[channelIdx]) {
+            this.params.splitChannelsOptions.channelColors[channelIdx].progressColor = color;
+        } else {
+            this.params.progressColor = color;
+        }
         this.drawBuffer();
     }