wavesurfer.js 6.2.0 → 6.4.0

package/dist/plugin/wavesurfer.spectrogram.js

@@ -1,5 +1,5 @@
 /*!
- * wavesurfer.js spectrogram plugin 6.2.0 (2022-05-16)
+ * wavesurfer.js spectrogram plugin 6.4.0 (2022-11-05)
  * https://wavesurfer-js.org
  * @license BSD-3-Clause
  */
@@ -29,7 +29,6 @@ Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
 exports["default"] = FFT;
-
 /* eslint-disable complexity, no-redeclare, no-var, one-var */
 
 /**
@@ -51,153 +50,118 @@ function FFT(bufferSize, sampleRate, windowFunc, alpha) {
   this.peakBand = 0;
   this.peak = 0;
   var i;
-
   switch (windowFunc) {
     case 'bartlett':
       for (i = 0; i < bufferSize; i++) {
         this.windowValues[i] = 2 / (bufferSize - 1) * ((bufferSize - 1) / 2 - Math.abs(i - (bufferSize - 1) / 2));
       }
-
       break;
-
     case 'bartlettHann':
       for (i = 0; i < bufferSize; i++) {
         this.windowValues[i] = 0.62 - 0.48 * Math.abs(i / (bufferSize - 1) - 0.5) - 0.38 * Math.cos(Math.PI * 2 * i / (bufferSize - 1));
       }
-
       break;
-
     case 'blackman':
       alpha = alpha || 0.16;
-
       for (i = 0; i < bufferSize; i++) {
         this.windowValues[i] = (1 - alpha) / 2 - 0.5 * Math.cos(Math.PI * 2 * i / (bufferSize - 1)) + alpha / 2 * Math.cos(4 * Math.PI * i / (bufferSize - 1));
       }
-
       break;
-
     case 'cosine':
       for (i = 0; i < bufferSize; i++) {
         this.windowValues[i] = Math.cos(Math.PI * i / (bufferSize - 1) - Math.PI / 2);
       }
-
       break;
-
     case 'gauss':
       alpha = alpha || 0.25;
-
       for (i = 0; i < bufferSize; i++) {
         this.windowValues[i] = Math.pow(Math.E, -0.5 * Math.pow((i - (bufferSize - 1) / 2) / (alpha * (bufferSize - 1) / 2), 2));
       }
-
       break;
-
     case 'hamming':
       for (i = 0; i < bufferSize; i++) {
         this.windowValues[i] = 0.54 - 0.46 * Math.cos(Math.PI * 2 * i / (bufferSize - 1));
       }
-
       break;
-
     case 'hann':
     case undefined:
       for (i = 0; i < bufferSize; i++) {
         this.windowValues[i] = 0.5 * (1 - Math.cos(Math.PI * 2 * i / (bufferSize - 1)));
       }
-
       break;
-
     case 'lanczoz':
       for (i = 0; i < bufferSize; i++) {
         this.windowValues[i] = Math.sin(Math.PI * (2 * i / (bufferSize - 1) - 1)) / (Math.PI * (2 * i / (bufferSize - 1) - 1));
       }
-
       break;
-
     case 'rectangular':
       for (i = 0; i < bufferSize; i++) {
         this.windowValues[i] = 1;
       }
-
       break;
-
     case 'triangular':
       for (i = 0; i < bufferSize; i++) {
         this.windowValues[i] = 2 / bufferSize * (bufferSize / 2 - Math.abs(i - (bufferSize - 1) / 2));
       }
-
       break;
-
     default:
       throw Error("No such window function '" + windowFunc + "'");
   }
-
   var limit = 1;
   var bit = bufferSize >> 1;
   var i;
-
   while (limit < bufferSize) {
     for (i = 0; i < limit; i++) {
       this.reverseTable[i + limit] = this.reverseTable[i] + bit;
     }
-
     limit = limit << 1;
     bit = bit >> 1;
   }
-
   for (i = 0; i < bufferSize; i++) {
     this.sinTable[i] = Math.sin(-Math.PI / i);
     this.cosTable[i] = Math.cos(-Math.PI / i);
   }
-
   this.calculateSpectrum = function (buffer) {
     // Locally scope variables for speed up
     var bufferSize = this.bufferSize,
-        cosTable = this.cosTable,
-        sinTable = this.sinTable,
-        reverseTable = this.reverseTable,
-        real = new Float32Array(bufferSize),
-        imag = new Float32Array(bufferSize),
-        bSi = 2 / this.bufferSize,
-        sqrt = Math.sqrt,
-        rval,
-        ival,
-        mag,
-        spectrum = new Float32Array(bufferSize / 2);
+      cosTable = this.cosTable,
+      sinTable = this.sinTable,
+      reverseTable = this.reverseTable,
+      real = new Float32Array(bufferSize),
+      imag = new Float32Array(bufferSize),
+      bSi = 2 / this.bufferSize,
+      sqrt = Math.sqrt,
+      rval,
+      ival,
+      mag,
+      spectrum = new Float32Array(bufferSize / 2);
     var k = Math.floor(Math.log(bufferSize) / Math.LN2);
-
     if (Math.pow(2, k) !== bufferSize) {
       throw 'Invalid buffer size, must be a power of 2.';
     }
-
     if (bufferSize !== buffer.length) {
       throw 'Supplied buffer is not the same size as defined FFT. FFT Size: ' + bufferSize + ' Buffer Size: ' + buffer.length;
     }
-
     var halfSize = 1,
-        phaseShiftStepReal,
-        phaseShiftStepImag,
-        currentPhaseShiftReal,
-        currentPhaseShiftImag,
-        off,
-        tr,
-        ti,
-        tmpReal;
-
+      phaseShiftStepReal,
+      phaseShiftStepImag,
+      currentPhaseShiftReal,
+      currentPhaseShiftImag,
+      off,
+      tr,
+      ti,
+      tmpReal;
     for (var i = 0; i < bufferSize; i++) {
       real[i] = buffer[reverseTable[i]] * this.windowValues[reverseTable[i]];
       imag[i] = 0;
     }
-
     while (halfSize < bufferSize) {
       phaseShiftStepReal = cosTable[halfSize];
       phaseShiftStepImag = sinTable[halfSize];
       currentPhaseShiftReal = 1;
       currentPhaseShiftImag = 0;
-
       for (var fftStep = 0; fftStep < halfSize; fftStep++) {
         var i = fftStep;
-
         while (i < bufferSize) {
           off = i + halfSize;
           tr = currentPhaseShiftReal * real[off] - currentPhaseShiftImag * imag[off];
@@ -208,32 +172,25 @@ function FFT(bufferSize, sampleRate, windowFunc, alpha) {
           imag[i] += ti;
           i += halfSize << 1;
         }
-
         tmpReal = currentPhaseShiftReal;
         currentPhaseShiftReal = tmpReal * phaseShiftStepReal - currentPhaseShiftImag * phaseShiftStepImag;
         currentPhaseShiftImag = tmpReal * phaseShiftStepImag + currentPhaseShiftImag * phaseShiftStepReal;
       }
-
       halfSize = halfSize << 1;
     }
-
     for (var i = 0, N = bufferSize / 2; i < N; i++) {
       rval = real[i];
       ival = imag[i];
       mag = bSi * sqrt(rval * rval + ival * ival);
-
       if (mag > this.peak) {
         this.peakBand = i;
         this.peak = mag;
       }
-
       spectrum[i] = mag;
     }
-
     return spectrum;
   };
 }
-
 module.exports = exports.default;
 
 /***/ }),
@@ -250,17 +207,11 @@ Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
 exports["default"] = void 0;
-
 var _fft = _interopRequireDefault(__webpack_require__(/*! ./fft */ "./src/plugin/spectrogram/fft.js"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
-
 function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-
 /**
  * @typedef {Object} SpectrogramPluginParams
  * @property {string|HTMLElement} container Selector of element or element in
@@ -291,7 +242,6 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
  * Each entry should contain a float between 0 and 1 and specify
  * r, g, b, and alpha.
  */
-
 /**
  * Render a spectrogram visualisation of the audio.
  *
@@ -320,58 +270,44 @@ function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _d
 var SpectrogramPlugin = /*#__PURE__*/function () {
   function SpectrogramPlugin(params, ws) {
     var _this = this;
-
     _classCallCheck(this, SpectrogramPlugin);
-
     this.params = params;
     this.wavesurfer = ws;
     this.util = ws.util;
     this.frequenciesDataUrl = params.frequenciesDataUrl;
-
     this._onScroll = function (e) {
       _this.updateScroll(e);
     };
-
     this._onRender = function () {
       _this.render();
     };
-
     this._onWrapperClick = function (e) {
       _this._wrapperClickHandler(e);
     };
-
     this._onReady = function () {
       var drawer = _this.drawer = ws.drawer;
       _this.container = 'string' == typeof params.container ? document.querySelector(params.container) : params.container;
-
       if (!_this.container) {
         throw Error('No container for WaveSurfer spectrogram');
       }
-
       if (params.colorMap) {
         if (params.colorMap.length < 256) {
           throw new Error('Colormap must contain 256 elements');
         }
-
         for (var i = 0; i < params.colorMap.length; i++) {
           var cmEntry = params.colorMap[i];
-
           if (cmEntry.length !== 4) {
             throw new Error('ColorMap entries must contain 4 values');
           }
         }
-
         _this.colorMap = params.colorMap;
       } else {
         _this.colorMap = [];
-
         for (var _i = 0; _i < 256; _i++) {
           var val = (255 - _i) / 256;
-
           _this.colorMap.push([val, val, val, 1]);
         }
       }
-
       _this.width = drawer.width;
       _this.pixelRatio = _this.params.pixelRatio || ws.params.pixelRatio;
       _this.fftSamples = _this.params.fftSamples || ws.params.fftSamples || 512;
@@ -380,23 +316,19 @@ var SpectrogramPlugin = /*#__PURE__*/function () {
       _this.windowFunc = params.windowFunc;
       _this.alpha = params.alpha;
       _this.splitChannels = params.splitChannels;
-      _this.channels = _this.splitChannels ? ws.backend.buffer.numberOfChannels : 1; // Getting file's original samplerate is difficult(#1248).
-      // So set 12kHz default to render like wavesurfer.js 5.x.
+      _this.channels = _this.splitChannels ? ws.backend.buffer.numberOfChannels : 1;
 
+      // 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.createCanvas();
-
       _this.render();
-
       drawer.wrapper.addEventListener('scroll', _this._onScroll);
       ws.on('redraw', _this._onRender);
     };
   }
-
   _createClass(SpectrogramPlugin, [{
     key: "init",
     value: function init() {
@@ -417,7 +349,6 @@ var SpectrogramPlugin = /*#__PURE__*/function () {
       this.wavesurfer = null;
       this.util = null;
       this.params = null;
-
       if (this.wrapper) {
         this.wrapper.removeEventListener('click', this._onWrapperClick);
         this.wrapper.parentNode.removeChild(this.wrapper);
@@ -428,19 +359,17 @@ var SpectrogramPlugin = /*#__PURE__*/function () {
     key: "createWrapper",
     value: function createWrapper() {
       var prevSpectrogram = this.container.querySelector('spectrogram');
-
       if (prevSpectrogram) {
         this.container.removeChild(prevSpectrogram);
       }
-
       var wsParams = this.wavesurfer.params;
-      this.wrapper = document.createElement('spectrogram'); // if labels are active
-
+      this.wrapper = document.createElement('spectrogram');
+      // if labels are active
       if (this.params.labels) {
         var labelsEl = this.labelsEl = document.createElement('canvas');
         labelsEl.classList.add('spec-labels');
         this.drawer.style(labelsEl, {
-          position: 'fixed',
+          position: 'absolute',
           zIndex: 9,
           height: "".concat(this.height * this.channels, "px"),
           width: "55px"
@@ -448,7 +377,6 @@ var SpectrogramPlugin = /*#__PURE__*/function () {
         this.wrapper.appendChild(labelsEl);
         this.loadLabels('rgba(68,68,68,0.5)', '12px', '10px', '', '#fff', '#f7f7f7', 'center', '#specLabels');
       }
-
       this.drawer.style(this.wrapper, {
         display: 'block',
         position: 'relative',
@@ -456,7 +384,6 @@ var SpectrogramPlugin = /*#__PURE__*/function () {
         webkitUserSelect: 'none',
         height: "".concat(this.height * this.channels, "px")
       });
-
       if (wsParams.fillParent || wsParams.scrollParent) {
         this.drawer.style(this.wrapper, {
           width: '100%',
@@ -464,7 +391,6 @@ var SpectrogramPlugin = /*#__PURE__*/function () {
           overflowY: 'hidden'
         });
       }
-
       this.container.appendChild(this.wrapper);
       this.wrapper.addEventListener('click', this._onWrapperClick);
     }
@@ -489,7 +415,6 @@ var SpectrogramPlugin = /*#__PURE__*/function () {
     key: "render",
     value: function render() {
       this.updateCanvasStyle();
-
       if (this.frequenciesDataUrl) {
         this.loadFrequenciesData(this.frequenciesDataUrl);
       } else {
@@ -513,23 +438,19 @@ var SpectrogramPlugin = /*#__PURE__*/function () {
         // to [channel, sample, freq] format
         frequenciesData = [frequenciesData];
       }
-
       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;
-
       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]];
@@ -539,18 +460,20 @@ var SpectrogramPlugin = /*#__PURE__*/function () {
             imageData.data[redIndex + 2] = colorMap[2] * 255;
             imageData.data[redIndex + 3] = colorMap[3] * 255;
           }
-        } // scale and stack spectrograms
-
+        }
 
+        // scale and stack spectrograms
         createImageBitmap(imageData).then(function (renderer) {
-          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
+          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 c = 0; c < frequenciesData.length; c++) {
         _loop(c);
       }
@@ -561,46 +484,40 @@ var SpectrogramPlugin = /*#__PURE__*/function () {
       var fftSamples = this.fftSamples;
       var buffer = this.buffer = this.wavesurfer.backend.buffer;
       var channels = this.channels;
-
       if (!buffer) {
         this.fireEvent('error', 'Web Audio buffer is not available');
         return;
-      } // This may differ from file samplerate. Browser resamples audio.
-
+      }
 
+      // This may differ from file samplerate. Browser resamples audio.
       var sampleRate = buffer.sampleRate;
       var frequencies = [];
       var noverlap = this.noverlap;
-
       if (!noverlap) {
         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);
-
       for (var c = 0; c < channels; c++) {
         // for each channel
         var channelData = buffer.getChannelData(c);
         var channelFreq = [];
         var currentOffset = 0;
-
         while (currentOffset + fftSamples < channelData.length) {
           var segment = channelData.slice(currentOffset, currentOffset + fftSamples);
           var spectrum = fft.calculateSpectrum(segment);
           var array = new Uint8Array(fftSamples / 2);
           var j = void 0;
-
           for (j = 0; j < fftSamples / 2; j++) {
             array[j] = Math.max(-255, Math.log10(spectrum[j]) * 45);
           }
-
-          channelFreq.push(array); // channelFreq: [sample, freq]
+          channelFreq.push(array);
+          // channelFreq: [sample, freq]
 
           currentOffset += fftSamples - noverlap;
         }
-
-        frequencies.push(channelFreq); // frequencies: [channel, sample, freq]
+        frequencies.push(channelFreq);
+        // frequencies: [channel, sample, freq]
       }
 
       callback(frequencies, this);
@@ -609,7 +526,6 @@ var SpectrogramPlugin = /*#__PURE__*/function () {
     key: "loadFrequenciesData",
     value: function loadFrequenciesData(url) {
       var _this2 = this;
-
       var request = this.util.fetchFile({
         url: url
       });
@@ -647,26 +563,26 @@ var SpectrogramPlugin = /*#__PURE__*/function () {
       var getMaxY = frequenciesHeight || 512;
       var labelIndex = 5 * (getMaxY / 256);
       var freqStart = this.frequencyMin;
-      var step = (this.frequencyMax - freqStart) / labelIndex; // prepare canvas element for labels
+      var step = (this.frequencyMax - freqStart) / labelIndex;
 
+      // prepare canvas element for labels
       var ctx = this.labelsEl.getContext('2d');
       var dispScale = window.devicePixelRatio;
       this.labelsEl.height = this.height * this.channels * dispScale;
       this.labelsEl.width = bgWidth * dispScale;
       ctx.scale(dispScale, dispScale);
-
       if (!ctx) {
         return;
       }
-
       for (var c = 0; c < this.channels; c++) {
         // for each channel
         // fill background
         ctx.fillStyle = bgFill;
         ctx.fillRect(0, c * getMaxY, bgWidth, (1 + c) * getMaxY);
         ctx.fill();
-        var i = void 0; // render labels
+        var i = void 0;
 
+        // render labels
         for (i = 0; i <= labelIndex; i++) {
           ctx.textAlign = textAlign;
           ctx.textBaseline = 'middle';
@@ -676,24 +592,23 @@ var SpectrogramPlugin = /*#__PURE__*/function () {
           var yLabelOffset = 2;
           var x = 16;
           var y = void 0;
-
           if (i == 0) {
-            y = (1 + c) * getMaxY + i - 10; // unit label
-
+            y = (1 + c) * getMaxY + i - 10;
+            // unit label
             ctx.fillStyle = textColorUnit;
             ctx.font = fontSizeUnit + ' ' + fontType;
-            ctx.fillText(units, x + 24, y); // freq label
-
+            ctx.fillText(units, x + 24, y);
+            // freq label
             ctx.fillStyle = textColorFreq;
             ctx.font = fontSizeFreq + ' ' + fontType;
             ctx.fillText(label, x, y);
           } else {
-            y = (1 + c) * getMaxY - i * 50 + yLabelOffset; // unit label
-
+            y = (1 + c) * getMaxY - i * 50 + yLabelOffset;
+            // unit label
             ctx.fillStyle = textColorUnit;
             ctx.font = fontSizeUnit + ' ' + fontType;
-            ctx.fillText(units, x + 24, y); // freq label
-
+            ctx.fillText(units, x + 24, y);
+            // freq label
             ctx.fillStyle = textColorFreq;
             ctx.font = fontSizeFreq + ' ' + fontType;
             ctx.fillText(label, x, y);
@@ -716,11 +631,9 @@ var SpectrogramPlugin = /*#__PURE__*/function () {
       var oldPiece = 1 / oldMatrix.length;
       var newPiece = 1 / columnsNumber;
       var i;
-
       for (i = 0; i < columnsNumber; i++) {
         var column = new Array(oldMatrix[0].length);
         var j = void 0;
-
         for (j = 0; j < oldMatrix.length; j++) {
           var oldStart = j * oldPiece;
           var oldEnd = oldStart + oldPiece;
@@ -729,30 +642,24 @@ var SpectrogramPlugin = /*#__PURE__*/function () {
           var overlap = oldEnd <= newStart || newEnd <= oldStart ? 0 : Math.min(Math.max(oldEnd, newStart), Math.max(newEnd, oldStart)) - Math.max(Math.min(oldEnd, newStart), Math.min(newEnd, oldStart));
           var k = void 0;
           /* eslint-disable max-depth */
-
           if (overlap > 0) {
             for (k = 0; k < oldMatrix[0].length; k++) {
               if (column[k] == null) {
                 column[k] = 0;
               }
-
               column[k] += overlap / newPiece * oldMatrix[j][k];
             }
           }
           /* eslint-enable max-depth */
-
         }
 
         var intColumn = new Uint8Array(oldMatrix[0].length);
         var m = void 0;
-
         for (m = 0; m < oldMatrix[0].length; m++) {
           intColumn[m] = column[m];
         }
-
         newMatrix.push(intColumn);
       }
-
       return newMatrix;
     }
   }], [{
@@ -779,10 +686,8 @@ var SpectrogramPlugin = /*#__PURE__*/function () {
       };
     }
   }]);
-
   return SpectrogramPlugin;
 }();
-
 exports["default"] = SpectrogramPlugin;
 module.exports = exports.default;