wavesurfer.js 4.6.0 → 5.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wavesurfer.js",
-  "version": "4.6.0",
+  "version": "5.2.0",
   "description": "Interactive navigable audio visualization using Web Audio and Canvas",
   "main": "dist/wavesurfer.js",
   "directories": {
@@ -29,6 +29,7 @@
     "lint-js-html": "lint-staged",
     "doc": "esdoc",
     "test": "karma start karma.conf.js",
+    "test:chrome": "karma start karma.conf.js --browsers=Chrome --single-run=false",
     "prepublishOnly": "not-in-install && npm run build || in-install",
     "prepare": "npm run build"
   },
@@ -54,16 +55,18 @@
     "visualization"
   ],
   "devDependencies": {
-    "@babel/core": "^7.13.8",
-    "@babel/preset-env": "^7.13.9",
-    "@babel/register": "^7.13.8",
+    "@babel/core": "^7.15.0",
+    "@babel/preset-env": "^7.15.0",
+    "@babel/register": "^7.15.3",
+    "@chiragrupani/karma-chromium-edge-launcher": "^2.1.1",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.2",
     "babel-plugin-add-module-exports": "^1.0.4",
     "babel-plugin-istanbul": "^6.0.0",
+    "babel-plugin-proxy": "^1.1.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
-    "date-fns": "^2.18.0",
-    "debounce": "^1.2.0",
+    "date-fns": "^2.23.0",
+    "debounce": "^1.2.1",
     "esdoc": "^1.1.0",
     "esdoc-accessor-plugin": "^1.0.0",
     "esdoc-brand-plugin": "^1.0.1",
@@ -71,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.21.0",
-    "htmlhint": "^0.14.2",
+    "eslint": "^7.32.0",
+    "htmlhint": "^0.15.1",
     "in-publish": "^2.0.1",
-    "jasmine-core": "^3.6.0",
-    "karma": "^5.2.3",
+    "jasmine-core": "^3.8.0",
+    "karma": "^6.3.4",
     "karma-chrome-launcher": "3.1.0",
     "karma-coverage": "^2.0.3",
-    "karma-firefox-launcher": "^2.1.0",
+    "karma-firefox-launcher": "^2.1.1",
     "karma-jasmine": "4.0.1",
     "karma-jasmine-matchers": "4.0.2",
     "karma-verbose-reporter": "0.0.6",
     "karma-webpack": "^5.0.0",
-    "lint-staged": "^10.5.4",
+    "lint-staged": "^11.1.2",
     "load-script": "^1.0.0",
     "pre-commit": "^1.2.2",
-    "webpack": "^5.24.3",
-    "webpack-cli": "^4.5.0",
-    "webpack-dev-server": "^4.0.0-beta.0",
-    "webpack-merge": "^5.7.3"
+    "webpack": "^5.50.0",
+    "webpack-cli": "^4.8.0",
+    "webpack-dev-server": "^4.0.0-rc.0",
+    "webpack-merge": "^5.8.0"
   },
   "homepage": "https://wavesurfer-js.org",
   "pre-commit": "lint-js-html",

package/src/drawer.canvasentry.js

@@ -157,6 +157,22 @@ export default class CanvasEntry {
         }
     }
 
+    /**
+     * Set the canvas transforms for wave and progress
+     *
+     * @param {boolean} vertical Whether to render vertically
+     */
+    applyCanvasTransforms(vertical) {
+        if (vertical) {
+            // Reflect the waveform across the line y = -x
+            this.waveCtx.setTransform(0, 1, 1, 0, 0, 0);
+
+            if (this.hasProgressCanvas) {
+                this.progressCtx.setTransform(0, 1, 1, 0, 0, 0);
+            }
+        }
+    }
+
     /**
      * Draw a rectangle for wave and progress
      *

package/src/drawer.js

@@ -13,7 +13,7 @@ export default class Drawer extends util.Observer {
     constructor(container, params) {
         super();
 
-        this.container = container;
+        this.container = util.withOrientation(container, params.vertical);
         /**
          * @type {WavesurferParams}
          */
@@ -53,8 +53,9 @@ export default class Drawer extends util.Observer {
      * interaction
      */
     createWrapper() {
-        this.wrapper = this.container.appendChild(
-            document.createElement('wave')
+        this.wrapper = util.withOrientation(
+            this.container.appendChild(document.createElement('wave')),
+            this.params.vertical
         );
 
         this.style(this.wrapper, {
@@ -86,39 +87,46 @@ export default class Drawer extends util.Observer {
     handleEvent(e, noPrevent) {
         !noPrevent && e.preventDefault();
 
-        const clientX = e.targetTouches
-            ? e.targetTouches[0].clientX
-            : e.clientX;
+        const clientX = util.withOrientation(
+            e.targetTouches ? e.targetTouches[0] : e,
+            this.params.vertical
+        ).clientX;
         const bbox = this.wrapper.getBoundingClientRect();
 
         const nominalWidth = this.width;
         const parentWidth = this.getWidth();
+        const progressPixels = this.getProgressPixels(bbox, clientX);
 
         let progress;
         if (!this.params.fillParent && nominalWidth < parentWidth) {
-            progress =
-                (this.params.rtl ? bbox.right - clientX : clientX - bbox.left) *
-                    (this.params.pixelRatio / nominalWidth) || 0;
+            progress = progressPixels *
+                (this.params.pixelRatio / nominalWidth) || 0;
         } else {
-            progress =
-                ((this.params.rtl
-                    ? bbox.right - clientX
-                    : clientX - bbox.left) +
-                    this.wrapper.scrollLeft) /
-                    this.wrapper.scrollWidth || 0;
+            progress = (progressPixels + this.wrapper.scrollLeft) /
+                this.wrapper.scrollWidth || 0;
         }
 
         return util.clamp(progress, 0, 1);
     }
 
+    getProgressPixels(wrapperBbox, clientX) {
+        if (this.params.rtl) {
+            return wrapperBbox.right - clientX;
+        } else {
+            return clientX - wrapperBbox.left;
+        }
+    }
+
     setupWrapperEvents() {
         this.wrapper.addEventListener('click', e => {
-            const scrollbarHeight =
-                this.wrapper.offsetHeight - this.wrapper.clientHeight;
+            const orientedEvent = util.withOrientation(e, this.params.vertical);
+            const scrollbarHeight = this.wrapper.offsetHeight -
+                  this.wrapper.clientHeight;
+
             if (scrollbarHeight !== 0) {
                 // scrollbar is visible.  Check if click was on it
                 const bbox = this.wrapper.getBoundingClientRect();
-                if (e.clientY >= bbox.bottom - scrollbarHeight) {
+                if (orientedEvent.clientY >= bbox.bottom - scrollbarHeight) {
                     // ignore mousedown as it was on the scrollbar
                     return;
                 }
@@ -274,8 +282,9 @@ export default class Drawer extends util.Observer {
                 width: ''
             });
         } else {
+            const newWidth = ~~(this.width / this.params.pixelRatio) + 'px';
             this.style(this.wrapper, {
-                width: ~~(this.width / this.params.pixelRatio) + 'px'
+                width: newWidth
             });
         }
 
@@ -333,8 +342,8 @@ export default class Drawer extends util.Observer {
     destroy() {
         this.unAll();
         if (this.wrapper) {
-            if (this.wrapper.parentNode == this.container) {
-                this.container.removeChild(this.wrapper);
+            if (this.wrapper.parentNode == this.container.domElement) {
+                this.container.removeChild(this.wrapper.domElement);
             }
             this.wrapper = null;
         }

package/src/drawer.multicanvas.js

@@ -82,6 +82,13 @@ export default class MultiCanvas extends Drawer {
          * @type {number}
          */
         this.barRadius = params.barRadius || 0;
+
+        /**
+         * Whether to render the waveform vertically. Defaults to false.
+         *
+         * @type {boolean}
+         */
+        this.vertical = params.vertical;
     }
 
     /**
@@ -97,21 +104,23 @@ export default class MultiCanvas extends Drawer {
      *
      */
     createElements() {
-        this.progressWave = this.wrapper.appendChild(
-            this.style(document.createElement('wave'), {
-                position: 'absolute',
-                zIndex: 3,
-                left: 0,
-                top: 0,
-                bottom: 0,
-                overflow: 'hidden',
-                width: '0',
-                display: 'none',
-                boxSizing: 'border-box',
-                borderRightStyle: 'solid',
-                pointerEvents: 'none'
-            })
+        this.progressWave = util.withOrientation(
+            this.wrapper.appendChild(document.createElement('wave')),
+            this.params.vertical
         );
+        this.style(this.progressWave, {
+            position: 'absolute',
+            zIndex: 3,
+            left: 0,
+            top: 0,
+            bottom: 0,
+            overflow: 'hidden',
+            width: '0',
+            display: 'none',
+            boxSizing: 'border-box',
+            borderRightStyle: 'solid',
+            pointerEvents: 'none'
+        });
 
         this.addCanvas();
         this.updateCursor();
@@ -170,33 +179,35 @@ export default class MultiCanvas extends Drawer {
         const leftOffset = this.maxCanvasElementWidth * this.canvases.length;
 
         // wave
-        entry.initWave(
-            this.wrapper.appendChild(
-                this.style(document.createElement('canvas'), {
-                    position: 'absolute',
-                    zIndex: 2,
-                    left: leftOffset + 'px',
-                    top: 0,
-                    bottom: 0,
-                    height: '100%',
-                    pointerEvents: 'none'
-                })
-            )
+        let wave = util.withOrientation(
+            this.wrapper.appendChild(document.createElement('canvas')),
+            this.params.vertical
         );
+        this.style(wave, {
+            position: 'absolute',
+            zIndex: 2,
+            left: leftOffset + 'px',
+            top: 0,
+            bottom: 0,
+            height: '100%',
+            pointerEvents: 'none'
+        });
+        entry.initWave(wave);
 
         // progress
         if (this.hasProgressCanvas) {
-            entry.initProgress(
-                this.progressWave.appendChild(
-                    this.style(document.createElement('canvas'), {
-                        position: 'absolute',
-                        left: leftOffset + 'px',
-                        top: 0,
-                        bottom: 0,
-                        height: '100%'
-                    })
-                )
+            let progress = util.withOrientation(
+                this.progressWave.appendChild(document.createElement('canvas')),
+                this.params.vertical
             );
+            this.style(progress, {
+                position: 'absolute',
+                left: leftOffset + 'px',
+                top: 0,
+                bottom: 0,
+                height: '100%'
+            });
+            entry.initProgress(progress);
         }
 
         this.canvases.push(entry);
@@ -210,11 +221,11 @@ export default class MultiCanvas extends Drawer {
         let lastEntry = this.canvases[this.canvases.length - 1];
 
         // wave
-        lastEntry.wave.parentElement.removeChild(lastEntry.wave);
+        lastEntry.wave.parentElement.removeChild(lastEntry.wave.domElement);
 
         // progress
         if (this.hasProgressCanvas) {
-            lastEntry.progress.parentElement.removeChild(lastEntry.progress);
+            lastEntry.progress.parentElement.removeChild(lastEntry.progress.domElement);
         }
 
         // cleanup
@@ -303,8 +314,9 @@ export default class MultiCanvas extends Drawer {
 
                     /* 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)
+                    if (h == 0 && this.params.barMinHeight) {
                         h = this.params.barMinHeight;
+                    }
 
                     this.fillRect(
                         i + this.halfPixel,
@@ -386,6 +398,7 @@ export default class MultiCanvas extends Drawer {
         const { waveColor, progressColor } = this.params.splitChannelsOptions.channelColors[channelIndex] || {};
         this.canvases.forEach((entry, i) => {
             this.setFillStyles(entry, waveColor, progressColor);
+            this.applyCanvasTransforms(entry, this.params.vertical);
             entry.drawLines(peaks, absmax, halfH, offsetY, start, end);
         });
     }
@@ -424,6 +437,7 @@ export default class MultiCanvas extends Drawer {
             if (intersection.x1 < intersection.x2) {
                 const { waveColor, progressColor } = this.params.splitChannelsOptions.channelColors[channelIndex] || {};
                 this.setFillStyles(entry, waveColor, progressColor);
+                this.applyCanvasTransforms(entry, this.params.vertical);
 
                 entry.fillRects(
                     intersection.x1 - leftOffset,
@@ -542,6 +556,16 @@ export default class MultiCanvas extends Drawer {
         entry.setFillStyles(waveColor, progressColor);
     }
 
+    /**
+     * Set the canvas transforms for a certain entry (wave and progress)
+     *
+     * @param {CanvasEntry} entry Target entry
+     * @param {boolean} vertical Whether to render the waveform vertically
+     */
+    applyCanvasTransforms(entry, vertical = false) {
+        entry.applyCanvasTransforms(vertical);
+    }
+
     /**
      * Return image data of the multi-canvas
      *

package/src/plugin/cursor/index.js

@@ -326,7 +326,9 @@ export default class CursorPlugin {
      * @returns {number} outer width
      */
     outerWidth(element) {
-        if (!element) return 0;
+        if (!element) {
+            return 0;
+        }
 
         let width = element.offsetWidth;
         let style = getComputedStyle(element);

package/src/plugin/markers/index.js

@@ -4,9 +4,10 @@
  * @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
  */
 
 
@@ -39,6 +40,7 @@ export default class MarkersPlugin {
     /**
      * @typedef {Object} MarkersPluginParams
      * @property {?MarkerParams[]} markers Initial set of markers
+     * @fires MarkersPlugin#marker-click
      */
 
     /**
@@ -138,7 +140,12 @@ export default class MarkersPlugin {
             position: params.position || DEFAULT_POSITION
         };
 
-        marker.el = this._createMarkerElement(marker);
+        if (params.markerElement) {
+            this.markerWidth = params.markerElement.width;
+            this.markerHeight = params.markerElement.height;
+        }
+
+        marker.el = this._createMarkerElement(marker, params.markerElement);
 
         this.wrapper.appendChild(marker.el);
         this.markers.push(marker);
@@ -154,7 +161,9 @@ export default class MarkersPlugin {
      */
     remove(index) {
         let marker = this.markers[index];
-        if ( !marker ) return;
+        if (!marker) {
+            return;
+        }
 
         this.wrapper.removeChild(marker.el);
         this.markers.splice(index, 1);
@@ -181,13 +190,14 @@ export default class MarkersPlugin {
         this.style(el, {
             width: this.markerWidth + "px",
             height: this.markerHeight + "px",
+            "min-width": this.markerWidth + "px",
             "margin-right": "5px",
             "z-index": 4
         });
         return el;
     }
 
-    _createMarkerElement(marker) {
+    _createMarkerElement(marker, markerElement) {
         let label = marker.label;
         let time = marker.time;
 
@@ -198,6 +208,7 @@ export default class MarkersPlugin {
             position: "absolute",
             height: "100%",
             display: "flex",
+            overflow: "hidden",
             "flex-direction": (marker.position == "top" ? "column-reverse" : "column")
         });
 
@@ -212,7 +223,7 @@ export default class MarkersPlugin {
         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);
         labelDiv.appendChild(point);
 
         if ( label ) {
@@ -236,6 +247,7 @@ export default class MarkersPlugin {
         labelDiv.addEventListener("click", e => {
             e.stopPropagation();
             this.wavesurfer.setCurrentTime(time);
+            this.wavesurfer.fireEvent("marker-click", marker, e);
         });
 
         return el;
@@ -250,9 +262,11 @@ export default class MarkersPlugin {
                 this.wavesurfer.drawer.width /
                 this.wavesurfer.params.pixelRatio;
 
-            const positionPct = marker.time / duration;
+            const positionPct = Math.min(marker.time / duration, 1);
+            const leftPx = ((elementWidth * positionPct) - (this.markerWidth / 2));
             this.style(marker.el, {
-                left: ((elementWidth * positionPct) - (this.markerWidth / 2)) + "px"
+                "left":  leftPx + "px",
+                "max-width": (elementWidth - leftPx) + "px"
             });
         }
     }