wavesurfer.js 5.0.0 → 6.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wavesurfer.js",
-  "version": "5.0.0",
+  "version": "6.0.0",
   "description": "Interactive navigable audio visualization using Web Audio and Canvas",
   "main": "dist/wavesurfer.js",
   "directories": {
@@ -55,17 +55,17 @@
     "visualization"
   ],
   "devDependencies": {
-    "@babel/core": "^7.13.16",
-    "@babel/preset-env": "^7.13.15",
-    "@babel/register": "^7.13.16",
-    "@chiragrupani/karma-chromium-edge-launcher": "^2.1.0",
-    "babel-eslint": "^10.1.0",
-    "babel-loader": "^8.2.2",
+    "@babel/core": "^7.17.0",
+    "@babel/eslint-parser": "^7.17.0",
+    "@babel/plugin-proposal-class-properties": "^7.16.7",
+    "@babel/preset-env": "^7.16.11",
+    "@babel/register": "^7.17.0",
+    "@chiragrupani/karma-chromium-edge-launcher": "^2.2.1",
+    "babel-loader": "^8.2.3",
     "babel-plugin-add-module-exports": "^1.0.4",
-    "babel-plugin-istanbul": "^6.0.0",
+    "babel-plugin-istanbul": "^6.1.1",
     "babel-plugin-proxy": "^1.1.0",
-    "babel-plugin-transform-class-properties": "^6.24.1",
-    "date-fns": "^2.21.1",
+    "date-fns": "^2.28.0",
     "debounce": "^1.2.1",
     "esdoc": "^1.1.0",
     "esdoc-accessor-plugin": "^1.0.0",
@@ -74,25 +74,25 @@
     "esdoc-ecmascript-proposal-plugin": "^1.0.0",
     "esdoc-integrate-test-plugin": "^1.0.0",
     "esdoc-standard-plugin": "^1.0.0",
-    "eslint": "^7.24.0",
-    "htmlhint": "^0.14.2",
+    "eslint": "^8.8.0",
+    "htmlhint": "^1.1.2",
     "in-publish": "^2.0.1",
-    "jasmine-core": "^3.7.1",
-    "karma": "^5.2.3",
+    "jasmine-core": "^4.0.0",
+    "karma": "^6.3.15",
     "karma-chrome-launcher": "3.1.0",
-    "karma-coverage": "^2.0.3",
-    "karma-firefox-launcher": "^2.1.0",
+    "karma-coverage": "^2.1.1",
+    "karma-firefox-launcher": "^2.1.2",
     "karma-jasmine": "4.0.1",
-    "karma-jasmine-matchers": "4.0.2",
-    "karma-verbose-reporter": "0.0.6",
+    "karma-jasmine-matchers": "5.0.0",
+    "karma-verbose-reporter": "0.0.8",
     "karma-webpack": "^5.0.0",
-    "lint-staged": "^10.5.4",
-    "load-script": "^1.0.0",
+    "lint-staged": "^12.3.3",
+    "load-script": "^2.0.0",
     "pre-commit": "^1.2.2",
-    "webpack": "^5.35.0",
-    "webpack-cli": "^4.6.0",
-    "webpack-dev-server": "^4.0.0-beta.2",
-    "webpack-merge": "^5.7.3"
+    "webpack": "^5.68.0",
+    "webpack-cli": "^4.9.2",
+    "webpack-dev-server": "^4.7.4",
+    "webpack-merge": "^5.8.0"
   },
   "homepage": "https://wavesurfer-js.org",
   "pre-commit": "lint-js-html",

package/src/drawer.canvasentry.js

@@ -145,18 +145,42 @@ export default class CanvasEntry {
 
     /**
      * Set the fill styles for wave and progress
-     *
-     * @param {string} waveColor Fill color for the wave canvas
-     * @param {?string} progressColor Fill color for the progress canvas
+     * @param {string|string[]} waveColor Fill color for the wave canvas,
+     * or an array of colors to apply as a gradient
+     * @param {?string|string[]} progressColor Fill color for the progress canvas,
+     * or an array of colors to apply as a gradient
      */
     setFillStyles(waveColor, progressColor) {
-        this.waveCtx.fillStyle = waveColor;
+        this.waveCtx.fillStyle = this.getFillStyle(this.waveCtx, waveColor);
 
         if (this.hasProgressCanvas) {
-            this.progressCtx.fillStyle = progressColor;
+            this.progressCtx.fillStyle = this.getFillStyle(this.progressCtx, progressColor);
         }
     }
 
+    /**
+     * Utility function to handle wave color arguments
+     *
+     * When the color argument type is a string, it will be returned as is.
+     * Otherwise, it will be treated as an array, and a canvas gradient will
+     * be returned
+     *
+     * @since 5.3.0
+     * @param {CanvasRenderingContext2D} ctx Rendering context of target canvas
+     * @param {string|string[]} color Fill color for the wave canvas, or an array of colors to apply as a gradient
+     * @returns {string|CanvasGradient} Returns a string fillstyle value, or a canvas gradient
+     */
+    getFillStyle(ctx, color) {
+        if (typeof color == 'string') {
+            return color;
+        }
+
+        const waveGradient = ctx.createLinearGradient(0, 0, 0, ctx.canvas.height);
+        color.forEach((value, index) => waveGradient.addColorStop((index / color.length), value));
+
+        return waveGradient;
+    }
+
     /**
      * Set the canvas transforms for wave and progress
      *
@@ -357,7 +381,7 @@ export default class CanvasEntry {
         ctx.lineTo(
             (canvasStart - first) * scale,
             halfOffset -
-                Math.round((peaks[2 * canvasStart + 1] || 0) / absmaxHalf)
+            Math.round((peaks[2 * canvasStart + 1] || 0) / absmaxHalf)
         );
 
         ctx.closePath();

package/src/drawer.js

@@ -69,6 +69,7 @@ export default class Drawer extends util.Observer {
         if (this.params.fillParent || this.params.scrollParent) {
             this.style(this.wrapper, {
                 width: '100%',
+                cursor: this.params.hideCursor ? 'none' : 'auto',
                 overflowX: this.params.hideScrollbar ? 'hidden' : 'auto',
                 overflowY: 'hidden'
             });
@@ -342,7 +343,7 @@ export default class Drawer extends util.Observer {
     destroy() {
         this.unAll();
         if (this.wrapper) {
-            if (this.wrapper.parentNode == this.container) {
+            if (this.wrapper.parentNode == this.container.domElement) {
                 this.container.removeChild(this.wrapper.domElement);
             }
             this.wrapper = null;

package/src/drawer.multicanvas.js

@@ -305,21 +305,32 @@ export default class MultiCanvas extends Drawer {
                 const scale = length / this.width;
                 const first = start;
                 const last = end;
-                let i = first;
-
-                for (i; i < last; i += step) {
-                    const peak =
-                        peaks[Math.floor(i * scale * peakIndexScale)] || 0;
+                let peakIndex = first;
+                for (peakIndex; peakIndex < last; peakIndex += step) {
+
+                    // search for the highest peak in the range this bar falls into
+                    let peak = 0;
+                    let peakIndexRange = Math.floor(peakIndex * scale) * peakIndexScale; // start index
+                    const peakIndexEnd = Math.floor((peakIndex + step) * scale) * peakIndexScale;
+                    do { // do..while makes sure at least one peak is always evaluated
+                        const newPeak = peaks[peakIndexRange];
+                        if (newPeak > peak) {
+                            peak = newPeak; // higher
+                        }
+                        peakIndexRange += peakIndexScale; // skip every other value for negatives
+                    } while (peakIndexRange < peakIndexEnd);
+
+                    // calculate the height of this bar according to the highest peak found
                     let h = Math.round((peak / absmax) * halfH);
 
-                    /* in case of silences, allow the user to specify that we
-                     * always draw *something* (normally a 1px high bar) */
+                    // in case of silences, allow the user to specify that we
+                    // always draw *something* (normally a 1px high bar)
                     if (h == 0 && this.params.barMinHeight) {
                         h = this.params.barMinHeight;
                     }
 
                     this.fillRect(
-                        i + this.halfPixel,
+                        peakIndex + this.halfPixel,
                         halfH - h + offsetY,
                         bar + this.halfPixel,
                         h * 2,

package/src/mediaelement.js

@@ -275,7 +275,7 @@ export default class MediaElement extends WebAudio {
      * @param {number} start Position to start at in seconds
      */
     seekTo(start) {
-        if (start != null) {
+        if (start != null && !isNaN(start)) {
             this.media.currentTime = start;
         }
         this.clearPlayEnd();

package/src/plugin/cursor/index.js

@@ -86,14 +86,15 @@ export default class CursorPlugin {
      * @param {object} e Mouse move event
      */
     _onMousemove = e => {
-        const bbox = this.wavesurfer.container.getBoundingClientRect();
+        const event = this.util.withOrientation(e, this.wavesurfer.params.vertical);
+        const bbox = this.wrapper.getBoundingClientRect();
         let y = 0;
-        let x = e.clientX - bbox.left;
-        let flip = bbox.right < e.clientX + this.outerWidth(this.displayTime);
+        let x = this.wrapper.scrollLeft + event.clientX - bbox.left;
+        let flip = bbox.right < event.clientX + this.displayTime.getBoundingClientRect().width;
 
         if (this.params.showTime && this.params.followCursorY) {
             // follow y-position of the mouse
-            y = e.clientY - (bbox.top + bbox.height / 2);
+            y = event.clientY - (bbox.top + bbox.height / 2);
         }
 
         this.updateCursorPosition(x, y, flip);
@@ -119,6 +120,7 @@ export default class CursorPlugin {
     constructor(params, ws) {
         this.wavesurfer = ws;
         this.style = ws.util.style;
+        this.util = ws.util;
         /**
          * The cursor HTML element
          *
@@ -141,14 +143,38 @@ export default class CursorPlugin {
         this.params = Object.assign({}, this.defaultParams, params);
     }
 
-    /**
-     * Initialise the plugin (used by the Plugin API)
-     */
-    init() {
-        this.wrapper = this.wavesurfer.container;
-        this.cursor = this.wrapper.appendChild(
+    _onReady() {
+        this.wrapper = this.wavesurfer.drawer.wrapper;
+        this.cursor = this.util.withOrientation(this.wrapper.appendChild(
+            document.createElement('cursor'),
+        ), this.wavesurfer.params.vertical);
+
+        this.style(this.cursor,
+            Object.assign(
+                {
+                    position: 'absolute',
+                    zIndex: this.params.zIndex,
+                    left: 0,
+                    top: 0,
+                    bottom: 0,
+                    width: '0',
+                    display: 'flex',
+                    borderRightStyle: this.params.style,
+                    borderRightWidth: this.params.width,
+                    borderRightColor: this.params.color,
+                    opacity: this.params.opacity,
+                    pointerEvents: 'none'
+                },
+                this.params.customStyle
+            )
+        );
+
+        if (this.params.showTime) {
+            this.showTime = this.util.withOrientation(this.wrapper.appendChild(
+                document.createElement('showTitle')
+            ), this.wavesurfer.params.vertical);
             this.style(
-                document.createElement('cursor'),
+                this.showTime,
                 Object.assign(
                     {
                         position: 'absolute',
@@ -156,53 +182,32 @@ export default class CursorPlugin {
                         left: 0,
                         top: 0,
                         bottom: 0,
-                        width: '0',
+                        width: 'auto',
                         display: 'flex',
-                        borderRightStyle: this.params.style,
-                        borderRightWidth: this.params.width,
-                        borderRightColor: this.params.color,
                         opacity: this.params.opacity,
-                        pointerEvents: 'none'
+                        pointerEvents: 'none',
+                        height: '100%'
                     },
                     this.params.customStyle
                 )
-            )
-        );
-        if (this.params.showTime) {
-            this.showTime = this.wrapper.appendChild(
-                this.style(
-                    document.createElement('showTitle'),
-                    Object.assign(
-                        {
-                            position: 'absolute',
-                            zIndex: this.params.zIndex,
-                            left: 0,
-                            top: 0,
-                            bottom: 0,
-                            width: 'auto',
-                            display: 'flex',
-                            opacity: this.params.opacity,
-                            pointerEvents: 'none',
-                            height: '100%'
-                        },
-                        this.params.customStyle
-                    )
-                )
             );
-            this.displayTime = this.showTime.appendChild(
-                this.style(
-                    document.createElement('div'),
-                    Object.assign(
-                        {
-                            display: 'inline',
-                            pointerEvents: 'none',
-                            margin: 'auto',
-                            visibility: 'hidden' // initial value will be hidden just for measuring purpose
-                        },
-                        this.params.customShowTimeStyle
-                    )
+
+            this.displayTime = this.util.withOrientation(this.showTime.appendChild(
+                document.createElement('div'),
+            ), this.wavesurfer.params.vertical);
+
+            this.style(this.displayTime,
+                Object.assign(
+                    {
+                        display: 'inline',
+                        pointerEvents: 'none',
+                        margin: 'auto',
+                        visibility: 'hidden' // initial value will be hidden just for measuring purpose
+                    },
+                    this.params.customShowTimeStyle
                 )
             );
+
             // initial value to measure display width
             this.displayTime.innerHTML = this.formatTime(0);
         }
@@ -216,6 +221,17 @@ export default class CursorPlugin {
         }
     }
 
+    /**
+     * Initialise the plugin (used by the Plugin API)
+     */
+    init() {
+        if (this.wavesurfer.isReady) {
+            this._onReady();
+        } else {
+            this.wavesurfer.once('ready', () => this._onReady());
+        }
+    }
+
     /**
      * Destroy the plugin (used by the Plugin API)
      */
@@ -253,10 +269,10 @@ export default class CursorPlugin {
                 (duration / this.wavesurfer.drawer.width) * scrollWidth;
 
             const timeValue =
-                Math.max(0, (xpos / elementWidth) * duration) + scrollTime;
+                Math.max(0, ((xpos - this.wrapper.scrollLeft) / elementWidth) * duration) + scrollTime;
             const formatValue = this.formatTime(timeValue);
             if (flip) {
-                const textOffset = this.outerWidth(this.displayTime);
+                const textOffset = this.displayTime.getBoundingClientRect().width;
                 xpos -= textOffset;
             }
             this.style(this.showTime, {
@@ -318,22 +334,4 @@ export default class CursorPlugin {
             ].join(':')
         );
     }
-
-    /**
-     * Get outer width of given element.
-     *
-     * @param {DOM} element DOM Element
-     * @returns {number} outer width
-     */
-    outerWidth(element) {
-        if (!element) {
-            return 0;
-        }
-
-        let width = element.offsetWidth;
-        let style = getComputedStyle(element);
-
-        width += parseInt(style.marginLeft + style.marginRight);
-        return width;
-    }
 }

package/src/plugin/markers/index.js

@@ -1,12 +1,13 @@
-
 /**
  * @typedef {Object} MarkerParams
  * @desc The parameters used to describe a marker.
  * @example wavesurfer.addMarker(regionParams);
  * @property {number} time The time to set the marker at
- * @property {?label} string an optional marker label
- * @property {?color} string background color for marker
+ * @property {?label} string An optional marker label
+ * @property {?color} string Background color for marker
  * @property {?position} string "top" or "bottom", defaults to "bottom"
+ * @property {?markerElement} element An HTML element to display instead of the default marker image
+ * @property {?draggable} boolean Set marker as draggable, defaults to false
  */
 
 
@@ -39,6 +40,9 @@ export default class MarkersPlugin {
     /**
      * @typedef {Object} MarkersPluginParams
      * @property {?MarkerParams[]} markers Initial set of markers
+     * @fires MarkersPlugin#marker-click
+     * @fires MarkersPlugin#marker-drag
+     * @fires MarkersPlugin#marker-drop
      */
 
     /**
@@ -76,8 +80,10 @@ export default class MarkersPlugin {
         this.wavesurfer = ws;
         this.util = ws.util;
         this.style = this.util.style;
+        this.markerLineWidth = 1;
         this.markerWidth = 11;
         this.markerHeight = 22;
+        this.dragging = false;
 
 
         this._onResize = () => {
@@ -92,6 +98,16 @@ export default class MarkersPlugin {
             window.addEventListener('resize', this._onResize, true);
             window.addEventListener('orientationchange', this._onResize, true);
             this.wavesurfer.on('zoom', this._onResize);
+
+            if (!this.markers.find(marker => marker.draggable)){
+                return;
+            }
+
+            this.onMouseMove = (e) => this._onMouseMove(e);
+            window.addEventListener('mousemove', this.onMouseMove);
+
+            this.onMouseUp = (e) => this._onMouseUp(e);
+            window.addEventListener("mouseup", this.onMouseUp);
         };
 
         this.markers = [];
@@ -121,6 +137,13 @@ export default class MarkersPlugin {
         window.removeEventListener('resize', this._onResize, true);
         window.removeEventListener('orientationchange', this._onResize, true);
 
+        if (this.onMouseMove) {
+            window.removeEventListener('mousemove', this.onMouseMove);
+        }
+        if (this.onMouseUp) {
+            window.removeEventListener("mouseup", this.onMouseUp);
+        }
+
         this.clear();
     }
 
@@ -135,10 +158,11 @@ export default class MarkersPlugin {
             time: params.time,
             label: params.label,
             color: params.color || DEFAULT_FILL_COLOR,
-            position: params.position || DEFAULT_POSITION
+            position: params.position || DEFAULT_POSITION,
+            draggable: !!params.draggable
         };
 
-        marker.el = this._createMarkerElement(marker);
+        marker.el = this._createMarkerElement(marker, params.markerElement);
 
         this.wrapper.appendChild(marker.el);
         this.markers.push(marker);
@@ -190,9 +214,8 @@ export default class MarkersPlugin {
         return el;
     }
 
-    _createMarkerElement(marker) {
+    _createMarkerElement(marker, markerElement) {
         let label = marker.label;
-        let time = marker.time;
 
         const el = document.createElement('marker');
         el.className = "wavesurfer-marker";
@@ -206,17 +229,22 @@ export default class MarkersPlugin {
         });
 
         const line = document.createElement('div');
+        const width = markerElement ? markerElement.width : this.markerWidth;
+        marker.offset = (width - this.markerLineWidth) / 2;
         this.style(line, {
             "flex-grow": 1,
-            "margin-left": (this.markerWidth / 2 - 0.5) + "px",
+            "margin-left": marker.offset + "px",
             background: "black",
-            width: "1px",
+            width: this.markerLineWidth + "px",
             opacity: 0.1
         });
         el.appendChild(line);
 
         const labelDiv = document.createElement('div');
-        const point = this._createPointerSVG(marker.color, marker.position);
+        const point = markerElement || this._createPointerSVG(marker.color, marker.position);
+        if (marker.draggable){
+            point.draggable = false;
+        }
         labelDiv.appendChild(point);
 
         if ( label ) {
@@ -239,30 +267,99 @@ export default class MarkersPlugin {
 
         labelDiv.addEventListener("click", e => {
             e.stopPropagation();
-            this.wavesurfer.setCurrentTime(time);
+            // Click event is caught when the marker-drop event was dispatched.
+            // Drop event was dispatched at this moment, but this.dragging
+            // is waiting for the next tick to set as false
+            if (this.dragging){
+                return;
+            }
+            this.wavesurfer.setCurrentTime(marker.time);
+            this.wavesurfer.fireEvent("marker-click", marker, e);
         });
 
+        if (marker.draggable) {
+            labelDiv.addEventListener("mousedown", e => {
+                this.selectedMarker = marker;
+            });
+        }
         return el;
     }
 
     _updateMarkerPositions() {
-        const duration = this.wavesurfer.getDuration();
-
         for ( let i = 0 ; i < this.markers.length; i++ ) {
             let marker = this.markers[i];
-            const elementWidth =
-                this.wavesurfer.drawer.width /
-                this.wavesurfer.params.pixelRatio;
-
-            const positionPct = Math.min(marker.time / duration, 1);
-            const leftPx = ((elementWidth * positionPct) - (this.markerWidth / 2));
-            this.style(marker.el, {
-                "left":  leftPx + "px",
-                "max-width": (elementWidth - leftPx) + "px"
-            });
+            this._updateMarkerPosition(marker);
         }
     }
 
+    /**
+     * Update a marker position based on its time property.
+     *
+     * @private
+     * @param {MarkerParams} params The marker to update.
+     * @returns {void}
+     */
+    _updateMarkerPosition(params) {
+        const duration = this.wavesurfer.getDuration();
+        const elementWidth =
+            this.wavesurfer.drawer.width /
+            this.wavesurfer.params.pixelRatio;
+
+        const positionPct = Math.min(params.time / duration, 1);
+        const leftPx = ((elementWidth * positionPct) - params.offset);
+        this.style(params.el, {
+            "left": leftPx + "px",
+            "max-width": (elementWidth - leftPx) + "px"
+        });
+    }
+
+    /**
+     * Fires `marker-drag` event, update the `time` property for the
+     * selected marker based on the mouse position, and calls to update
+     * its position.
+     *
+     * @private
+     * @param {MouseEvent} event The mouse event.
+     * @returns {void}
+     */
+    _onMouseMove(event) {
+        if (!this.selectedMarker){
+            return;
+        }
+        if (!this.dragging){
+            this.dragging = true;
+            this.wavesurfer.fireEvent("marker-drag", this.selectedMarker, event);
+        }
+        this.selectedMarker.time = this.wavesurfer.drawer.handleEvent(event) * this.wavesurfer.getDuration();
+        this._updateMarkerPositions();
+    }
+
+    /**
+     * Fires `marker-drop` event and unselect the dragged marker.
+     *
+     * @private
+     * @param {MouseEvent} event The mouse event.
+     * @returns {void}
+     */
+    _onMouseUp(event) {
+        if (this.selectedMarker) {
+            setTimeout(() => {
+                this.selectedMarker = false;
+                this.dragging = false;
+            }, 0);
+        }
+
+        if (!this.dragging) {
+            return;
+        }
+
+        event.stopPropagation();
+        const duration = this.wavesurfer.getDuration();
+        this.selectedMarker.time = this.wavesurfer.drawer.handleEvent(event) * duration;
+        this._updateMarkerPositions();
+        this.wavesurfer.fireEvent("marker-drop", this.selectedMarker, event);
+    }
+
     /**
      * Remove all markers
      */