wavesurfer.js 4.5.0 → 5.1.0

package/dist/wavesurfer.js

@@ -1,5 +1,5 @@
 /*!
- * wavesurfer.js 4.5.0 (2021-02-14)
+ * wavesurfer.js 5.1.0 (2021-06-20)
  * https://wavesurfer-js.org
  * @license BSD-3-Clause
  */
@@ -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"); } }
 
@@ -446,7 +464,7 @@ function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) ===
 
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
@@ -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 }; }
 
@@ -934,7 +964,7 @@ function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) ===
 
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
@@ -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
      *
@@ -1587,7 +1647,7 @@ function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) ===
 
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
@@ -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 }; }
 
@@ -1742,7 +1802,7 @@ function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) ===
 
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
@@ -2918,6 +2978,12 @@ Object.defineProperty(exports, "clamp", ({
     return _clamp.default;
   }
 }));
+Object.defineProperty(exports, "withOrientation", ({
+  enumerable: true,
+  get: function get() {
+    return _orientation.default;
+  }
+}));
 
 var _getId = _interopRequireDefault(__webpack_require__(/*! ./get-id */ "./src/util/get-id.js"));
 
@@ -2943,6 +3009,8 @@ 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"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 /***/ }),
@@ -3224,6 +3292,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 ***!
@@ -3359,9 +3534,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); }
 
@@ -3373,7 +3548,7 @@ function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) ===
 
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
@@ -3499,6 +3674,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:
@@ -3566,29 +3742,12 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
  * @extends {Observer}
  */
 var PluginClass = /*#__PURE__*/function () {
-  _createClass(PluginClass, [{
-    key: "create",
-
-    /**
-     * Plugin definition factory
-     *
-     * This function must be used to create a plugin definition which can be
-     * used by wavesurfer to correctly instantiate the plugin.
-     *
-     * It returns a `PluginDefinition` object representing the plugin.
-     *
-     * @param {Object} params={} The plugin params (specific to the plugin)
-     */
-    value: function create(params) {}
-    /**
-     * Construct the plugin
-     *
-     * @param {Object} params={} The plugin params (specific to the plugin)
-     * @param {Object} ws The wavesurfer instance
-     */
-
-  }]);
-
+  /**
+   * Construct the plugin
+   *
+   * @param {Object} params={} The plugin params (specific to the plugin)
+   * @param {Object} ws The wavesurfer instance
+   */
   function PluginClass(params, ws) {
     _classCallCheck(this, PluginClass);
   }
@@ -3601,6 +3760,20 @@ var PluginClass = /*#__PURE__*/function () {
 
 
   _createClass(PluginClass, [{
+    key: "create",
+    value:
+    /**
+     * Plugin definition factory
+     *
+     * This function must be used to create a plugin definition which can be
+     * used by wavesurfer to correctly instantiate the plugin.
+     *
+     * It returns a `PluginDefinition` object representing the plugin.
+     *
+     * @param {Object} params={} The plugin params (specific to the plugin)
+     */
+    function create(params) {}
+  }, {
     key: "init",
     value: function init() {}
     /**
@@ -3645,35 +3818,6 @@ var WaveSurfer = /*#__PURE__*/function (_util$Observer) {
 
   var _super = _createSuper(WaveSurfer);
 
-  _createClass(WaveSurfer, null, [{
-    key: "create",
-
-    /** @private */
-
-    /** @private */
-
-    /**
-     * Instantiate this class, call its `init` function and returns it
-     *
-     * @param {WavesurferParams} params The wavesurfer parameters
-     * @return {Object} WaveSurfer instance
-     * @example const wavesurfer = WaveSurfer.create(params);
-     */
-    value: function create(params) {
-      var wavesurfer = new WaveSurfer(params);
-      return wavesurfer.init();
-    }
-    /**
-     * The library version number is available as a static property of the
-     * WaveSurfer class
-     *
-     * @type {String}
-     * @example
-     * console.log('Using wavesurfer.js ' + WaveSurfer.VERSION);
-     */
-
-  }]);
-
   /**
    * Initialise wavesurfer instance
    *
@@ -3746,6 +3890,7 @@ var WaveSurfer = /*#__PURE__*/function (_util$Observer) {
         filterChannels: [],
         relativeNormalization: false
       },
+      vertical: false,
       waveColor: '#999',
       xhr: {}
     };
@@ -3787,9 +3932,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) {
@@ -5102,7 +5253,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
@@ -5125,13 +5277,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);
       });
     }
     /**
@@ -5257,13 +5412,40 @@ var WaveSurfer = /*#__PURE__*/function (_util$Observer) {
       this.isReady = false;
       this.arraybuffer = null;
     }
+  }], [{
+    key: "create",
+    value:
+    /** @private */
+
+    /** @private */
+
+    /**
+     * Instantiate this class, call its `init` function and returns it
+     *
+     * @param {WavesurferParams} params The wavesurfer parameters
+     * @return {Object} WaveSurfer instance
+     * @example const wavesurfer = WaveSurfer.create(params);
+     */
+    function create(params) {
+      var wavesurfer = new WaveSurfer(params);
+      return wavesurfer.init();
+    }
+    /**
+     * The library version number is available as a static property of the
+     * WaveSurfer class
+     *
+     * @type {String}
+     * @example
+     * console.log('Using wavesurfer.js ' + WaveSurfer.VERSION);
+     */
+
   }]);
 
   return WaveSurfer;
 }(util.Observer);
 
 exports.default = WaveSurfer;
-WaveSurfer.VERSION = "4.5.0";
+WaveSurfer.VERSION = "5.1.0";
 WaveSurfer.util = util;
 module.exports = exports.default;
 
@@ -5287,9 +5469,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; }
 
@@ -5309,7 +5491,7 @@ function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) ===
 
 function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
 
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 
 function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
 
@@ -5328,65 +5510,11 @@ var WebAudio = /*#__PURE__*/function (_util$Observer) {
 
   var _super = _createSuper(WebAudio);
 
-  _createClass(WebAudio, [{
-    key: "supportsWebAudio",
-
-    /** scriptBufferSize: size of the processing buffer */
-
-    /** audioContext: allows to process audio with WebAudio API */
-
-    /** @private */
-
-    /** @private */
-
-    /**
-     * Does the browser support this backend
-     *
-     * @return {boolean} Whether or not this browser supports this backend
-     */
-    value: function supportsWebAudio() {
-      return !!(window.AudioContext || window.webkitAudioContext);
-    }
-    /**
-     * Get the audio context used by this backend or create one
-     *
-     * @return {AudioContext} Existing audio context, or creates a new one
-     */
-
-  }, {
-    key: "getAudioContext",
-    value: function getAudioContext() {
-      if (!window.WaveSurferAudioContext) {
-        window.WaveSurferAudioContext = new (window.AudioContext || window.webkitAudioContext)();
-      }
-
-      return window.WaveSurferAudioContext;
-    }
-    /**
-     * Get the offline audio context used by this backend or create one
-     *
-     * @param {number} sampleRate The sample rate to use
-     * @return {OfflineAudioContext} Existing offline audio context, or creates
-     * a new one
-     */
-
-  }, {
-    key: "getOfflineAudioContext",
-    value: function getOfflineAudioContext(sampleRate) {
-      if (!window.WaveSurferOfflineAudioContext) {
-        window.WaveSurferOfflineAudioContext = new (window.OfflineAudioContext || window.webkitOfflineAudioContext)(1, 2, sampleRate);
-      }
-
-      return window.WaveSurferOfflineAudioContext;
-    }
-    /**
-     * Construct the backend
-     *
-     * @param {WavesurferParams} params Wavesurfer parameters
-     */
-
-  }]);
-
+  /**
+   * Construct the backend
+   *
+   * @param {WavesurferParams} params Wavesurfer parameters
+   */
   function WebAudio(params) {
     var _this$stateBehaviors, _this$states;
 
@@ -5501,6 +5629,57 @@ var WebAudio = /*#__PURE__*/function (_util$Observer) {
 
 
   _createClass(WebAudio, [{
+    key: "supportsWebAudio",
+    value:
+    /** scriptBufferSize: size of the processing buffer */
+
+    /** audioContext: allows to process audio with WebAudio API */
+
+    /** @private */
+
+    /** @private */
+
+    /**
+     * Does the browser support this backend
+     *
+     * @return {boolean} Whether or not this browser supports this backend
+     */
+    function supportsWebAudio() {
+      return !!(window.AudioContext || window.webkitAudioContext);
+    }
+    /**
+     * Get the audio context used by this backend or create one
+     *
+     * @return {AudioContext} Existing audio context, or creates a new one
+     */
+
+  }, {
+    key: "getAudioContext",
+    value: function getAudioContext() {
+      if (!window.WaveSurferAudioContext) {
+        window.WaveSurferAudioContext = new (window.AudioContext || window.webkitAudioContext)();
+      }
+
+      return window.WaveSurferAudioContext;
+    }
+    /**
+     * Get the offline audio context used by this backend or create one
+     *
+     * @param {number} sampleRate The sample rate to use
+     * @return {OfflineAudioContext} Existing offline audio context, or creates
+     * a new one
+     */
+
+  }, {
+    key: "getOfflineAudioContext",
+    value: function getOfflineAudioContext(sampleRate) {
+      if (!window.WaveSurferOfflineAudioContext) {
+        window.WaveSurferOfflineAudioContext = new (window.OfflineAudioContext || window.webkitOfflineAudioContext)(1, 2, sampleRate);
+      }
+
+      return window.WaveSurferOfflineAudioContext;
+    }
+  }, {
     key: "init",
     value: function init() {
       this.createVolumeNode();
@@ -5622,7 +5801,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 */
 
@@ -5721,17 +5900,18 @@ var WebAudio = /*#__PURE__*/function (_util$Observer) {
         this.offlineAc = this.getOfflineAudioContext(this.ac && this.ac.sampleRate ? this.ac.sampleRate : 44100);
       }
 
-      if ('AudioContext' in window) {
+      if ('webkitAudioContext' in window) {
+        // Safari: no support for Promise-based decodeAudioData enabled
+        // Enable it in Safari using the Experimental Features > Modern WebAudio API option
+        this.offlineAc.decodeAudioData(arraybuffer, function (data) {
+          return callback(data);
+        }, errback);
+      } else {
         this.offlineAc.decodeAudioData(arraybuffer).then(function (data) {
           return callback(data);
         }).catch(function (err) {
           return errback(err);
         });
-      } else {
-        // Safari: no support for Promise-based decodeAudioData yet
-        this.offlineAc.decodeAudioData(arraybuffer, function (data) {
-          return callback(data);
-        }, errback);
       }
     }
     /**
@@ -6251,8 +6431,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] = {
@@ -6269,10 +6450,13 @@ module.exports = debounce;
 /******/ 	}
 /******/ 	
 /************************************************************************/
-/******/ 	// module exports must be returned from runtime so entry inlining is disabled
+/******/ 	
 /******/ 	// startup
 /******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__("./src/wavesurfer.js");
+/******/ 	// This entry module is referenced by other modules so it can't be inlined
+/******/ 	var __webpack_exports__ = __webpack_require__("./src/wavesurfer.js");
+/******/ 	
+/******/ 	return __webpack_exports__;
 /******/ })()
 ;
 });