wavesurfer.js 6.6.0 → 6.6.2

package/README.md

@@ -8,7 +8,9 @@ Interactive navigable audio visualization using Web Audio and Canvas.
 
 [![Screenshot](https://raw.githubusercontent.com/wavesurfer-js/wavesurfer.js/gh-pages/example/screenshot.png "Screenshot")](https://wavesurfer-js.org)
 
-See a [tutorial](https://wavesurfer-js.org/docs) and [examples](https://wavesurfer-js.org/examples) on [wavesurfer-js.org](https://wavesurfer-js.org).
+See [docs](https://wavesurfer-js.org/docs) and [examples](https://wavesurfer-js.org/examples) on [wavesurfer-js.org](https://wavesurfer-js.org).
+
+For a video tutorial, watch this [series by Live Blogger on YouTube](https://www.youtube.com/watch?v=yCmnDWCF8m0). 📺
 
 ## Questions
 Have a question about integrating wavesurfer.js on your website? Feel free to ask in our forum: https://github.com/wavesurfer-js/wavesurfer.js/discussions/categories/q-a

package/dist/plugin/wavesurfer.cursor.js

@@ -1,5 +1,5 @@
 /*!
- * wavesurfer.js cursor plugin 6.6.0 (2023-03-14)
+ * wavesurfer.js cursor plugin 6.6.2 (2023-03-26)
  * https://wavesurfer-js.org
  * @license BSD-3-Clause
  */

package/dist/plugin/wavesurfer.cursor.min.js

@@ -1,5 +1,5 @@
 /*!
- * wavesurfer.js cursor plugin 6.6.0 (2023-03-14)
+ * wavesurfer.js cursor plugin 6.6.2 (2023-03-26)
  * https://wavesurfer-js.org
  * @license BSD-3-Clause
  */

package/dist/plugin/wavesurfer.elan.js

@@ -1,5 +1,5 @@
 /*!
- * wavesurfer.js elan plugin 6.6.0 (2023-03-14)
+ * wavesurfer.js elan plugin 6.6.2 (2023-03-26)
  * https://wavesurfer-js.org
  * @license BSD-3-Clause
  */

package/dist/plugin/wavesurfer.elan.min.js

@@ -1,5 +1,5 @@
 /*!
- * wavesurfer.js elan plugin 6.6.0 (2023-03-14)
+ * wavesurfer.js elan plugin 6.6.2 (2023-03-26)
  * https://wavesurfer-js.org
  * @license BSD-3-Clause
  */

package/dist/plugin/wavesurfer.markers.js

@@ -1,5 +1,5 @@
 /*!
- * wavesurfer.js markers plugin 6.6.0 (2023-03-14)
+ * wavesurfer.js markers plugin 6.6.2 (2023-03-26)
  * https://wavesurfer-js.org
  * @license BSD-3-Clause
  */

package/dist/plugin/wavesurfer.markers.min.js

@@ -1,5 +1,5 @@
 /*!
- * wavesurfer.js markers plugin 6.6.0 (2023-03-14)
+ * wavesurfer.js markers plugin 6.6.2 (2023-03-26)
  * https://wavesurfer-js.org
  * @license BSD-3-Clause
  */

package/dist/plugin/wavesurfer.mediasession.js

@@ -1,5 +1,5 @@
 /*!
- * wavesurfer.js mediasession plugin 6.6.0 (2023-03-14)
+ * wavesurfer.js mediasession plugin 6.6.2 (2023-03-26)
  * https://wavesurfer-js.org
  * @license BSD-3-Clause
  */

package/dist/plugin/wavesurfer.mediasession.min.js

@@ -1,5 +1,5 @@
 /*!
- * wavesurfer.js mediasession plugin 6.6.0 (2023-03-14)
+ * wavesurfer.js mediasession plugin 6.6.2 (2023-03-26)
  * https://wavesurfer-js.org
  * @license BSD-3-Clause
  */

package/dist/plugin/wavesurfer.microphone.js

@@ -1,5 +1,5 @@
 /*!
- * wavesurfer.js microphone plugin 6.6.0 (2023-03-14)
+ * wavesurfer.js microphone plugin 6.6.2 (2023-03-26)
  * https://wavesurfer-js.org
  * @license BSD-3-Clause
  */

package/dist/plugin/wavesurfer.microphone.min.js

@@ -1,5 +1,5 @@
 /*!
- * wavesurfer.js microphone plugin 6.6.0 (2023-03-14)
+ * wavesurfer.js microphone plugin 6.6.2 (2023-03-26)
  * https://wavesurfer-js.org
  * @license BSD-3-Clause
  */

package/dist/plugin/wavesurfer.minimap.js

@@ -1,5 +1,5 @@
 /*!
- * wavesurfer.js minimap plugin 6.6.0 (2023-03-14)
+ * wavesurfer.js minimap plugin 6.6.2 (2023-03-26)
  * https://wavesurfer-js.org
  * @license BSD-3-Clause
  */

package/dist/plugin/wavesurfer.minimap.min.js

@@ -1,5 +1,5 @@
 /*!
- * wavesurfer.js minimap plugin 6.6.0 (2023-03-14)
+ * wavesurfer.js minimap plugin 6.6.2 (2023-03-26)
  * https://wavesurfer-js.org
  * @license BSD-3-Clause
  */

package/dist/plugin/wavesurfer.playhead.js

@@ -1,5 +1,5 @@
 /*!
- * wavesurfer.js playhead plugin 6.6.0 (2023-03-14)
+ * wavesurfer.js playhead plugin 6.6.2 (2023-03-26)
  * https://wavesurfer-js.org
  * @license BSD-3-Clause
  */

package/dist/plugin/wavesurfer.playhead.min.js

@@ -1,5 +1,5 @@
 /*!
- * wavesurfer.js playhead plugin 6.6.0 (2023-03-14)
+ * wavesurfer.js playhead plugin 6.6.2 (2023-03-26)
  * https://wavesurfer-js.org
  * @license BSD-3-Clause
  */

package/dist/plugin/wavesurfer.regions.js

@@ -1,5 +1,5 @@
 /*!
- * wavesurfer.js regions plugin 6.6.0 (2023-03-14)
+ * wavesurfer.js regions plugin 6.6.2 (2023-03-26)
  * https://wavesurfer-js.org
  * @license BSD-3-Clause
  */

package/dist/plugin/wavesurfer.regions.min.js

@@ -1,5 +1,5 @@
 /*!
- * wavesurfer.js regions plugin 6.6.0 (2023-03-14)
+ * wavesurfer.js regions plugin 6.6.2 (2023-03-26)
  * https://wavesurfer-js.org
  * @license BSD-3-Clause
  */

package/dist/plugin/wavesurfer.spectrogram.js

@@ -1,5 +1,5 @@
 /*!
- * wavesurfer.js spectrogram plugin 6.6.0 (2023-03-14)
+ * wavesurfer.js spectrogram plugin 6.6.2 (2023-03-26)
  * https://wavesurfer-js.org
  * @license BSD-3-Clause
  */
@@ -284,9 +284,6 @@ var SpectrogramPlugin = /*#__PURE__*/function () {
     this._onRender = function () {
       _this.render();
     };
-    this._onZoom = function () {
-      _this.stretchCanvases();
-    };
     this._onWrapperClick = function (e) {
       _this._wrapperClickHandler(e);
     };
@@ -323,19 +320,15 @@ var SpectrogramPlugin = /*#__PURE__*/function () {
       _this.alpha = params.alpha;
       _this.splitChannels = params.splitChannels;
       _this.channels = _this.splitChannels ? ws.backend.buffer.numberOfChannels : 1;
-      _this.canvases = [];
-      _this.canvasesTimeouts = [];
-      _this.scrollLeftTracker = 0; //Tracks the desired scrollLeft value
 
       // Getting file's original samplerate is difficult(#1248).
       // So set 12kHz default to render like wavesurfer.js 5.x.
       _this.frequencyMin = params.frequencyMin || 0;
       _this.frequencyMax = params.frequencyMax || 12000;
       _this.createWrapper();
-      _this.addCanvas();
+      _this.createCanvas();
       _this.render();
       drawer.wrapper.addEventListener('scroll', _this._onScroll);
-      ws.on('zoom', _this._onZoom);
       ws.on('redraw', _this._onRender);
     };
   }
@@ -411,49 +404,15 @@ var SpectrogramPlugin = /*#__PURE__*/function () {
       var relX = 'offsetX' in event ? event.offsetX : event.layerX;
       this.fireEvent('click', relX / this.width || 0);
     }
-
-    /**
-     * Add a canvas to this.canvases
-     */
   }, {
-    key: "addCanvas",
-    value: function addCanvas() {
-      var canvas = this.wrapper.appendChild(document.createElement('canvas'));
+    key: "createCanvas",
+    value: function createCanvas() {
+      var canvas = this.canvas = this.wrapper.appendChild(document.createElement('canvas'));
+      this.spectrCc = canvas.getContext('2d');
       this.util.style(canvas, {
         position: 'absolute',
         zIndex: 4
       });
-      this.canvases.push(canvas);
-      this.canvasesTimeouts.push(null);
-    }
-
-    /**
-     * Remove a canvas from this.canvases
-     */
-  }, {
-    key: "removeCanvas",
-    value: function removeCanvas() {
-      //Stop drawing (if drawing)
-      clearTimeout(this.canvasesTimeouts[this.canvasesTimeouts.length - 1]);
-      var lastEntry = this.canvases[this.canvases.length - 1];
-      lastEntry.parentElement.removeChild(lastEntry);
-      this.canvases.pop();
-      this.canvasesTimeouts.pop();
-    }
-
-    /**
-     * Ensure the correct number of canvases for the size of the spectrogram
-     */
-  }, {
-    key: "updateCanvases",
-    value: function updateCanvases() {
-      var canvasesRequired = Math.ceil(this.width / 4000);
-      while (this.canvases.length < canvasesRequired) {
-        this.addCanvas();
-      }
-      while (this.canvases.length > canvasesRequired) {
-        this.removeCanvas();
-      }
     }
   }, {
     key: "render",
@@ -468,14 +427,11 @@ var SpectrogramPlugin = /*#__PURE__*/function () {
   }, {
     key: "updateCanvasStyle",
     value: function updateCanvasStyle() {
-      this.updateCanvases();
-      //width per canvas
-      for (var i = 0; i < this.canvases.length; i++) {
-        this.canvases[i].width = Math.round(this.width / this.canvases.length);
-        this.canvases[i].height = this.fftSamples / 2 * this.channels;
-        this.canvases[i].style.width = Math.round(this.canvases[i].width / this.pixelRatio) + 'px';
-        this.canvases[i].style.height = this.height + 'px';
-      }
+      var width = Math.round(this.width / this.pixelRatio) + 'px';
+      this.canvas.width = this.width;
+      this.canvas.height = this.fftSamples / 2 * this.channels;
+      this.canvas.style.width = width;
+      this.canvas.style.height = this.height + 'px';
     }
   }, {
     key: "drawSpectrogram",
@@ -485,58 +441,23 @@ var SpectrogramPlugin = /*#__PURE__*/function () {
         // to [channel, sample, freq] format
         frequenciesData = [frequenciesData];
       }
-      my.updateCanvasStyle();
-
-      //Stop canvases still being drawn
-      for (var i = 0; i < my.canvasesTimeouts.length; i++) {
-        clearTimeout(my.canvasesTimeouts[i]);
-      }
-      var view = [my.scrollLeftTracker, my.scrollLeftTracker + my.wrapper.clientWidth];
-      for (var canvasNum = 0; canvasNum < my.canvases.length; canvasNum++) {
-        var canvasLeft = canvasNum * Math.floor(my.width / my.canvases.length / my.pixelRatio);
-        var canvasRight = (canvasNum + 1) * Math.floor(my.width / my.canvases.length / my.pixelRatio);
-        var canvasBound = [canvasLeft, canvasRight];
-        my.canvases[canvasNum].style['left'] = canvasLeft + 'px';
-
-        //Optimise drawing for the view
-        var priority = 0;
-        if (canvasBound[0] > view[1]) {
-          //Canvas is to the right of view window
-          var distance = canvasBound[0] - view[1];
-          priority = Math.ceil(distance / (view[1] - view[0]));
-        } else if (canvasBound[1] < view[0]) {
-          //Canvas is to the left of the view window
-          var _distance = view[0] - canvasBound[1];
-          priority = Math.ceil(_distance / (view[1] - view[0]));
-        }
-
-        //delay = 25ms * number of viewport widths away the canvas is
-        my.canvasesTimeouts[canvasNum] = setTimeout(my.drawToCanvas, 25 * priority, frequenciesData, my, canvasNum);
-      }
-    }
-
-    /**
-     * Draw spectrogram channel to a specific canvas
-     * @param {[Number, Number, Number]} frequenciesData spectrogram data in [channel, sample, freq] format
-     * @param {SpectrogramPlugin} my variable with 'this' in it
-     * @param {Number} canvasNum Canvas to draw to
-     */
-  }, {
-    key: "drawToCanvas",
-    value: function drawToCanvas(frequenciesData, my, canvasNum) {
+      var spectrCc = my.spectrCc;
       var height = my.fftSamples / 2;
+      var width = my.width;
       var freqFrom = my.buffer.sampleRate / 2;
       var freqMin = my.frequencyMin;
       var freqMax = my.frequencyMax;
-      var _loop = function _loop(channel) {
-        //Get pixels from frequency data and apply to image
-        var relevantFreqs = frequenciesData[channel].slice(canvasNum * Math.round(frequenciesData[channel].length / my.canvases.length), (canvasNum + 1) * Math.round(frequenciesData[channel].length / my.canvases.length));
-        var pixels = my.resample(relevantFreqs);
-        var imageData = new ImageData(pixels.length, height);
+      if (!spectrCc) {
+        return;
+      }
+      var _loop = function _loop(c) {
+        // for each channel
+        var pixels = my.resample(frequenciesData[c]);
+        var imageData = new ImageData(width, height);
         for (var i = 0; i < pixels.length; i++) {
           for (var j = 0; j < pixels[i].length; j++) {
             var colorMap = my.colorMap[pixels[i][j]];
-            var redIndex = ((height - j) * imageData.width + i) * 4;
+            var redIndex = ((height - j) * width + i) * 4;
             imageData.data[redIndex] = colorMap[0] * 255;
             imageData.data[redIndex + 1] = colorMap[1] * 255;
             imageData.data[redIndex + 2] = colorMap[2] * 255;
@@ -544,26 +465,21 @@ var SpectrogramPlugin = /*#__PURE__*/function () {
           }
         }
 
-        //Draw image to canvas
+        // scale and stack spectrograms
         createImageBitmap(imageData).then(function (renderer) {
-          if (my.canvases[canvasNum]) {
-            //Check canvas still exists after creating image
-            my.canvases[canvasNum].getContext('2d').drawImage(renderer, 0, height * (1 - freqMax / freqFrom),
-            // source x, y
-            imageData.width, height * (freqMax - freqMin) / freqFrom,
-            // source width, height
-            0, height * channel,
-            // destination x, y
-            my.canvases[canvasNum].width, height // destination width, height
-            );
-          }
+          return spectrCc.drawImage(renderer, 0, height * (1 - freqMax / freqFrom),
+          // source x, y
+          width, height * (freqMax - freqMin) / freqFrom,
+          // source width, height
+          0, height * c,
+          // destination x, y
+          width, height // destination width, height
+          );
         });
       };
-      for (var channel = 0; channel < frequenciesData.length; channel++) {
-        _loop(channel);
+      for (var c = 0; c < frequenciesData.length; c++) {
+        _loop(c);
       }
-      //Drawing is finished
-      my.canvasesTimeouts[canvasNum] = null;
     }
   }, {
     key: "getFrequencies",
@@ -581,7 +497,7 @@ var SpectrogramPlugin = /*#__PURE__*/function () {
       var frequencies = [];
       var noverlap = this.noverlap;
       if (!noverlap) {
-        var uniqueSamplesPerPx = buffer.length / this.width;
+        var uniqueSamplesPerPx = buffer.length / this.canvas.width;
         noverlap = Math.max(0, Math.round(fftSamples - uniqueSamplesPerPx));
       }
       var fft = new _fft.default(fftSamples, sampleRate, this.windowFunc, this.alpha);
@@ -707,14 +623,13 @@ var SpectrogramPlugin = /*#__PURE__*/function () {
     key: "updateScroll",
     value: function updateScroll(e) {
       if (this.wrapper) {
-        this.scrollLeftTracker = e.target.scrollLeft;
         this.wrapper.scrollLeft = e.target.scrollLeft;
       }
     }
   }, {
     key: "resample",
     value: function resample(oldMatrix) {
-      var columnsNumber = oldMatrix.length;
+      var columnsNumber = this.width;
       var newMatrix = [];
       var oldPiece = 1 / oldMatrix.length;
       var newPiece = 1 / columnsNumber;
@@ -750,15 +665,6 @@ var SpectrogramPlugin = /*#__PURE__*/function () {
       }
       return newMatrix;
     }
-  }, {
-    key: "stretchCanvases",
-    value: function stretchCanvases() {
-      for (var i = 0; i < this.canvases.length; i++) {
-        this.canvases[i].style.width = Math.round(this.drawer.width / this.canvases.length / this.pixelRatio) + 'px';
-        var canvasLeft = i * Math.floor(this.drawer.width / this.canvases.length / this.pixelRatio);
-        this.canvases[i].style['left'] = canvasLeft + 'px';
-      }
-    }
   }], [{
     key: "create",
     value: