wavesurfer.js 4.6.0 → 5.2.0

package/src/plugin/regions/region.js

@@ -15,6 +15,7 @@ export class Region {
         this.util = ws.util;
         this.style = this.util.style;
         this.regionsUtil = regionsUtils;
+        this.vertical = ws.drawer.params.vertical;
 
         this.id = params.id == null ? ws.util.getId() : params.id;
         this.start = Number(params.start) || 0;
@@ -42,6 +43,7 @@ export class Region {
         this.handleRightEl = null;
         this.data = params.data || {};
         this.attributes = params.attributes || {};
+        this.showTooltip = params.showTooltip ?? true;
 
         this.maxLength = params.maxLength;
         // It assumes the minLength parameter value, or the regionsMinLength parameter value, if the first one not provided
@@ -85,7 +87,7 @@ export class Region {
     }
 
     /* Update region params. */
-    update(params) {
+    update(params, eventParams) {
         if (params.start != null) {
             this.start = Number(params.start);
         }
@@ -123,13 +125,13 @@ 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. */
     remove() {
         if (this.element) {
-            this.wrapper.removeChild(this.element);
+            this.wrapper.removeChild(this.element.domElement);
             this.element = null;
             this.fireEvent('remove');
             this.wavesurfer.un('zoom', this._onRedraw);
@@ -168,20 +170,25 @@ export class Region {
 
     /* Render a region as a DOM element. */
     render() {
-        const regionEl = document.createElement('region');
+        this.element = this.util.withOrientation(
+            this.wrapper.appendChild(document.createElement('region')),
+            this.vertical
+        );
 
-        regionEl.className = 'wavesurfer-region';
-        regionEl.title = this.formatTime(this.start, this.end);
-        regionEl.setAttribute('data-id', this.id);
+        this.element.className = 'wavesurfer-region';
+        if (this.showTooltip) {
+            this.element.title = this.formatTime(this.start, this.end);
+        }
+        this.element.setAttribute('data-id', this.id);
 
         for (const attrname in this.attributes) {
-            regionEl.setAttribute(
+            this.element.setAttribute(
                 'data-region-' + attrname,
                 this.attributes[attrname]
             );
         }
 
-        this.style(regionEl, {
+        this.style(this.element, {
             position: 'absolute',
             zIndex: 2,
             height: this.regionHeight,
@@ -190,11 +197,13 @@ export class Region {
 
         /* Resize handles */
         if (this.resize) {
-            this.handleLeftEl = regionEl.appendChild(
-                document.createElement('handle')
+            this.handleLeftEl = this.util.withOrientation(
+                this.element.appendChild(document.createElement('handle')),
+                this.vertical
             );
-            this.handleRightEl = regionEl.appendChild(
-                document.createElement('handle')
+            this.handleRightEl = this.util.withOrientation(
+                this.element.appendChild(document.createElement('handle')),
+                this.vertical
             );
 
             this.handleLeftEl.className = 'wavesurfer-handle wavesurfer-handle-start';
@@ -202,7 +211,7 @@ export class Region {
 
             // Default CSS properties for both handles.
             const css = {
-                cursor: 'col-resize',
+                cursor: this.vertical ? 'row-resize' : 'col-resize',
                 position: 'absolute',
                 top: '0px',
                 width: '2px',
@@ -213,7 +222,11 @@ export class Region {
             // Merge CSS properties per handle.
             const handleLeftCss =
                 this.handleStyle.left !== 'none'
-                    ? Object.assign({ left: '0px' }, css, this.handleStyle.left)
+                    ? Object.assign(
+                        { left: '0px' },
+                        css,
+                        this.handleStyle.left
+                    )
                     : null;
             const handleRightCss =
                 this.handleStyle.right !== 'none'
@@ -233,9 +246,8 @@ export class Region {
             }
         }
 
-        this.element = this.wrapper.appendChild(regionEl);
         this.updateRender();
-        this.bindEvents(regionEl);
+        this.bindEvents();
     }
 
     formatTime(start, end) {
@@ -301,7 +313,9 @@ export class Region {
                 );
             }
 
-            this.element.title = this.formatTime(this.start, this.end);
+            if (this.showTooltip) {
+                this.element.title = this.formatTime(this.start, this.end);
+            }
         }
     }
 
@@ -407,20 +421,21 @@ export class Region {
         let regionRightHalfTime;
 
         // Scroll when the user is dragging within the threshold
-        const edgeScroll = (e) => {
+        const edgeScroll = (event) => {
+            let orientedEvent = this.util.withOrientation(event, this.vertical);
             const duration = this.wavesurfer.getDuration();
             if (!scrollDirection || (!drag && !resize)) {
                 return;
             }
 
-            const x = e.clientX;
+            const x = orientedEvent.clientX;
             let distanceBetweenCursorAndWrapperEdge = 0;
             let regionHalfTimeWidth = 0;
             let adjustment = 0;
 
             // Get the currently selected time according to the mouse position
             let time = this.regionsUtil.getRegionSnapToGridValue(
-                this.wavesurfer.drawer.handleEvent(e) * duration
+                this.wavesurfer.drawer.handleEvent(event) * duration
             );
 
             if (drag) {
@@ -461,26 +476,28 @@ export class Region {
             }
 
             // Don't edgescroll if region has reached min or max limit
+            const wrapperScrollLeft = this.wrapper.scrollLeft;
+
             if (scrollDirection === -1) {
-                if (Math.round(this.wrapper.scrollLeft) === 0) {
+                if (Math.round(wrapperScrollLeft) === 0) {
                     return;
                 }
 
-                if (Math.round(this.wrapper.scrollLeft - regionHalfTimeWidth + distanceBetweenCursorAndWrapperEdge) <= 0) {
+                if (Math.round(wrapperScrollLeft - regionHalfTimeWidth + distanceBetweenCursorAndWrapperEdge) <= 0) {
                     return;
                 }
             } else {
-                if (Math.round(this.wrapper.scrollLeft) === maxScroll) {
+                if (Math.round(wrapperScrollLeft) === maxScroll) {
                     return;
                 }
 
-                if (Math.round(this.wrapper.scrollLeft + regionHalfTimeWidth - distanceBetweenCursorAndWrapperEdge) >= maxScroll) {
+                if (Math.round(wrapperScrollLeft + regionHalfTimeWidth - distanceBetweenCursorAndWrapperEdge) >= maxScroll) {
                     return;
                 }
             }
 
             // Update scroll position
-            let scrollLeft = this.wrapper.scrollLeft - adjustment + scrollSpeed * scrollDirection;
+            let scrollLeft = wrapperScrollLeft - adjustment + scrollSpeed * scrollDirection;
 
             if (scrollDirection === -1) {
                 const calculatedLeft = Math.max(0 + regionHalfTimeWidth - distanceBetweenCursorAndWrapperEdge, scrollLeft);
@@ -498,26 +515,26 @@ export class Region {
 
             // Repeat
             window.requestAnimationFrame(() => {
-                edgeScroll(e);
+                edgeScroll(event);
             });
         };
 
-        const onDown = (e) => {
+        const onDown = (event) => {
             const duration = this.wavesurfer.getDuration();
-            if (e.touches && e.touches.length > 1) {
+            if (event.touches && event.touches.length > 1) {
                 return;
             }
-            touchId = e.targetTouches ? e.targetTouches[0].identifier : null;
+            touchId = event.targetTouches ? event.targetTouches[0].identifier : null;
 
             // stop the event propagation, if this region is resizable or draggable
             // and the event is therefore handled here.
             if (this.drag || this.resize) {
-                e.stopPropagation();
+                event.stopPropagation();
             }
 
             // Store the selected startTime we begun dragging or resizing
             startTime = this.regionsUtil.getRegionSnapToGridValue(
-                this.wavesurfer.drawer.handleEvent(e, true) * duration
+                this.wavesurfer.drawer.handleEvent(event, true) * duration
             );
 
             // Store the selected point of contact when we begin dragging
@@ -526,13 +543,17 @@ export class Region {
 
             // Store for scroll calculations
             maxScroll = this.wrapper.scrollWidth - this.wrapper.clientWidth;
-            wrapperRect = this.wrapper.getBoundingClientRect();
+
+            wrapperRect = this.util.withOrientation(
+                this.wrapper.getBoundingClientRect(),
+                this.vertical
+            );
 
             this.isResizing = false;
             this.isDragging = false;
-            if (e.target.tagName.toLowerCase() === 'handle') {
+            if (event.target.tagName.toLowerCase() === 'handle') {
                 this.isResizing = true;
-                resize = e.target.classList.contains('wavesurfer-handle-start')
+                resize = event.target.classList.contains('wavesurfer-handle-start')
                     ? 'start'
                     : 'end';
             } else {
@@ -541,8 +562,8 @@ export class Region {
                 resize = false;
             }
         };
-        const onUp = (e) => {
-            if (e.touches && e.touches.length > 1) {
+        const onUp = (event) => {
+            if (event.touches && event.touches.length > 1) {
                 return;
             }
 
@@ -557,17 +578,18 @@ export class Region {
             if (updated) {
                 updated = false;
                 this.util.preventClick();
-                this.fireEvent('update-end', e);
-                this.wavesurfer.fireEvent('region-update-end', this, e);
+                this.fireEvent('update-end', event);
+                this.wavesurfer.fireEvent('region-update-end', this, event);
             }
         };
-        const onMove = (e) => {
+        const onMove = (event) => {
             const duration = this.wavesurfer.getDuration();
+            let orientedEvent = this.util.withOrientation(event, this.vertical);
 
-            if (e.touches && e.touches.length > 1) {
+            if (event.touches && event.touches.length > 1) {
                 return;
             }
-            if (e.targetTouches && e.targetTouches[0].identifier != touchId) {
+            if (event.targetTouches && event.targetTouches[0].identifier != touchId) {
                 return;
             }
             if (!drag && !resize) {
@@ -576,7 +598,7 @@ export class Region {
 
             const oldTime = startTime;
             let time = this.regionsUtil.getRegionSnapToGridValue(
-                this.wavesurfer.drawer.handleEvent(e) * duration
+                this.wavesurfer.drawer.handleEvent(event) * duration
             );
 
             if (drag) {
@@ -634,36 +656,22 @@ export class Region {
             }
 
             if (
-                this.scroll &&
-                container.clientWidth < this.wrapper.scrollWidth
+                this.scroll && container.clientWidth < this.wrapper.scrollWidth
             ) {
                 // Triggering edgescroll from within edgeScrollWidth
-                if (drag) {
-                    let x = e.clientX;
-
-                    // Check direction
-                    if (x < wrapperRect.left + this.edgeScrollWidth) {
-                        scrollDirection = -1;
-                    } else if (x > wrapperRect.right - this.edgeScrollWidth) {
-                        scrollDirection = 1;
-                    } else {
-                        scrollDirection = null;
-                    }
+                let x = orientedEvent.clientX;
+
+                // Check direction
+                if (x < wrapperRect.left + this.edgeScrollWidth) {
+                    scrollDirection = -1;
+                } else if (x > wrapperRect.right - this.edgeScrollWidth) {
+                    scrollDirection = 1;
                 } else {
-                    let x = e.clientX;
-
-                    // Check direction
-                    if (x < wrapperRect.left + this.edgeScrollWidth) {
-                        scrollDirection = -1;
-                    } else if (x > wrapperRect.right - this.edgeScrollWidth) {
-                        scrollDirection = 1;
-                    } else {
-                        scrollDirection = null;
-                    }
+                    scrollDirection = null;
                 }
 
                 if (scrollDirection) {
-                    edgeScroll(e);
+                    edgeScroll(event);
                 }
             }
         };
@@ -672,20 +680,20 @@ 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.body.addEventListener('mouseup', onUp);
+        document.addEventListener('mouseup', onUp);
         document.body.addEventListener('touchend', onUp);
 
         this.on('remove', () => {
-            document.body.removeEventListener('mouseup', onUp);
+            document.removeEventListener('mouseup', onUp);
             document.body.removeEventListener('touchend', onUp);
             document.body.removeEventListener('mousemove', onMove);
             document.body.removeEventListener('touchmove', onMove);
         });
 
         this.wavesurfer.on('destroy', () => {
-            document.body.removeEventListener('mouseup', onUp);
+            document.removeEventListener('mouseup', onUp);
             document.body.removeEventListener('touchend', onUp);
         });
     }
@@ -700,10 +708,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;
     }
 
     /**
@@ -716,6 +747,11 @@ export class Region {
      */
     onResize(delta, direction) {
         const duration = this.wavesurfer.getDuration();
+        const eventParams = {
+            action: 'resize',
+            direction: direction === 'start' ? 'right' : 'left'
+        };
+
         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
@@ -730,7 +766,7 @@ 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
@@ -745,12 +781,17 @@ export class Region {
             this.update({
                 start: Math.min(this.end + delta, this.start),
                 end: Math.max(this.end + delta, this.start)
-            });
+            }, eventParams);
         }
     }
 
     updateHandlesResize(resize) {
-        const cursorStyle = resize ? 'col-resize' : 'auto';
+        let cursorStyle;
+        if (resize) {
+            cursorStyle = this.vertical ? 'row-resize' : 'col-resize';
+        } else {
+            cursorStyle = 'auto';
+        }
 
         this.handleLeftEl && this.style(this.handleLeftEl, { cursor: cursorStyle });
         this.handleRightEl && this.style(this.handleRightEl, { cursor: cursorStyle });

package/src/plugin/spectrogram/index.js

@@ -254,30 +254,32 @@ export default class SpectrogramPlugin {
         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--;
+        if (spectrCc) {
+            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;
+                        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;
                     }
-                    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 */
                 }
-                /* eslint-enable max-depth */
             }
+            spectrCc.putImageData(imageData, 0, 0);
         }
-        spectrCc.putImageData(imageData, 0, 0);
     }
 
     getFrequencies(callback) {
@@ -378,47 +380,49 @@ export default class SpectrogramPlugin {
         this.labelsEl.height = this.height;
         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';
-
-            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);
+        if (ctx) {
+            // 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';
+
+                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);
+                }
             }
         }
     }

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

@@ -10,3 +10,5 @@ export { default as debounce } from 'debounce';
 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';