wavesurfer.js 6.3.0 → 6.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wavesurfer.js",
-  "version": "6.3.0",
+  "version": "6.5.0",
   "description": "Interactive navigable audio visualization using Web Audio and Canvas",
   "main": "dist/wavesurfer.js",
   "directories": {
@@ -35,7 +35,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git://github.com/katspaugh/wavesurfer.js.git"
+    "url": "git@github.com:wavesurfer-js/wavesurfer.js.git"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"
@@ -43,7 +43,7 @@
   "author": "",
   "license": "BSD-3-Clause",
   "bugs": {
-    "url": "https://github.com/katspaugh/wavesurfer.js/issues"
+    "url": "https://github.com/wavesurfer-js/wavesurfer.js/issues"
   },
   "keywords": [
     "waveform",
@@ -55,13 +55,13 @@
     "visualization"
   ],
   "devDependencies": {
-    "@babel/core": "^7.19.3",
+    "@babel/core": "^7.20.12",
     "@babel/eslint-parser": "^7.19.1",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/preset-env": "^7.19.3",
+    "@babel/preset-env": "^7.20.2",
     "@babel/register": "^7.18.9",
     "@chiragrupani/karma-chromium-edge-launcher": "^2.2.2",
-    "babel-loader": "^8.2.5",
+    "babel-loader": "^9.1.2",
     "babel-plugin-add-module-exports": "^1.0.4",
     "babel-plugin-istanbul": "^6.1.1",
     "date-fns": "^2.29.3",
@@ -73,10 +73,10 @@
     "esdoc-ecmascript-proposal-plugin": "^1.0.0",
     "esdoc-integrate-test-plugin": "^1.0.0",
     "esdoc-standard-plugin": "^1.0.0",
-    "eslint": "^8.24.0",
+    "eslint": "^8.26.0",
     "htmlhint": "^1.1.4",
     "in-publish": "^2.0.1",
-    "jasmine-core": "^4.4.0",
+    "jasmine-core": "^4.5.0",
     "karma": "^6.4.1",
     "karma-chrome-launcher": "3.1.1",
     "karma-coverage": "^2.2.0",
@@ -85,11 +85,11 @@
     "karma-jasmine-matchers": "5.0.0",
     "karma-verbose-reporter": "0.0.8",
     "karma-webpack": "^5.0.0",
-    "lint-staged": "^13.0.3",
+    "lint-staged": "^13.1.0",
     "load-script": "^2.0.0",
     "pre-commit": "^1.2.2",
-    "webpack": "^5.74.0",
-    "webpack-cli": "^4.10.0",
+    "webpack": "^5.75.0",
+    "webpack-cli": "^5.0.1",
     "webpack-dev-server": "^4.11.1",
     "webpack-merge": "^5.8.0"
   },

package/src/mediaelement.js

@@ -65,6 +65,9 @@ export default class MediaElement extends WebAudio {
         this.mediaListeners.error = () => {
             this.fireEvent('error', 'Error loading media element');
         };
+        this.mediaListeners.waiting = () => {
+            this.fireEvent('waiting');
+        };
         this.mediaListeners.canplay = () => {
             this.fireEvent('canplay');
         };

package/src/plugin/cursor/index.js

@@ -17,6 +17,7 @@
  * the cursor follow the x and the y-position of the mouse. Use `false` to make the
  * it only follow the x-position of the mouse.
  * @property {function} formatTimeCallback Formats the timestamp on the cursor.
+ * @property {boolean} isDestroyCalled  true if called destroy before the ready event fired
  */
 
 /**
@@ -140,11 +141,19 @@ export default class CursorPlugin {
          * @type {?HTMLElement}
          */
         this.displayTime = null;
+        /**
+         * true when `destroy` was called before `ready` event
+         * @type {boolean}
+         */
+        this.isDestroyCalled = false;
 
         this.params = Object.assign({}, this.defaultParams, params);
     }
 
     _onReady() {
+        if (this.isDestroyCalled) {
+            return;
+        }
         this.wrapper = this.wavesurfer.drawer.wrapper;
         this.cursor = this.util.withOrientation(this.wrapper.appendChild(
             document.createElement('cursor'),
@@ -237,10 +246,14 @@ export default class CursorPlugin {
      * Destroy the plugin (used by the Plugin API)
      */
     destroy() {
+        if (!this.cursorTime || !this.showTime){
+            this.isDestroyCalled = true;
+            return;
+        }
         if (this.params.showTime) {
-            this.showTime.remove();
+            this.showTime && this.showTime.remove();
         }
-        this.cursor.remove();
+        this.cursor && this.cursor.remove();
         this.wrapper.removeEventListener('mousemove', this._onMousemove);
         if (this.params.hideOnBlur) {
             this.wrapper.removeEventListener('mouseenter', this._onMouseenter);
@@ -323,7 +336,6 @@ export default class CursorPlugin {
      */
     formatTime(cursorTime) {
         cursorTime = isNaN(cursorTime) ? 0 : cursorTime;
-
         if (this.params.formatTimeCallback) {
             return this.params.formatTimeCallback(cursorTime);
         }

package/src/plugin/markers/index.js

@@ -4,6 +4,7 @@
  * @example wavesurfer.addMarker(regionParams);
  * @property {number} time The time to set the marker at
  * @property {?label} string An optional marker label
+ * @property {?tooltip} string An optional marker tooltip
  * @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
@@ -159,6 +160,7 @@ export default class MarkersPlugin {
         let marker = {
             time: params.time,
             label: params.label,
+            tooltip: params.tooltip,
             color: params.color || DEFAULT_FILL_COLOR,
             position: params.position || DEFAULT_POSITION,
             draggable: !!params.draggable,
@@ -171,6 +173,8 @@ export default class MarkersPlugin {
         this.markers.push(marker);
         this._updateMarkerPositions();
 
+        this._registerEvents();
+
         return marker;
     }
 
@@ -199,6 +203,8 @@ export default class MarkersPlugin {
 
         this.wrapper.removeChild(marker.el);
         this.markers.splice(index, 1);
+
+        this._unregisterEvents();
     }
 
     _createPointerSVG(color, position) {
@@ -231,6 +237,7 @@ export default class MarkersPlugin {
 
     _createMarkerElement(marker, markerElement) {
         let label = marker.label;
+        let tooltip = marker.tooltip;
 
         const el = document.createElement('marker');
         el.className = "wavesurfer-marker";
@@ -265,8 +272,9 @@ export default class MarkersPlugin {
         if ( label ) {
             const labelEl = document.createElement('span');
             labelEl.innerText = label;
+            labelEl.setAttribute('title', tooltip);
             this.style(labelEl, {
-                "font-family": "monospace",
+                "font-family": "inherit",
                 "font-size": "90%"
             });
             labelDiv.appendChild(labelEl);
@@ -386,6 +394,37 @@ export default class MarkersPlugin {
         this.wavesurfer.fireEvent("marker-drop", this.selectedMarker, event);
     }
 
+    _registerEvents() {
+        if (!this.markers.find(marker => marker.draggable)) {
+            return;
+        }
+        //we have some draggable markers, check for listeners
+        if (!this.onMouseMove) {
+            this.onMouseMove = (e) => this._onMouseMove(e);
+            window.addEventListener('mousemove', this.onMouseMove);
+        }
+
+        if (!this.onMouseUp) {
+            this.onMouseUp = (e) => this._onMouseUp(e);
+            window.addEventListener("mouseup", this.onMouseUp);
+        }
+    }
+
+    _unregisterEvents() {
+        if (this.markers.find(marker => marker.draggable)) {
+            return;
+        }
+        //we don't have any draggable markers, unregister listeners
+        if (this.onMouseMove) {
+            window.removeEventListener('mousemove', this.onMouseMove);
+            this.onMouseMove = null;
+        }
+        if (this.onMouseUp) {
+            window.removeEventListener("mouseup", this.onMouseUp);
+            this.onMouseUp = null;
+        }
+    }
+
     /**
      * Remove all markers
      */

package/src/plugin/regions/index.js

@@ -4,6 +4,8 @@
  * @typedef {Object} RegionsPluginParams
  * @property {?boolean} dragSelection Enable creating regions by dragging with
  * the mouse
+ * @property {?boolean} contentEditable=false Allow/disallow editing content of the region
+ * @property {?boolean} removeButton=false adds remove region button
  * @property {?RegionParams[]} regions Regions that should be added upon
  * initialisation
  * @property {number} slop=2 The sensitivity of the mouse dragging
@@ -203,6 +205,8 @@ export default class RegionsPlugin {
 
         params = {
             edgeScrollWidth: this.params.edgeScrollWidth || this.defaultEdgeScrollWidth,
+            contentEditable: this.params.contentEditable,
+            removeButton: this.params.removeButton,
             ...params
         };
 

package/src/plugin/regions/region.js

@@ -28,6 +28,8 @@ export class Region {
         this.resize =
             params.resize === undefined ? true : Boolean(params.resize);
         this.drag = params.drag === undefined ? true : Boolean(params.drag);
+        this.contentEditable = Boolean(params.contentEditable);
+        this.removeButton = Boolean(params.removeButton);
         // reflect resize and drag state of region for region-updated listener
         this.isResizing = false;
         this.isDragging = false;
@@ -196,6 +198,40 @@ export class Region {
             top: this.marginTop
         });
 
+        /* Button Remove Region */
+        if (this.removeButton){
+            const removeButtonEl = document.createElement('div');
+            removeButtonEl.className = 'remove-region-button';
+            removeButtonEl.innerText = 'x';
+            this.removeButtonEl = this.element.appendChild(removeButtonEl);
+            const css = {
+                zIndex: 4,
+                position: 'absolute',
+                bottom: 0,
+                right: 0,
+                cursor:'pointer',
+                marginRight: '3px',
+                fontSize: '80%',
+                color: 'grey',
+                height: '14px'
+            };
+            this.style(this.removeButtonEl, css);
+        }
+
+        /* Edit content */
+        if (this.contentEditable){
+            const contentEl = document.createElement('div');
+            contentEl.className = 'region-content';
+            contentEl.contentEditable = true;
+            contentEl.innerText = this.data.text || '';
+            this.contentEl = this.element.appendChild(contentEl);
+            const css = {
+                zIndex: 4,
+                padding: '2px 5px',
+                cursor:'text'};
+            this.style(this.contentEl, css);
+        }
+
         /* Resize handles */
         if (this.resize) {
             this.handleLeftEl = this.util.withOrientation(
@@ -404,6 +440,22 @@ export class Region {
         if (this.drag || this.resize) {
             this.bindDragEvents();
         }
+
+        /* Edit content */
+        if (this.contentEditable){
+            this.contentEl.addEventListener('blur', this.onContentBlur.bind(this));
+            this.contentEl.addEventListener('click', this.onContentClick.bind(this));
+        }
+        /* Remove button */
+        if (this.removeButton){
+            this.removeButtonEl.addEventListener('click', this.onRemove.bind(this));
+        }
+
+        this.on('remove', () => {
+            this.contentEl.removeEventListener('blur', this.onContentBlur.bind(this));
+            this.contentEl.removeEventListener('click', this.onContentClick.bind(this));
+            this.removeButtonEl.removeEventListener('click', this.onRemove.bind(this));
+        });
     }
 
     bindDragEvents() {
@@ -586,6 +638,7 @@ export class Region {
         const onMove = (event) => {
             const duration = this.wavesurfer.getDuration();
             let orientedEvent = this.util.withOrientation(event, this.vertical);
+            let delta = null;
 
             if (event.touches && event.touches.length > 1) {
                 return;
@@ -632,7 +685,9 @@ export class Region {
                     }
                 } else if (resize === 'end') {
                     if (time < this.start + minLength) {
+                        // Calculate the end time based on the min length of the region.
                         time = this.start + minLength;
+                        delta = time - (this.end + (time - startTime));
                     }
 
                     if (time > duration) {
@@ -641,7 +696,10 @@ export class Region {
                 }
             }
 
-            let delta = time - startTime;
+            if (!delta) {
+                delta = time - startTime;
+            }
+
             startTime = time;
 
             // Drag
@@ -794,6 +852,23 @@ export class Region {
         }
     }
 
+    onContentBlur(event){
+        const {text: oldText} = this.data || {};
+        const text = event.target.innerText;
+        const data = {...this.data, text };
+        const eventParams = {action: 'contentEdited', oldText, text};
+        this.update({data}, eventParams);
+    }
+
+    onContentClick(event){
+        event.stopPropagation();
+    }
+
+    onRemove(event){
+        event.stopPropagation();
+        this.remove();
+    }
+
     updateHandlesResize(resize) {
         let cursorStyle;
         if (resize) {

package/src/util/silence-mode.js

@@ -10,6 +10,13 @@
  * @since 5.2.0
  */
 export default function ignoreSilenceMode() {
+    // Set webaudio context with 1 second silent audio 44100 bit rate buffer to allow playing audio even if silent switch is on the device
+    const silentAC = new AudioContext();
+    const silentBS = silentAC.createBufferSource();
+    silentBS.buffer = silentAC.createBuffer(1, 1, 44100);
+    silentBS.connect(silentAC.destination);
+    silentBS.start();
+
     // Set the src to a short bit of url encoded as a silent mp3
     // NOTE The silence MP3 must be high quality, when web audio sounds are played
     // in parallel the web audio sound is mixed to match the bitrate of the html sound

package/src/wavesurfer.js

@@ -1004,6 +1004,10 @@ export default class WaveSurfer extends util.Observer {
      * @emits WaveSurfer#volume
      */
     setVolume(newVolume) {
+        if (this.isMuted === true) {
+            this.savedVolume = newVolume;
+            return;
+        }
         this.backend.setVolume(newVolume);
         this.fireEvent('volume', newVolume);
     }