wavesurfer.js 5.1.0 → 5.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wavesurfer.js",
-  "version": "5.1.0",
+  "version": "5.2.0",
   "description": "Interactive navigable audio visualization using Web Audio and Canvas",
   "main": "dist/wavesurfer.js",
   "directories": {
@@ -55,9 +55,9 @@
     "visualization"
   ],
   "devDependencies": {
-    "@babel/core": "^7.14.6",
-    "@babel/preset-env": "^7.14.5",
-    "@babel/register": "^7.14.5",
+    "@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",
@@ -65,7 +65,7 @@
     "babel-plugin-istanbul": "^6.0.0",
     "babel-plugin-proxy": "^1.1.0",
     "babel-plugin-transform-class-properties": "^6.24.1",
-    "date-fns": "^2.22.1",
+    "date-fns": "^2.23.0",
     "debounce": "^1.2.1",
     "esdoc": "^1.1.0",
     "esdoc-accessor-plugin": "^1.0.0",
@@ -74,10 +74,10 @@
     "esdoc-ecmascript-proposal-plugin": "^1.0.0",
     "esdoc-integrate-test-plugin": "^1.0.0",
     "esdoc-standard-plugin": "^1.0.0",
-    "eslint": "^7.29.0",
+    "eslint": "^7.32.0",
     "htmlhint": "^0.15.1",
     "in-publish": "^2.0.1",
-    "jasmine-core": "^3.7.1",
+    "jasmine-core": "^3.8.0",
     "karma": "^6.3.4",
     "karma-chrome-launcher": "3.1.0",
     "karma-coverage": "^2.0.3",
@@ -86,12 +86,12 @@
     "karma-jasmine-matchers": "4.0.2",
     "karma-verbose-reporter": "0.0.6",
     "karma-webpack": "^5.0.0",
-    "lint-staged": "^11.0.0",
+    "lint-staged": "^11.1.2",
     "load-script": "^1.0.0",
     "pre-commit": "^1.2.2",
-    "webpack": "^5.39.1",
-    "webpack-cli": "^4.7.2",
-    "webpack-dev-server": "^4.0.0-beta.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",

package/src/plugin/regions/region.js

@@ -87,7 +87,7 @@ export class Region {
     }
 
     /* Update region params. */
-    update(params) {
+    update(params, eventParams) {
         if (params.start != null) {
             this.start = Number(params.start);
         }
@@ -125,7 +125,7 @@ export class Region {
 
         this.updateRender();
         this.fireEvent('update');
-        this.wavesurfer.fireEvent('region-updated', this);
+        this.wavesurfer.fireEvent('region-updated', this, eventParams);
     }
 
     /* Remove a single region. */
@@ -708,10 +708,33 @@ export class Region {
             delta = this.start * -1;
         }
 
+        const eventParams = {
+            direction: this._getDragDirection(delta),
+            action: 'drag'
+        };
+
         this.update({
             start: this.start + delta,
             end: this.end + delta
-        });
+        }, eventParams);
+    }
+
+    /**
+     * Returns the direction of dragging region based on delta
+     * Negative delta means region is moving to the left
+     * Positive - to the right
+     * For zero delta the direction is not defined
+     * @param {number} delta Drag offset
+     * @returns {string|null} Direction 'left', 'right' or null
+     */
+    _getDragDirection(delta) {
+        if (delta < 0) {
+            return 'left';
+        }
+        if (delta > 0) {
+            return 'right';
+        }
+        return null;
     }
 
     /**
@@ -724,6 +747,11 @@ export class Region {
      */
     onResize(delta, direction) {
         const duration = this.wavesurfer.getDuration();
+        const eventParams = {
+            action: 'resize',
+            direction: direction === 'start' ? 'right' : 'left'
+        };
+
         if (direction === 'start') {
             // Check if changing the start by the given delta would result in the region being smaller than minLength
             // Ignore cases where we are making the region wider rather than shrinking it
@@ -738,7 +766,7 @@ export class Region {
             this.update({
                 start: Math.min(this.start + delta, this.end),
                 end: Math.max(this.start + delta, this.end)
-            });
+            }, eventParams);
         } else {
             // Check if changing the end by the given delta would result in the region being smaller than minLength
             // Ignore cases where we are making the region wider rather than shrinking it
@@ -753,7 +781,7 @@ export class Region {
             this.update({
                 start: Math.min(this.end + delta, this.start),
                 end: Math.max(this.end + delta, this.start)
-            });
+            }, eventParams);
         }
     }
 

package/src/plugin/timeline/index.js

@@ -505,18 +505,20 @@ export default class TimelinePlugin {
 
         this.canvases.forEach(canvas => {
             const context = canvas.getContext('2d');
-            const canvasWidth = context.canvas.width;
+            if (context) {
+                const canvasWidth = context.canvas.width;
 
-            if (xOffset > x + textWidth) {
-                return;
-            }
+                if (xOffset > x + textWidth) {
+                    return;
+                }
 
-            if (xOffset + canvasWidth > x && context) {
-                textWidth = context.measureText(text).width;
-                context.fillText(text, x - xOffset, y);
-            }
+                if (xOffset + canvasWidth > x && context) {
+                    textWidth = context.measureText(text).width;
+                    context.fillText(text, x - xOffset, y);
+                }
 
-            xOffset += canvasWidth;
+                xOffset += canvasWidth;
+            }
         });
     }
 

package/src/util/index.js

@@ -11,3 +11,4 @@ export { default as preventClick } from './prevent-click';
 export { default as fetchFile } from './fetch';
 export { default as clamp } from './clamp';
 export { default as withOrientation } from './orientation';
+export { default as ignoreSilenceMode } from './silence-mode';

package/src/util/silence-mode.js

@@ -0,0 +1,35 @@
+/**
+ * Ignores device silence mode when using the `WebAudio` backend.
+ *
+ * Many mobile devices contain a hardware button to mute the ringtone for incoming
+ * calls and messages. Unfortunately, on some platforms like iOS, this also mutes
+ * wavesurfer's audio when using the `WebAudio` backend. This function creates a
+ * temporary `<audio>` element that makes sure the WebAudio backend keeps playing
+ * when muting the device ringer.
+ *
+ * @since 5.2.0
+ */
+export default function ignoreSilenceMode() {
+    // 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
+    // 0.01 seconds of silence VBR220-260 Joint Stereo 859B
+    const audioData = "data:audio/mpeg;base64,//uQxAAAAAAAAAAAAAAAAAAAAAAAWGluZwAAAA8AAAACAAACcQCAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICAgICA//////////////////////////////////////////////////////////////////8AAABhTEFNRTMuMTAwA8MAAAAAAAAAABQgJAUHQQAB9AAAAnGMHkkIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA//sQxAADgnABGiAAQBCqgCRMAAgEAH///////////////7+n/9FTuQsQH//////2NG0jWUGlio5gLQTOtIoeR2WX////X4s9Atb/JRVCbBUpeRUq//////////////////9RUi0f2jn/+xDECgPCjAEQAABN4AAANIAAAAQVTEFNRTMuMTAwVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVQ==";
+
+    // disable iOS Airplay (setting the attribute in js doesn't work)
+    let tmp = document.createElement("div");
+    tmp.innerHTML = '<audio x-webkit-airplay="deny"></audio>';
+
+    let audioSilentMode = tmp.children.item(0);
+    audioSilentMode.src = audioData;
+    audioSilentMode.preload = "auto";
+    audioSilentMode.type = "audio/mpeg";
+    audioSilentMode.disableRemotePlayback = true;
+
+    // play
+    audioSilentMode.play();
+
+    // cleanup
+    audioSilentMode.remove();
+    tmp.remove();
+}

package/src/wavesurfer.js

@@ -69,6 +69,8 @@ import MediaElementWebAudio from './mediaelement-webaudio';
  * pixels.
  * @property {boolean} hideScrollbar=false Whether to hide the horizontal
  * scrollbar when one would normally be shown.
+ * @property {boolean} ignoreSilenceMode=false If true, ignores device silence mode
+ * when using the `WebAudio` backend.
  * @property {boolean} interact=true Whether the mouse interaction will be
  * enabled at initialization. You can switch this parameter at any time later
  * on.
@@ -268,6 +270,7 @@ export default class WaveSurfer extends util.Observer {
         forceDecode: false,
         height: 128,
         hideScrollbar: false,
+        ignoreSilenceMode: false,
         interact: true,
         loopSelection: true,
         maxCanvasWidth: 4000,
@@ -813,6 +816,11 @@ export default class WaveSurfer extends util.Observer {
      * wavesurfer.play(1, 5);
      */
     play(start, end) {
+        if (this.params.ignoreSilenceMode) {
+            // ignores device hardware silence mode
+            util.ignoreSilenceMode();
+        }
+
         this.fireEvent('interaction', () => this.play(start, end));
         return this.backend.play(start, end);
     }
@@ -1538,19 +1546,21 @@ export default class WaveSurfer extends util.Observer {
      * @param {function} callback The function to call on complete
      */
     decodeArrayBuffer(arraybuffer, callback) {
-        this.arraybuffer = arraybuffer;
-        this.backend.decodeArrayBuffer(
-            arraybuffer,
-            data => {
-                // Only use the decoded data if we haven't been destroyed or
-                // another decode started in the meantime
-                if (!this.isDestroyed && this.arraybuffer == arraybuffer) {
-                    callback(data);
-                    this.arraybuffer = null;
-                }
-            },
-            () => this.fireEvent('error', 'Error decoding audiobuffer')
-        );
+        if (!this.isDestroyed) {
+            this.arraybuffer = arraybuffer;
+            this.backend.decodeArrayBuffer(
+                arraybuffer,
+                data => {
+                    // Only use the decoded data if we haven't been destroyed or
+                    // another decode started in the meantime
+                    if (!this.isDestroyed && this.arraybuffer == arraybuffer) {
+                        callback(data);
+                        this.arraybuffer = null;
+                    }
+                },
+                () => this.fireEvent('error', 'Error decoding audiobuffer')
+            );
+        }
     }
 
     /**

package/src/webaudio.js

@@ -702,7 +702,16 @@ export default class WebAudio extends util.Observer {
         this.scheduledPause = null;
 
         this.startPosition += this.getPlayedTime();
-        this.source && this.source.stop(0);
+        try {
+            this.source && this.source.stop(0);
+        } catch (err) {
+            // Calling stop can throw the following 2 errors:
+            // - RangeError (The value specified for when is negative.)
+            // - InvalidStateNode (The node has not been started by calling start().)
+            // We can safely ignore both errors, because:
+            // - The range is surely correct
+            // - The node might not have been started yet, in which case we just want to carry on without causing any trouble.
+        }
 
         this.setState(PAUSED);