wavesurfer.js 6.1.0 → 6.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wavesurfer.js",
-  "version": "6.1.0",
+  "version": "6.3.0",
   "description": "Interactive navigable audio visualization using Web Audio and Canvas",
   "main": "dist/wavesurfer.js",
   "directories": {
@@ -55,17 +55,16 @@
     "visualization"
   ],
   "devDependencies": {
-    "@babel/core": "^7.17.8",
-    "@babel/eslint-parser": "^7.17.0",
-    "@babel/plugin-proposal-class-properties": "^7.16.7",
-    "@babel/preset-env": "^7.16.11",
-    "@babel/register": "^7.17.7",
-    "@chiragrupani/karma-chromium-edge-launcher": "^2.2.1",
-    "babel-loader": "^8.2.4",
+    "@babel/core": "^7.19.3",
+    "@babel/eslint-parser": "^7.19.1",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/preset-env": "^7.19.3",
+    "@babel/register": "^7.18.9",
+    "@chiragrupani/karma-chromium-edge-launcher": "^2.2.2",
+    "babel-loader": "^8.2.5",
     "babel-plugin-add-module-exports": "^1.0.4",
     "babel-plugin-istanbul": "^6.1.1",
-    "babel-plugin-proxy": "^1.1.0",
-    "date-fns": "^2.28.0",
+    "date-fns": "^2.29.3",
     "debounce": "^1.2.1",
     "esdoc": "^1.1.0",
     "esdoc-accessor-plugin": "^1.0.0",
@@ -74,24 +73,24 @@
     "esdoc-ecmascript-proposal-plugin": "^1.0.0",
     "esdoc-integrate-test-plugin": "^1.0.0",
     "esdoc-standard-plugin": "^1.0.0",
-    "eslint": "^8.11.0",
-    "htmlhint": "^1.1.2",
+    "eslint": "^8.24.0",
+    "htmlhint": "^1.1.4",
     "in-publish": "^2.0.1",
-    "jasmine-core": "^4.0.1",
-    "karma": "^6.3.17",
+    "jasmine-core": "^4.4.0",
+    "karma": "^6.4.1",
     "karma-chrome-launcher": "3.1.1",
     "karma-coverage": "^2.2.0",
     "karma-firefox-launcher": "^2.1.2",
-    "karma-jasmine": "4.0.1",
+    "karma-jasmine": "5.1.0",
     "karma-jasmine-matchers": "5.0.0",
     "karma-verbose-reporter": "0.0.8",
     "karma-webpack": "^5.0.0",
-    "lint-staged": "^12.3.7",
+    "lint-staged": "^13.0.3",
     "load-script": "^2.0.0",
     "pre-commit": "^1.2.2",
-    "webpack": "^5.70.0",
-    "webpack-cli": "^4.9.2",
-    "webpack-dev-server": "^4.7.4",
+    "webpack": "^5.74.0",
+    "webpack-cli": "^4.10.0",
+    "webpack-dev-server": "^4.11.1",
     "webpack-merge": "^5.8.0"
   },
   "homepage": "https://wavesurfer-js.org",

package/src/drawer.multicanvas.js

@@ -323,10 +323,10 @@ export default class MultiCanvas extends Drawer {
                     // 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)
-                    if (h == 0 && this.params.barMinHeight) {
-                        h = this.params.barMinHeight;
+                    // raise the bar height to the specified minimum height
+                    // Math.max is used to replace any value smaller than barMinHeight (not just 0) with barMinHeight
+                    if (this.params.barMinHeight) {
+                        h = Math.max(h, this.params.barMinHeight);
                     }
 
                     this.fillRect(

package/src/plugin/cursor/index.js

@@ -90,7 +90,8 @@ export default class CursorPlugin {
         const bbox = this.wrapper.getBoundingClientRect();
         let y = 0;
         let x = this.wrapper.scrollLeft + event.clientX - bbox.left;
-        let flip = bbox.right < event.clientX + this.displayTime.getBoundingClientRect().width;
+        const displayTimeWidth = this.displayTime ? this.displayTime.getBoundingClientRect().width : 0;
+        let flip = bbox.right < event.clientX + displayTimeWidth;
 
         if (this.params.showTime && this.params.followCursorY) {
             // follow y-position of the mouse

package/src/plugin/markers/index.js

@@ -8,6 +8,8 @@
  * @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
+ * @property {?boolean} preventContextMenu Determines whether the context menu
+ * is prevented from being opened, defaults to false
  */
 
 
@@ -159,7 +161,8 @@ export default class MarkersPlugin {
             label: params.label,
             color: params.color || DEFAULT_FILL_COLOR,
             position: params.position || DEFAULT_POSITION,
-            draggable: !!params.draggable
+            draggable: !!params.draggable,
+            preventContextMenu: !!params.preventContextMenu
         };
 
         marker.el = this._createMarkerElement(marker, params.markerElement);
@@ -181,6 +184,18 @@ export default class MarkersPlugin {
         if (!marker) {
             return;
         }
+        let label = marker.el.getElementsByClassName("marker-label")[0];
+        if (label) {
+            if (label._onContextMenu) {
+                label.removeEventListener("contextmenu", label._onContextMenu);
+            }
+            if (label._onClick) {
+                label.removeEventListener("click", label._onClick);
+            }
+            if (label._onMouseDown) {
+                label.removeEventListener("mousedown", label._onMouseDown);
+            }
+        }
 
         this.wrapper.removeChild(marker.el);
         this.markers.splice(index, 1);
@@ -262,10 +277,11 @@ export default class MarkersPlugin {
             "align-items": "center",
             cursor: "pointer"
         });
+        labelDiv.classList.add("marker-label");
 
         el.appendChild(labelDiv);
 
-        labelDiv.addEventListener("click", e => {
+        labelDiv._onClick = (e) => {
             e.stopPropagation();
             // Click event is caught when the marker-drop event was dispatched.
             // Drop event was dispatched at this moment, but this.dragging
@@ -275,12 +291,22 @@ export default class MarkersPlugin {
             }
             this.wavesurfer.setCurrentTime(marker.time);
             this.wavesurfer.fireEvent("marker-click", marker, e);
-        });
+        };
+        labelDiv.addEventListener("click", labelDiv._onClick);
+
+        labelDiv._onContextMenu = (e) => {
+            if (marker.preventContextMenu) {
+                e.preventDefault();
+            }
+            this.wavesurfer.fireEvent("marker-contextmenu", marker, e);
+        };
+        labelDiv.addEventListener("contextmenu", labelDiv._onContextMenu);
 
         if (marker.draggable) {
-            labelDiv.addEventListener("mousedown", e => {
+            labelDiv._onMouseDown = () => {
                 this.selectedMarker = marker;
-            });
+            };
+            labelDiv.addEventListener("mousedown", labelDiv._onMouseDown);
         }
         return el;
     }

package/src/plugin/regions/index.js

@@ -299,7 +299,7 @@ export default class RegionsPlugin {
             );
 
             // set the region channel index based on the clicked area
-            if (this.wavesurfer.params.splitChannels) {
+            if (this.wavesurfer.params.splitChannels && this.wavesurfer.params.splitChannelsOptions.splitDragSelection) {
                 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;

package/src/plugin/spectrogram/index.js

@@ -10,6 +10,8 @@ import FFT from './fft';
  * a power of 2.
  * @property {boolean} splitChannels=false Render with separate spectrograms for
  * the channels of the audio
+ * @property {number} height=fftSamples/2 Height of the spectrogram view in CSS
+ * pixels
  * @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.
@@ -128,7 +130,7 @@ export default class SpectrogramPlugin {
             this.pixelRatio = this.params.pixelRatio || ws.params.pixelRatio;
             this.fftSamples =
                 this.params.fftSamples || ws.params.fftSamples || 512;
-            this.height = this.fftSamples / 2;
+            this.height = this.params.height || this.fftSamples / 2;
             this.noverlap = params.noverlap;
             this.windowFunc = params.windowFunc;
             this.alpha = params.alpha;
@@ -185,11 +187,10 @@ export default class SpectrogramPlugin {
             const labelsEl = (this.labelsEl = document.createElement('canvas'));
             labelsEl.classList.add('spec-labels');
             this.drawer.style(labelsEl, {
-                left: 0,
                 position: 'absolute',
                 zIndex: 9,
-                height: `${this.height * this.channels / this.pixelRatio}px`,
-                width: `${55 / this.pixelRatio}px`
+                height: `${this.height * this.channels}px`,
+                width: `55px`
             });
             this.wrapper.appendChild(labelsEl);
             this.loadLabels(
@@ -209,7 +210,7 @@ export default class SpectrogramPlugin {
             position: 'relative',
             userSelect: 'none',
             webkitUserSelect: 'none',
-            height: `${this.height * this.channels / this.pixelRatio}px`
+            height: `${this.height * this.channels}px`
         });
 
         if (wsParams.fillParent || wsParams.scrollParent) {
@@ -256,8 +257,9 @@ 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.channels;
+        this.canvas.height = this.fftSamples / 2 * this.channels;
         this.canvas.style.width = width;
+        this.canvas.style.height = this.height + 'px';
     }
 
     drawSpectrogram(frequenciesData, my) {
@@ -267,7 +269,7 @@ export default class SpectrogramPlugin {
         }
 
         const spectrCc = my.spectrCc;
-        const height = my.height;
+        const height = my.fftSamples / 2;
         const width = my.width;
         const freqFrom = my.buffer.sampleRate / 2;
         const freqMin = my.frequencyMin;
@@ -404,8 +406,10 @@ export default class SpectrogramPlugin {
 
         // prepare canvas element for labels
         const ctx = this.labelsEl.getContext('2d');
-        this.labelsEl.height = this.height * this.channels;
-        this.labelsEl.width = bgWidth;
+        const dispScale = window.devicePixelRatio;
+        this.labelsEl.height = this.height * this.channels * dispScale;
+        this.labelsEl.width = bgWidth * dispScale;
+        ctx.scale(dispScale, dispScale);
 
         if (!ctx) {
             return;

package/src/wavesurfer.js

@@ -174,6 +174,8 @@ import MediaElementWebAudio from './mediaelement-webaudio';
  * @property {boolean} relativeNormalization=false determines whether
  * normalization is done per channel or maintains proportionality between
  * channels. Only applied when normalize and splitChannels are both true.
+ * @property {boolean} splitDragSelection=false determines if drag selection in regions
+ * plugin works separately on each channel or only one selection for all channels
  * @since 4.3.0
  */
 
@@ -298,7 +300,8 @@ export default class WaveSurfer extends util.Observer {
             overlay: false,
             channelColors: {},
             filterChannels: [],
-            relativeNormalization: false
+            relativeNormalization: false,
+            splitDragSelection: false
         },
         vertical: false,
         waveColor: '#999',
@@ -501,6 +504,7 @@ export default class WaveSurfer extends util.Observer {
         this._onResize = util.debounce(
             () => {
                 if (
+                    this.drawer.wrapper &&
                     prevWidth != this.drawer.wrapper.clientWidth &&
                     !this.params.scrollParent
                 ) {
@@ -1683,19 +1687,19 @@ export default class WaveSurfer extends util.Observer {
     /**
      * Save waveform image as data URI.
      *
-     * The default format is `'image/png'`. Other supported types are
-     * `'image/jpeg'` and `'image/webp'`.
+     * The default format is `image/png`. Other supported types are
+     * `image/jpeg` and `image/webp`.
      *
      * @param {string} format='image/png' A string indicating the image format.
-     * The default format type is `'image/png'`.
+     * The default format type is `image/png`.
      * @param {number} quality=1 A number between 0 and 1 indicating the image
      * quality to use for image formats that use lossy compression such as
-     * `'image/jpeg'`` and `'image/webp'`.
-     * @param {string} type Image data type to return. Either 'dataURL' (default)
-     * or 'blob'.
-     * @return {string|string[]|Promise} When using `'dataURL'` type this returns
+     * `image/jpeg` and `image/webp`.
+     * @param {string} type Image data type to return. Either `dataURL` (default)
+     * or `blob`.
+     * @return {string|string[]|Promise} When using `dataURL` type this returns
      * a single data URL or an array of data URLs, one for each canvas. When using
-     * `'blob'` type this returns a `Promise` resolving with an array of `Blob`
+     * `blob` type this returns a `Promise` resolving with an array of `Blob`
      * instances, one for each canvas.
      */
     exportImage(format, quality, type) {