wavesurfer.js 4.6.0 → 5.2.0

package/src/util/orientation.js

@@ -0,0 +1,98 @@
+const verticalPropMap = {
+    width: 'height',
+    height: 'width',
+
+    overflowX: 'overflowY',
+    overflowY: 'overflowX',
+
+    clientWidth: 'clientHeight',
+    clientHeight: 'clientWidth',
+
+    clientX: 'clientY',
+    clientY: 'clientX',
+
+    scrollWidth: 'scrollHeight',
+    scrollLeft: 'scrollTop',
+
+    offsetLeft: 'offsetTop',
+    offsetTop: 'offsetLeft',
+    offsetHeight: 'offsetWidth',
+    offsetWidth: 'offsetHeight',
+
+    left: 'top',
+    right: 'bottom',
+    top: 'left',
+    bottom: 'right',
+
+    borderRightStyle: 'borderBottomStyle',
+    borderRightWidth: 'borderBottomWidth',
+    borderRightColor: 'borderBottomColor'
+};
+
+/**
+ * Convert a horizontally-oriented property name to a vertical one.
+ *
+ * @param {string} prop A property name
+ * @param {bool} vertical Whether the element is oriented vertically
+ * @returns {string} prop, converted appropriately
+ */
+function mapProp(prop, vertical) {
+    if (Object.prototype.hasOwnProperty.call(verticalPropMap, prop)) {
+        return vertical ? verticalPropMap[prop] : prop;
+    } else {
+        return prop;
+    }
+}
+
+const isProxy = Symbol("isProxy");
+
+/**
+ * Returns an appropriately oriented object based on vertical.
+ * If vertical is true, attribute getting and setting will be mapped through
+ * verticalPropMap, so that e.g. getting the object's .width will give its
+ * .height instead.
+ * Certain methods of an oriented object will return oriented objects as well.
+ * Oriented objects can't be added to the DOM directly since they are Proxy objects
+ * and thus fail typechecks. Use domElement to get the actual element for this.
+ *
+ * @param {object} target The object to be wrapped and oriented
+ * @param {bool} vertical Whether the element is oriented vertically
+ * @returns {Proxy} An oriented object with attr translation via verticalAttrMap
+ * @since 5.0.0
+ */
+export default function withOrientation(target, vertical) {
+    if (target[isProxy]) {
+        return target;
+    } else {
+        return new Proxy(
+            target, {
+                get: function(obj, prop, receiver) {
+                    if (prop === isProxy) {
+                        return true;
+                    } else if (prop === 'domElement') {
+                        return obj;
+                    } else if (prop === 'style') {
+                        return withOrientation(obj.style, vertical);
+                    } else if (prop === 'canvas') {
+                        return withOrientation(obj.canvas, vertical);
+                    } else if (prop === 'getBoundingClientRect') {
+                        return function(...args) {
+                            return withOrientation(obj.getBoundingClientRect(...args), vertical);
+                        };
+                    } else if (prop === 'getContext') {
+                        return function(...args) {
+                            return withOrientation(obj.getContext(...args), vertical);
+                        };
+                    } else {
+                        let value = obj[mapProp(prop, vertical)];
+                        return typeof value == 'function' ? value.bind(obj) : value;
+                    }
+                },
+                set: function(obj, prop, value) {
+                    obj[mapProp(prop, vertical)] = value;
+                    return true;
+                }
+            }
+        );
+    }
+}

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.
@@ -115,6 +117,7 @@ import MediaElementWebAudio from './mediaelement-webaudio';
  * @property {boolean} splitChannels=false Render with separate waveforms for
  * the channels of the audio
  * @property {SplitChannelOptions} splitChannelsOptions={} Options for splitChannel rendering
+ * @property {boolean} vertical=false Render the waveform vertically instead of horizontally.
  * @property {string} waveColor='#999' The fill color of the waveform after the
  * cursor.
  * @property {object} xhr={} XHR options. For example:
@@ -267,6 +270,7 @@ export default class WaveSurfer extends util.Observer {
         forceDecode: false,
         height: 128,
         hideScrollbar: false,
+        ignoreSilenceMode: false,
         interact: true,
         loopSelection: true,
         maxCanvasWidth: 4000,
@@ -293,6 +297,7 @@ export default class WaveSurfer extends util.Observer {
             filterChannels: [],
             relativeNormalization: false
         },
+        vertical: false,
         waveColor: '#999',
         xhr: {}
     };
@@ -401,7 +406,11 @@ export default class WaveSurfer extends util.Observer {
         }
 
         if (this.params.rtl === true) {
-            util.style(this.container, { transform: 'rotateY(180deg)' });
+            if (this.params.vertical === true) {
+                util.style(this.container, { transform: 'rotateX(180deg)' });
+            } else {
+                util.style(this.container, { transform: 'rotateY(180deg)' });
+            }
         }
 
         if (this.params.backgroundColor) {
@@ -807,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);
     }
@@ -1532,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')
+            );
+        }
     }
 
     /**
@@ -1604,7 +1620,8 @@ export default class WaveSurfer extends util.Observer {
     }
 
     /**
-     * Exports PCM data into a JSON array and opens in a new window.
+     * Exports PCM data into a JSON array and optionally opens in a new window
+     * as valid JSON Blob instance.
      *
      * @param {number} length=1024 The scale in which to export the peaks
      * @param {number} accuracy=10000
@@ -1624,16 +1641,18 @@ export default class WaveSurfer extends util.Observer {
             peaks,
             val => Math.round(val * accuracy) / accuracy
         );
-        return new Promise((resolve, reject) => {
-            const json = JSON.stringify(arr);
 
-            if (!noWindow) {
-                window.open(
-                    'data:application/json;charset=utf-8,' +
-                        encodeURIComponent(json)
+        return new Promise((resolve, reject) => {
+            if (!noWindow){
+                const blobJSON = new Blob(
+                    [JSON.stringify(arr)],
+                    {type: 'application/json;charset=utf-8'}
                 );
+                const objURL = URL.createObjectURL(blobJSON);
+                window.open(objURL);
+                URL.revokeObjectURL(objURL);
             }
-            resolve(json);
+            resolve(arr);
         });
     }
 

package/src/webaudio.js

@@ -261,7 +261,7 @@ export default class WebAudio extends util.Observer {
 
     /** @private */
     removeOnAudioProcess() {
-        this.scriptNode.onaudioprocess = () => {};
+        this.scriptNode.onaudioprocess = null;
     }
     /** Create analyser node to perform audio analysis */
     createAnalyserNode() {
@@ -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);