wavesurfer.js 4.6.0 → 5.2.0

package/dist/wavesurfer.js

@@ -1,5 +1,5 @@
 /*!
- * wavesurfer.js 4.6.0 (2021-03-05)
+ * wavesurfer.js 5.2.0 (2021-08-16)
  * https://wavesurfer-js.org
  * @license BSD-3-Clause
  */
@@ -12,7 +12,7 @@
 		exports["WaveSurfer"] = factory();
 	else
 		root["WaveSurfer"] = factory();
-})(this, function() {
+})(self, function() {
 return /******/ (() => { // webpackBootstrap
 /******/ 	var __webpack_modules__ = ({
 
@@ -196,6 +196,24 @@ var CanvasEntry = /*#__PURE__*/function () {
         this.progressCtx.fillStyle = progressColor;
       }
     }
+    /**
+     * Set the canvas transforms for wave and progress
+     *
+     * @param {boolean} vertical Whether to render vertically
+     */
+
+  }, {
+    key: "applyCanvasTransforms",
+    value: function 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
      *
@@ -426,9 +444,9 @@ exports.default = void 0;
 
 var util = _interopRequireWildcard(__webpack_require__(/*! ./util */ "./src/util/index.js"));
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
@@ -442,7 +460,7 @@ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || func
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
 
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
@@ -470,7 +488,7 @@ var Drawer = /*#__PURE__*/function (_util$Observer) {
     _classCallCheck(this, Drawer);
 
     _this = _super.call(this);
-    _this.container = container;
+    _this.container = util.withOrientation(container, params.vertical);
     /**
      * @type {WavesurferParams}
      */
@@ -519,7 +537,7 @@ var Drawer = /*#__PURE__*/function (_util$Observer) {
   }, {
     key: "createWrapper",
     value: function 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, {
         display: 'block',
         position: 'relative',
@@ -550,33 +568,44 @@ var Drawer = /*#__PURE__*/function (_util$Observer) {
     key: "handleEvent",
     value: function handleEvent(e, noPrevent) {
       !noPrevent && e.preventDefault();
-      var clientX = e.targetTouches ? e.targetTouches[0].clientX : e.clientX;
+      var clientX = util.withOrientation(e.targetTouches ? e.targetTouches[0] : e, this.params.vertical).clientX;
       var bbox = this.wrapper.getBoundingClientRect();
       var nominalWidth = this.width;
       var parentWidth = this.getWidth();
+      var progressPixels = this.getProgressPixels(bbox, clientX);
       var 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);
     }
+  }, {
+    key: "getProgressPixels",
+    value: function getProgressPixels(wrapperBbox, clientX) {
+      if (this.params.rtl) {
+        return wrapperBbox.right - clientX;
+      } else {
+        return clientX - wrapperBbox.left;
+      }
+    }
   }, {
     key: "setupWrapperEvents",
     value: function setupWrapperEvents() {
       var _this2 = this;
 
       this.wrapper.addEventListener('click', function (e) {
+        var orientedEvent = util.withOrientation(e, _this2.params.vertical);
         var scrollbarHeight = _this2.wrapper.offsetHeight - _this2.wrapper.clientHeight;
 
         if (scrollbarHeight !== 0) {
           // scrollbar is visible.  Check if click was on it
           var bbox = _this2.wrapper.getBoundingClientRect();
 
-          if (e.clientY >= bbox.bottom - scrollbarHeight) {
+          if (orientedEvent.clientY >= bbox.bottom - scrollbarHeight) {
             // ignore mousedown as it was on the scrollbar
             return;
           }
@@ -738,8 +767,9 @@ var Drawer = /*#__PURE__*/function (_util$Observer) {
           width: ''
         });
       } else {
+        var newWidth = ~~(this.width / this.params.pixelRatio) + 'px';
         this.style(this.wrapper, {
-          width: ~~(this.width / this.params.pixelRatio) + 'px'
+          width: newWidth
         });
       }
 
@@ -800,8 +830,8 @@ var Drawer = /*#__PURE__*/function (_util$Observer) {
       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;
@@ -912,9 +942,9 @@ var util = _interopRequireWildcard(__webpack_require__(/*! ./util */ "./src/util
 
 var _drawer2 = _interopRequireDefault(__webpack_require__(/*! ./drawer.canvasentry */ "./src/drawer.canvasentry.js"));
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -930,7 +960,7 @@ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || func
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
 
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
@@ -1024,6 +1054,13 @@ var MultiCanvas = /*#__PURE__*/function (_Drawer) {
      */
 
     _this.barRadius = params.barRadius || 0;
+    /**
+     * Whether to render the waveform vertically. Defaults to false.
+     *
+     * @type {boolean}
+     */
+
+    _this.vertical = params.vertical;
     return _this;
   }
   /**
@@ -1045,7 +1082,8 @@ var MultiCanvas = /*#__PURE__*/function (_Drawer) {
   }, {
     key: "createElements",
     value: function createElements() {
-      this.progressWave = this.wrapper.appendChild(this.style(document.createElement('wave'), {
+      this.progressWave = util.withOrientation(this.wrapper.appendChild(document.createElement('wave')), this.params.vertical);
+      this.style(this.progressWave, {
         position: 'absolute',
         zIndex: 3,
         left: 0,
@@ -1057,7 +1095,7 @@ var MultiCanvas = /*#__PURE__*/function (_Drawer) {
         boxSizing: 'border-box',
         borderRightStyle: 'solid',
         pointerEvents: 'none'
-      }));
+      });
       this.addCanvas();
       this.updateCursor();
     }
@@ -1120,7 +1158,8 @@ var MultiCanvas = /*#__PURE__*/function (_Drawer) {
       entry.halfPixel = this.halfPixel;
       var leftOffset = this.maxCanvasElementWidth * this.canvases.length; // wave
 
-      entry.initWave(this.wrapper.appendChild(this.style(document.createElement('canvas'), {
+      var wave = util.withOrientation(this.wrapper.appendChild(document.createElement('canvas')), this.params.vertical);
+      this.style(wave, {
         position: 'absolute',
         zIndex: 2,
         left: leftOffset + 'px',
@@ -1128,16 +1167,19 @@ var MultiCanvas = /*#__PURE__*/function (_Drawer) {
         bottom: 0,
         height: '100%',
         pointerEvents: 'none'
-      }))); // progress
+      });
+      entry.initWave(wave); // progress
 
       if (this.hasProgressCanvas) {
-        entry.initProgress(this.progressWave.appendChild(this.style(document.createElement('canvas'), {
+        var 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);
@@ -1152,10 +1194,10 @@ var MultiCanvas = /*#__PURE__*/function (_Drawer) {
     value: function removeCanvas() {
       var lastEntry = this.canvases[this.canvases.length - 1]; // wave
 
-      lastEntry.wave.parentElement.removeChild(lastEntry.wave); // progress
+      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
 
 
@@ -1252,7 +1294,9 @@ var MultiCanvas = /*#__PURE__*/function (_Drawer) {
           /* in case of silences, allow the user to specify that we
            * always draw *something* (normally a 1px high bar) */
 
-          if (h == 0 && _this4.params.barMinHeight) h = _this4.params.barMinHeight;
+          if (h == 0 && _this4.params.barMinHeight) {
+            h = _this4.params.barMinHeight;
+          }
 
           _this4.fillRect(i + _this4.halfPixel, halfH - h + offsetY, bar + _this4.halfPixel, h * 2, _this4.barRadius, ch);
         }
@@ -1335,6 +1379,8 @@ var MultiCanvas = /*#__PURE__*/function (_Drawer) {
       this.canvases.forEach(function (entry, i) {
         _this6.setFillStyles(entry, waveColor, progressColor);
 
+        _this6.applyCanvasTransforms(entry, _this6.params.vertical);
+
         entry.drawLines(peaks, absmax, halfH, offsetY, start, end);
       });
     }
@@ -1372,6 +1418,7 @@ var MultiCanvas = /*#__PURE__*/function (_Drawer) {
               progressColor = _ref4.progressColor;
 
           this.setFillStyles(entry, waveColor, progressColor);
+          this.applyCanvasTransforms(entry, this.params.vertical);
           entry.fillRects(intersection.x1 - leftOffset, intersection.y1, intersection.x2 - intersection.x1, intersection.y2 - intersection.y1, radius);
         }
       }
@@ -1495,6 +1542,19 @@ var MultiCanvas = /*#__PURE__*/function (_Drawer) {
       var progressColor = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : this.params.progressColor;
       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
+     */
+
+  }, {
+    key: "applyCanvasTransforms",
+    value: function applyCanvasTransforms(entry) {
+      var vertical = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      entry.applyCanvasTransforms(vertical);
+    }
     /**
      * Return image data of the multi-canvas
      *
@@ -1583,7 +1643,7 @@ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || func
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
 
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
@@ -1716,9 +1776,9 @@ var _webaudio = _interopRequireDefault(__webpack_require__(/*! ./webaudio */ "./
 
 var util = _interopRequireWildcard(__webpack_require__(/*! ./util */ "./src/util/index.js"));
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -1738,7 +1798,7 @@ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || func
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
 
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
@@ -2918,6 +2978,18 @@ Object.defineProperty(exports, "clamp", ({
     return _clamp.default;
   }
 }));
+Object.defineProperty(exports, "withOrientation", ({
+  enumerable: true,
+  get: function get() {
+    return _orientation.default;
+  }
+}));
+Object.defineProperty(exports, "ignoreSilenceMode", ({
+  enumerable: true,
+  get: function get() {
+    return _silenceMode.default;
+  }
+}));
 
 var _getId = _interopRequireDefault(__webpack_require__(/*! ./get-id */ "./src/util/get-id.js"));
 
@@ -2943,6 +3015,10 @@ var _fetch = _interopRequireDefault(__webpack_require__(/*! ./fetch */ "./src/ut
 
 var _clamp = _interopRequireDefault(__webpack_require__(/*! ./clamp */ "./src/util/clamp.js"));
 
+var _orientation = _interopRequireDefault(__webpack_require__(/*! ./orientation */ "./src/util/orientation.js"));
+
+var _silenceMode = _interopRequireDefault(__webpack_require__(/*! ./silence-mode */ "./src/util/silence-mode.js"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /***/ }),
@@ -3224,6 +3300,113 @@ module.exports = exports.default;
 
 /***/ }),
 
+/***/ "./src/util/orientation.js":
+/*!*********************************!*\
+  !*** ./src/util/orientation.js ***!
+  \*********************************/
+/***/ ((module, exports) => {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports.default = withOrientation;
+var 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;
+  }
+}
+
+var 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
+ */
+
+function withOrientation(target, vertical) {
+  if (target[isProxy]) {
+    return target;
+  } else {
+    return new Proxy(target, {
+      get: function get(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 () {
+            return withOrientation(obj.getBoundingClientRect.apply(obj, arguments), vertical);
+          };
+        } else if (prop === 'getContext') {
+          return function () {
+            return withOrientation(obj.getContext.apply(obj, arguments), vertical);
+          };
+        } else {
+          var value = obj[mapProp(prop, vertical)];
+          return typeof value == 'function' ? value.bind(obj) : value;
+        }
+      },
+      set: function set(obj, prop, value) {
+        obj[mapProp(prop, vertical)] = value;
+        return true;
+      }
+    });
+  }
+}
+
+module.exports = exports.default;
+
+/***/ }),
+
 /***/ "./src/util/prevent-click.js":
 /*!***********************************!*\
   !*** ./src/util/prevent-click.js ***!
@@ -3294,6 +3477,56 @@ module.exports = exports.default;
 
 /***/ }),
 
+/***/ "./src/util/silence-mode.js":
+/*!**********************************!*\
+  !*** ./src/util/silence-mode.js ***!
+  \**********************************/
+/***/ ((module, exports) => {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports.default = ignoreSilenceMode;
+
+/**
+ * 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
+ */
+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
+  var 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)
+
+  var tmp = document.createElement("div");
+  tmp.innerHTML = '<audio x-webkit-airplay="deny"></audio>';
+  var 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();
+}
+
+module.exports = exports.default;
+
+/***/ }),
+
 /***/ "./src/util/style.js":
 /*!***************************!*\
   !*** ./src/util/style.js ***!
@@ -3359,9 +3592,9 @@ var _mediaelementWebaudio = _interopRequireDefault(__webpack_require__(/*! ./med
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
 
@@ -3369,7 +3602,7 @@ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || func
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
 
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
@@ -3453,6 +3686,8 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
  * 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.
@@ -3499,6 +3734,7 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
  * @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:
@@ -3689,6 +3925,7 @@ var WaveSurfer = /*#__PURE__*/function (_util$Observer) {
       forceDecode: false,
       height: 128,
       hideScrollbar: false,
+      ignoreSilenceMode: false,
       interact: true,
       loopSelection: true,
       maxCanvasWidth: 4000,
@@ -3714,6 +3951,7 @@ var WaveSurfer = /*#__PURE__*/function (_util$Observer) {
         filterChannels: [],
         relativeNormalization: false
       },
+      vertical: false,
       waveColor: '#999',
       xhr: {}
     };
@@ -3755,9 +3993,15 @@ var WaveSurfer = /*#__PURE__*/function (_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) {
@@ -4200,6 +4444,11 @@ var WaveSurfer = /*#__PURE__*/function (_util$Observer) {
     value: function play(start, end) {
       var _this7 = this;
 
+      if (this.params.ignoreSilenceMode) {
+        // ignores device hardware silence mode
+        util.ignoreSilenceMode();
+      }
+
       this.fireEvent('interaction', function () {
         return _this7.play(start, end);
       });
@@ -5002,17 +5251,19 @@ var WaveSurfer = /*#__PURE__*/function (_util$Observer) {
     value: function decodeArrayBuffer(arraybuffer, callback) {
       var _this13 = this;
 
-      this.arraybuffer = arraybuffer;
-      this.backend.decodeArrayBuffer(arraybuffer, function (data) {
-        // Only use the decoded data if we haven't been destroyed or
-        // another decode started in the meantime
-        if (!_this13.isDestroyed && _this13.arraybuffer == arraybuffer) {
-          callback(data);
-          _this13.arraybuffer = null;
-        }
-      }, function () {
-        return _this13.fireEvent('error', 'Error decoding audiobuffer');
-      });
+      if (!this.isDestroyed) {
+        this.arraybuffer = arraybuffer;
+        this.backend.decodeArrayBuffer(arraybuffer, function (data) {
+          // Only use the decoded data if we haven't been destroyed or
+          // another decode started in the meantime
+          if (!_this13.isDestroyed && _this13.arraybuffer == arraybuffer) {
+            callback(data);
+            _this13.arraybuffer = null;
+          }
+        }, function () {
+          return _this13.fireEvent('error', 'Error decoding audiobuffer');
+        });
+      }
     }
     /**
      * Load an array buffer using fetch and pass the result to a callback
@@ -5070,7 +5321,8 @@ var WaveSurfer = /*#__PURE__*/function (_util$Observer) {
       this.fireEvent('loading', Math.round(percentComplete * 100), e.target);
     }
     /**
-     * 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
@@ -5093,13 +5345,16 @@ var WaveSurfer = /*#__PURE__*/function (_util$Observer) {
         return Math.round(val * accuracy) / accuracy;
       });
       return new Promise(function (resolve, reject) {
-        var json = JSON.stringify(arr);
-
         if (!noWindow) {
-          window.open('data:application/json;charset=utf-8,' + encodeURIComponent(json));
+          var blobJSON = new Blob([JSON.stringify(arr)], {
+            type: 'application/json;charset=utf-8'
+          });
+          var objURL = URL.createObjectURL(blobJSON);
+          window.open(objURL);
+          URL.revokeObjectURL(objURL);
         }
 
-        resolve(json);
+        resolve(arr);
       });
     }
     /**
@@ -5258,7 +5513,7 @@ var WaveSurfer = /*#__PURE__*/function (_util$Observer) {
 }(util.Observer);
 
 exports.default = WaveSurfer;
-WaveSurfer.VERSION = "4.6.0";
+WaveSurfer.VERSION = "5.2.0";
 WaveSurfer.util = util;
 module.exports = exports.default;
 
@@ -5282,9 +5537,9 @@ exports.default = void 0;
 
 var util = _interopRequireWildcard(__webpack_require__(/*! ./util */ "./src/util/index.js"));
 
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
@@ -5300,7 +5555,7 @@ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || func
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
 
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
@@ -5614,7 +5869,7 @@ var WebAudio = /*#__PURE__*/function (_util$Observer) {
   }, {
     key: "removeOnAudioProcess",
     value: function removeOnAudioProcess() {
-      this.scriptNode.onaudioprocess = function () {};
+      this.scriptNode.onaudioprocess = null;
     }
     /** Create analyser node to perform audio analysis */
 
@@ -6094,7 +6349,17 @@ var WebAudio = /*#__PURE__*/function (_util$Observer) {
     value: function pause() {
       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);
       this.fireEvent('pause');
     }
@@ -6244,8 +6509,9 @@ module.exports = debounce;
 /******/ 	// The require function
 /******/ 	function __webpack_require__(moduleId) {
 /******/ 		// Check if module is in cache
-/******/ 		if(__webpack_module_cache__[moduleId]) {
-/******/ 			return __webpack_module_cache__[moduleId].exports;
+/******/ 		var cachedModule = __webpack_module_cache__[moduleId];
+/******/ 		if (cachedModule !== undefined) {
+/******/ 			return cachedModule.exports;
 /******/ 		}
 /******/ 		// Create a new module (and put it into the cache)
 /******/ 		var module = __webpack_module_cache__[moduleId] = {