wavesurfer.js 4.5.0 → 5.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wavesurfer.js",
-  "version": "4.5.0",
+  "version": "5.1.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.12.16",
-    "@babel/preset-env": "^7.12.16",
-    "@babel/register": "^7.12.13",
+    "@babel/core": "^7.14.6",
+    "@babel/preset-env": "^7.14.5",
+    "@babel/register": "^7.14.5",
+    "@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.17.0",
-    "debounce": "^1.2.0",
+    "date-fns": "^2.22.1",
+    "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.20.0",
-    "htmlhint": "^0.14.2",
+    "eslint": "^7.29.0",
+    "htmlhint": "^0.15.1",
     "in-publish": "^2.0.1",
-    "jasmine-core": "^3.6.0",
-    "karma": "^5.2.3",
+    "jasmine-core": "^3.7.1",
+    "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.0.0",
     "load-script": "^1.0.0",
     "pre-commit": "^1.2.2",
-    "webpack": "^5.21.2",
-    "webpack-cli": "^4.5.0",
-    "webpack-dev-server": "^4.0.0-beta.0",
-    "webpack-merge": "^5.7.3"
+    "webpack": "^5.39.1",
+    "webpack-cli": "^4.7.2",
+    "webpack-dev-server": "^4.0.0-beta.3",
+    "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

@@ -0,0 +1,282 @@
+
+/**
+ * @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 {?position} string "top" or "bottom", defaults to "bottom"
+ * @property {?markerElement} element An HTML element to display instead of the default marker image
+ */
+
+
+/**
+ * Markers are points in time in the audio that can be jumped to.
+ *
+ * @implements {PluginClass}
+ *
+ * @example
+ * import MarkersPlugin from 'wavesurfer.markers.js';
+ *
+ * // if you are using <script> tags
+ * var MarkerPlugin = window.WaveSurfer.markers;
+ *
+ * // ... initialising wavesurfer with the plugin
+ * var wavesurfer = WaveSurfer.create({
+ *   // wavesurfer options ...
+ *   plugins: [
+ *     MarkersPlugin.create({
+ *       // plugin options ...
+ *     })
+ *   ]
+ * });
+ */
+
+const DEFAULT_FILL_COLOR = "#D8D8D8";
+const DEFAULT_POSITION = "bottom";
+
+export default class MarkersPlugin {
+    /**
+     * @typedef {Object} MarkersPluginParams
+     * @property {?MarkerParams[]} markers Initial set of markers
+     * @fires MarkersPlugin#marker-click
+     */
+
+    /**
+     * Markers plugin definition factory
+     *
+     * This function must be used to create a plugin definition which can be
+     * used by wavesurfer to correctly instantiate the plugin.
+     *
+     * @param {MarkersPluginParams} params parameters use to initialise the plugin
+     * @since 4.6.0
+     * @return {PluginDefinition} an object representing the plugin
+     */
+    static create(params) {
+        return {
+            name: 'markers',
+            deferInit: params && params.deferInit ? params.deferInit : false,
+            params: params,
+            staticProps: {
+                addMarker(options) {
+                    if (!this.initialisedPluginList.markers) {
+                        this.initPlugin('markers');
+                    }
+                    return this.markers.add(options);
+                },
+                clearMarkers() {
+                    this.markers && this.markers.clear();
+                }
+            },
+            instance: MarkersPlugin
+        };
+    }
+
+    constructor(params, ws) {
+        this.params = params;
+        this.wavesurfer = ws;
+        this.util = ws.util;
+        this.style = this.util.style;
+        this.markerWidth = 11;
+        this.markerHeight = 22;
+
+
+        this._onResize = () => {
+            this._updateMarkerPositions();
+        };
+
+        this._onBackendCreated = () => {
+            this.wrapper = this.wavesurfer.drawer.wrapper;
+            if (this.params.markers) {
+                this.params.markers.forEach(marker => this.add(marker));
+            }
+            window.addEventListener('resize', this._onResize, true);
+            window.addEventListener('orientationchange', this._onResize, true);
+            this.wavesurfer.on('zoom', this._onResize);
+        };
+
+        this.markers = [];
+        this._onReady = () => {
+            this.wrapper = this.wavesurfer.drawer.wrapper;
+            this._updateMarkerPositions();
+        };
+    }
+
+    init() {
+        // Check if ws is ready
+        if (this.wavesurfer.isReady) {
+            this._onBackendCreated();
+            this._onReady();
+        } else {
+            this.wavesurfer.once('ready', this._onReady);
+            this.wavesurfer.once('backend-created', this._onBackendCreated);
+        }
+    }
+
+    destroy() {
+        this.wavesurfer.un('ready', this._onReady);
+        this.wavesurfer.un('backend-created', this._onBackendCreated);
+
+        this.wavesurfer.un('zoom', this._onResize);
+
+        window.removeEventListener('resize', this._onResize, true);
+        window.removeEventListener('orientationchange', this._onResize, true);
+
+        this.clear();
+    }
+
+    /**
+     * Add a marker
+     *
+     * @param {MarkerParams} params Marker definition
+     * @return {object} The created marker
+     */
+    add(params) {
+        let marker = {
+            time: params.time,
+            label: params.label,
+            color: params.color || DEFAULT_FILL_COLOR,
+            position: params.position || DEFAULT_POSITION
+        };
+
+        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);
+        this._updateMarkerPositions();
+
+        return marker;
+    }
+
+    /**
+     * Remove a marker
+     *
+     * @param {number} index Index of the marker to remove
+     */
+    remove(index) {
+        let marker = this.markers[index];
+        if (!marker) {
+            return;
+        }
+
+        this.wrapper.removeChild(marker.el);
+        this.markers.splice(index, 1);
+    }
+
+    _createPointerSVG(color, position) {
+        const svgNS = "http://www.w3.org/2000/svg";
+
+        const el = document.createElementNS(svgNS, "svg");
+        const polygon = document.createElementNS(svgNS, "polygon");
+
+        el.setAttribute("viewBox", "0 0 40 80");
+
+        polygon.setAttribute("id", "polygon");
+        polygon.setAttribute("stroke", "#979797");
+        polygon.setAttribute("fill", color);
+        polygon.setAttribute("points", "20 0 40 30 40 80 0 80 0 30");
+        if ( position == "top" ) {
+            polygon.setAttribute("transform", "rotate(180, 20 40)");
+        }
+
+        el.appendChild(polygon);
+
+        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, markerElement) {
+        let label = marker.label;
+        let time = marker.time;
+
+        const el = document.createElement('marker');
+        el.className = "wavesurfer-marker";
+
+        this.style(el, {
+            position: "absolute",
+            height: "100%",
+            display: "flex",
+            overflow: "hidden",
+            "flex-direction": (marker.position == "top" ? "column-reverse" : "column")
+        });
+
+        const line = document.createElement('div');
+        this.style(line, {
+            "flex-grow": 1,
+            "margin-left": (this.markerWidth / 2 - 0.5) + "px",
+            background: "black",
+            width: "1px",
+            opacity: 0.1
+        });
+        el.appendChild(line);
+
+        const labelDiv = document.createElement('div');
+        const point = markerElement || this._createPointerSVG(marker.color, marker.position);
+        labelDiv.appendChild(point);
+
+        if ( label ) {
+            const labelEl = document.createElement('span');
+            labelEl.innerText = label;
+            this.style(labelEl, {
+                "font-family": "monospace",
+                "font-size": "90%"
+            });
+            labelDiv.appendChild(labelEl);
+        }
+
+        this.style(labelDiv, {
+            display: "flex",
+            "align-items": "center",
+            cursor: "pointer"
+        });
+
+        el.appendChild(labelDiv);
+
+        labelDiv.addEventListener("click", e => {
+            e.stopPropagation();
+            this.wavesurfer.setCurrentTime(time);
+            this.wavesurfer.fireEvent("marker-click", marker, e);
+        });
+
+        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"
+            });
+        }
+    }
+
+    /**
+     * Remove all markers
+     */
+    clear() {
+        while ( this.markers.length > 0 ) {
+            this.remove(0);
+        }
+    }
+}