wavesurfer.js 6.0.3 → 6.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wavesurfer.js",
-  "version": "6.0.3",
+  "version": "6.2.0",
   "description": "Interactive navigable audio visualization using Web Audio and Canvas",
   "main": "dist/wavesurfer.js",
   "directories": {
@@ -55,13 +55,13 @@
     "visualization"
   ],
   "devDependencies": {
-    "@babel/core": "^7.17.5",
+    "@babel/core": "^7.17.8",
     "@babel/eslint-parser": "^7.17.0",
     "@babel/plugin-proposal-class-properties": "^7.16.7",
     "@babel/preset-env": "^7.16.11",
-    "@babel/register": "^7.17.0",
+    "@babel/register": "^7.17.7",
     "@chiragrupani/karma-chromium-edge-launcher": "^2.2.1",
-    "babel-loader": "^8.2.3",
+    "babel-loader": "^8.2.4",
     "babel-plugin-add-module-exports": "^1.0.4",
     "babel-plugin-istanbul": "^6.1.1",
     "babel-plugin-proxy": "^1.1.0",
@@ -74,22 +74,22 @@
     "esdoc-ecmascript-proposal-plugin": "^1.0.0",
     "esdoc-integrate-test-plugin": "^1.0.0",
     "esdoc-standard-plugin": "^1.0.0",
-    "eslint": "^8.10.0",
+    "eslint": "^8.11.0",
     "htmlhint": "^1.1.2",
     "in-publish": "^2.0.1",
     "jasmine-core": "^4.0.1",
     "karma": "^6.3.17",
-    "karma-chrome-launcher": "3.1.0",
+    "karma-chrome-launcher": "3.1.1",
     "karma-coverage": "^2.2.0",
     "karma-firefox-launcher": "^2.1.2",
     "karma-jasmine": "4.0.1",
     "karma-jasmine-matchers": "5.0.0",
     "karma-verbose-reporter": "0.0.8",
     "karma-webpack": "^5.0.0",
-    "lint-staged": "^12.3.4",
+    "lint-staged": "^12.3.7",
     "load-script": "^2.0.0",
     "pre-commit": "^1.2.2",
-    "webpack": "^5.69.1",
+    "webpack": "^5.70.0",
     "webpack-cli": "^4.9.2",
     "webpack-dev-server": "^4.7.4",
     "webpack-merge": "^5.8.0"

package/src/plugin/cursor/index.js

@@ -90,7 +90,8 @@ export default class CursorPlugin {
         const bbox = this.wrapper.getBoundingClientRect();
         let y = 0;
         let x = this.wrapper.scrollLeft + event.clientX - bbox.left;
-        let flip = bbox.right < event.clientX + this.displayTime.getBoundingClientRect().width;
+        const displayTimeWidth = this.displayTime ? this.displayTime.getBoundingClientRect().width : 0;
+        let flip = bbox.right < event.clientX + displayTimeWidth;
 
         if (this.params.showTime && this.params.followCursorY) {
             // follow y-position of the mouse

package/src/plugin/mediasession/index.js

@@ -1,5 +1,3 @@
-/*global MediaMetadata*/
-
 /**
  * @typedef {Object} MediaSessionPluginParams
  * @property {MediaMetadata} metadata A MediaMetadata object: a representation

package/src/plugin/minimap/index.js

@@ -96,6 +96,7 @@ export default class MinimapPlugin {
         this.drawer = new ws.Drawer(this.params.container, this.params);
         this.wavesurfer = ws;
         this.util = ws.util;
+        this.cleared = false;
         this.renderEvent = 'redraw';
         this.overviewRegion = null;
         this.regionsPlugin = this.wavesurfer[this.params.regionsPluginName];
@@ -119,7 +120,7 @@ export default class MinimapPlugin {
             }
 
             if (this.regionsPlugin && this.params.showRegions) {
-                this.regions();
+                this.drawRegions();
             }
             this.render();
         };
@@ -154,6 +155,18 @@ export default class MinimapPlugin {
                 );
             }
         });
+        this._onLoading = percent => {
+            if (percent >= 100) {
+                this.cleared = false;
+                return;
+            }
+            if (this.cleared === true) {
+                return;
+            }
+            const len = this.drawer.getWidth();
+            this.drawer.drawPeaks([0], len, 0, len);
+            this.cleared = true;
+        };
         this._onZoom = e => {
             this.render();
         };
@@ -179,12 +192,13 @@ export default class MinimapPlugin {
         this.wavesurfer.un('scroll', this._onScroll);
         this.wavesurfer.un('audioprocess', this._onAudioprocess);
         this.wavesurfer.un('zoom', this._onZoom);
+        this.wavesurfer.un('loading', this._onLoading);
         this.drawer.destroy();
         this.overviewRegion = null;
         this.unAll();
     }
 
-    regions() {
+    drawRegions() {
         this.regions = {};
 
         this.wavesurfer.on('region-created', region => {
@@ -267,6 +281,7 @@ export default class MinimapPlugin {
         window.addEventListener('orientationchange', this._onResize, true);
         this.wavesurfer.on('audioprocess', this._onAudioprocess);
         this.wavesurfer.on('seek', this._onSeek);
+        this.wavesurfer.on('loading', this._onLoading);
         if (this.params.showOverview) {
             this.wavesurfer.on('scroll', this._onScroll);
             this.wavesurfer.drawer.wrapper.addEventListener(

package/src/plugin/spectrogram/index.js

@@ -10,6 +10,8 @@ import FFT from './fft';
  * a power of 2.
  * @property {boolean} splitChannels=false Render with separate spectrograms for
  * the channels of the audio
+ * @property {number} height=fftSamples/2 Height of the spectrogram view in CSS
+ * pixels
  * @property {boolean} labels Set to true to display frequency labels.
  * @property {number} noverlap Size of the overlapping window. Must be <
  * fftSamples. Auto deduced from canvas size by default.
@@ -21,6 +23,9 @@ import FFT from './fft';
  * @property {number} pixelRatio=wavesurfer.params.pixelRatio to control the
  * size of the spectrogram in relation with its canvas. 1 = Draw on the whole
  * canvas. 2 = Draw on a quarter (1/2 the length and 1/2 the width)
+ * @property {number} frequencyMin=0 Min frequency to scale spectrogram.
+ * @property {number} frequencyMax=12000 Max frequency to scale spectrogram.
+ * Set this to samplerate/2 to draw whole range of spectrogram.
  * @property {?boolean} deferInit Set to true to manually call
  * `initPlugin('spectrogram')`
  * @property {?number[][]} colorMap A 256 long array of 4-element arrays.
@@ -125,13 +130,18 @@ export default class SpectrogramPlugin {
             this.pixelRatio = this.params.pixelRatio || ws.params.pixelRatio;
             this.fftSamples =
                 this.params.fftSamples || ws.params.fftSamples || 512;
-            this.height = this.fftSamples / 2;
+            this.height = this.params.height || this.fftSamples / 2;
             this.noverlap = params.noverlap;
             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.frequencyMin = params.frequencyMin || 0;
+            this.frequencyMax = params.frequencyMax || 12000;
+
             this.createWrapper();
             this.createCanvas();
             this.render();
@@ -177,11 +187,10 @@ export default class SpectrogramPlugin {
             const labelsEl = (this.labelsEl = document.createElement('canvas'));
             labelsEl.classList.add('spec-labels');
             this.drawer.style(labelsEl, {
-                left: 0,
-                position: 'absolute',
+                position: 'fixed',
                 zIndex: 9,
-                height: `${this.height * this.channels / this.pixelRatio}px`,
-                width: `${55 / this.pixelRatio}px`
+                height: `${this.height * this.channels}px`,
+                width: `55px`
             });
             this.wrapper.appendChild(labelsEl);
             this.loadLabels(
@@ -201,7 +210,7 @@ export default class SpectrogramPlugin {
             position: 'relative',
             userSelect: 'none',
             webkitUserSelect: 'none',
-            height: `${this.height * this.channels / this.pixelRatio}px`
+            height: `${this.height * this.channels}px`
         });
 
         if (wsParams.fillParent || wsParams.scrollParent) {
@@ -248,8 +257,9 @@ export default class SpectrogramPlugin {
     updateCanvasStyle() {
         const width = Math.round(this.width / this.pixelRatio) + 'px';
         this.canvas.width = this.width;
-        this.canvas.height = this.height * this.channels;
+        this.canvas.height = this.fftSamples / 2 * this.channels;
         this.canvas.style.width = width;
+        this.canvas.style.height = this.height + 'px';
     }
 
     drawSpectrogram(frequenciesData, my) {
@@ -259,8 +269,11 @@ export default class SpectrogramPlugin {
         }
 
         const spectrCc = my.spectrCc;
-        const height = my.height;
+        const height = my.fftSamples / 2;
         const width = my.width;
+        const freqFrom = my.buffer.sampleRate / 2;
+        const freqMin = my.frequencyMin;
+        const freqMax = my.frequencyMax;
 
         if (!spectrCc) {
             return;
@@ -268,7 +281,7 @@ export default class SpectrogramPlugin {
 
         for (let c = 0; c < frequenciesData.length; c++) { // for each channel
             const pixels = my.resample(frequenciesData[c]);
-            const imageData = spectrCc.createImageData(width, height);
+            const imageData = new ImageData(width, height);
 
             for (let i = 0; i < pixels.length; i++) {
                 for (let j = 0; j < pixels[i].length; j++) {
@@ -281,8 +294,15 @@ export default class SpectrogramPlugin {
                 }
             }
 
-            // stack spectrograms
-            spectrCc.putImageData(imageData, 0, height * c);
+            // scale and stack spectrograms
+            createImageBitmap(imageData).then(renderer =>
+                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
+                )
+            );
         }
     }
 
@@ -381,15 +401,15 @@ export default class SpectrogramPlugin {
         const bgWidth = 55;
         const getMaxY = frequenciesHeight || 512;
         const labelIndex = 5 * (getMaxY / 256);
-        const freqStart = 0;
-        const step =
-            (this.wavesurfer.backend.ac.sampleRate / 2 - freqStart) /
-            labelIndex;
+        const freqStart = this.frequencyMin;
+        const step = (this.frequencyMax - freqStart) / labelIndex;
 
         // prepare canvas element for labels
         const ctx = this.labelsEl.getContext('2d');
-        this.labelsEl.height = this.height * this.channels;
-        this.labelsEl.width = bgWidth;
+        const dispScale = window.devicePixelRatio;
+        this.labelsEl.height = this.height * this.channels * dispScale;
+        this.labelsEl.width = bgWidth * dispScale;
+        ctx.scale(dispScale, dispScale);
 
         if (!ctx) {
             return;
@@ -408,9 +428,6 @@ export default class SpectrogramPlugin {
                 ctx.textBaseline = 'middle';
 
                 const freq = freqStart + step * i;
-                const index = Math.round(
-                    (freq / (this.sampleRate / 2)) * this.fftSamples
-                );
                 const label = this.freqType(freq);
                 const units = this.unitType(freq);
                 const yLabelOffset = 2;

package/src/plugin/timeline/index.js

@@ -371,7 +371,13 @@ export default class TimelinePlugin {
         // build an array of position data with index, second and pixel data,
         // this is then used multiple times below
         const positioning = [];
-        for (i = 0; i < totalSeconds / timeInterval; i++) {
+
+        // render until end in case we have a negative offset
+        const renderSeconds = (this.params.offset < 0)
+            ? totalSeconds - this.params.offset
+            : totalSeconds;
+
+        for (i = 0; i < renderSeconds / timeInterval; i++) {
             positioning.push([i, curSeconds, curPixel]);
             curSeconds += timeInterval;
             curPixel += pixelsPerSecond * timeInterval;

package/src/wavesurfer.js

@@ -501,11 +501,15 @@ export default class WaveSurfer extends util.Observer {
         this._onResize = util.debounce(
             () => {
                 if (
+                    this.drawer.wrapper &&
                     prevWidth != this.drawer.wrapper.clientWidth &&
                     !this.params.scrollParent
                 ) {
                     prevWidth = this.drawer.wrapper.clientWidth;
-                    this.drawer.fireEvent('redraw');
+                    if (prevWidth) {
+                        // redraw only if waveform container is rendered and has a width
+                        this.drawer.fireEvent('redraw');
+                    }
                 }
             },
             typeof this.params.responsive === 'number'

package/src/webaudio.js

@@ -145,6 +145,10 @@ export default class WebAudio extends util.Observer {
         this.state = null;
         /** @private */
         this.explicitDuration = params.duration;
+        /** @private */
+        this.sinkStreamDestination = null;
+        /** @private */
+        this.sinkAudioElement = null;
         /**
          * Boolean indicating if the backend was destroyed.
          */
@@ -298,19 +302,24 @@ export default class WebAudio extends util.Observer {
              * output. Here we create an HTMLAudioElement, connect the
              * webaudio stream to that element and setSinkId there.
              */
-            let audio = new window.Audio();
-            if (!audio.setSinkId) {
+            if (!this.sinkAudioElement) {
+                this.sinkAudioElement = new window.Audio();
+                // autoplay is necessary since we're not invoking .play()
+                this.sinkAudioElement.autoplay = true;
+            }
+            if (!this.sinkAudioElement.setSinkId) {
                 return Promise.reject(
                     new Error('setSinkId is not supported in your browser')
                 );
             }
-            audio.autoplay = true;
-            const dest = this.ac.createMediaStreamDestination();
+            if (!this.sinkStreamDestination) {
+                this.sinkStreamDestination = this.ac.createMediaStreamDestination();
+            }
             this.gainNode.disconnect();
-            this.gainNode.connect(dest);
-            audio.srcObject = dest.stream;
+            this.gainNode.connect(this.sinkStreamDestination);
+            this.sinkAudioElement.srcObject = this.sinkStreamDestination.stream;
 
-            return audio.setSinkId(deviceId);
+            return this.sinkAudioElement.setSinkId(deviceId);
         } else {
             return Promise.reject(new Error('Invalid deviceId: ' + deviceId));
         }
@@ -541,6 +550,14 @@ export default class WebAudio extends util.Observer {
             // clear the offlineAudioContext
             window.WaveSurferOfflineAudioContext = null;
         }
+
+        // disconnect resources used by setSinkId
+        if (this.sinkStreamDestination) {
+            this.sinkAudioElement.pause();
+            this.sinkAudioElement.srcObject = null;
+            this.sinkStreamDestination.disconnect();
+            this.sinkStreamDestination = null;
+        }
     }
     /**
      * This is called when wavesurfer is destroyed