wavesurfer.js 6.6.1 → 6.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wavesurfer.js",
-  "version": "6.6.1",
+  "version": "6.6.2",
   "description": "Interactive navigable audio visualization using Web Audio and Canvas",
   "main": "dist/wavesurfer.js",
   "directories": {

package/src/drawer.canvasentry.js

@@ -66,11 +66,6 @@ export default class CanvasEntry {
          * @type {object}
          */
         this.canvasContextAttributes = {};
-        /**
-         * The Timeout id used to track this canvas entry.
-         */
-        this.drawTimeout = null;
-
     }
 
     /**
@@ -130,27 +125,21 @@ export default class CanvasEntry {
      */
     clearWave() {
         // wave
-        this.waveCtx.save();
-        this.waveCtx.setTransform(1, 0, 0, 1, 0, 0);
         this.waveCtx.clearRect(
             0,
             0,
             this.waveCtx.canvas.width,
             this.waveCtx.canvas.height
         );
-        this.waveCtx.restore();
 
         // progress
         if (this.hasProgressCanvas) {
-            this.progressCtx.save();
-            this.progressCtx.setTransform(1, 0, 0, 1, 0, 0);
             this.progressCtx.clearRect(
                 0,
                 0,
                 this.progressCtx.canvas.width,
                 this.progressCtx.canvas.height
             );
-            this.progressCtx.restore();
         }
     }
 
@@ -435,36 +424,4 @@ export default class CanvasEntry {
             return this.wave.toDataURL(format, quality);
         }
     }
-
-    /**
-     * Stretches existing canvas
-     * @param {Number} newTotalWidth total width of wave in pixels
-     */
-    stretchCanvas(newTotalWidth) {
-        //Calculate the start and width of this canvas
-        let start = Math.round(this.start * newTotalWidth);
-        let width = Math.round(this.end * newTotalWidth - start);
-
-        //Stretch canvas
-        let elementSize = { width: width + 'px' };
-        let elementStart = {left: start + 'px'};
-        style(this.wave, elementSize);
-        style(this.wave, elementStart);
-        if (this.hasProgressCanvas) {
-            style(this.progress, elementSize);
-            style(this.progress, elementStart);
-        }
-    }
-
-    /**
-     * Set the left offset of the canvas
-     * @param {Number} position in px for the canvas to start
-     */
-    setLeft(position) {
-        let elementStart = {left: position + 'px'};
-        style(this.wave, elementStart);
-        if (this.hasProgressCanvas) {
-            style(this.progress, elementStart);
-        }
-    }
 }

package/src/drawer.js

@@ -272,6 +272,10 @@ export default class Drawer extends util.Observer {
      * @return {boolean} Whether the width of the container was updated or not
      */
     setWidth(width) {
+        if (this.width == width) {
+            return false;
+        }
+
         this.width = width;
 
         if (this.params.fillParent || this.params.scrollParent) {

package/src/drawer.multicanvas.js

@@ -89,14 +89,6 @@ export default class MultiCanvas extends Drawer {
          * @type {boolean}
          */
         this.vertical = params.vertical;
-
-        /**
-         * Whether to use the optimsized zoom rendering
-         * Automatically toggles to true if stretchCanvases() function is called
-         *
-         * @type {boolean}
-         */
-        this.optimiseZoom = false;
     }
 
     /**
@@ -165,16 +157,10 @@ export default class MultiCanvas extends Drawer {
 
         let canvasWidth = this.maxCanvasWidth + this.overlap;
         const lastCanvas = this.canvases.length - 1;
-        let leftOffset = 0;
         this.canvases.forEach((entry, i) => {
             if (i == lastCanvas) {
                 canvasWidth = this.width - this.maxCanvasWidth * lastCanvas;
             }
-
-            //Set left offset and add to next entry
-            entry.setLeft(leftOffset);
-            leftOffset += canvasWidth / this.params.pixelRatio;
-
             this.updateDimensions(entry, canvasWidth, this.height);
 
             entry.clearWave();
@@ -424,39 +410,7 @@ export default class MultiCanvas extends Drawer {
         this.canvases.forEach((entry, i) => {
             this.setFillStyles(entry, waveColor, progressColor);
             this.applyCanvasTransforms(entry, this.params.vertical);
-
-            if (this.optimiseZoom) {
-                //Optimising zoom functionality
-                //If there's a wrapper, optimise for the view
-                let priority = 0;
-                if (this.wrapper) {
-                    let canvasRect = entry.wave.getBoundingClientRect();
-                    let wrapperRect = this.wrapper.getBoundingClientRect();
-
-                    //Determine whether canvas is in viewframe or not and assign priority
-                    if (Math.floor(canvasRect['left']) > Math.ceil(wrapperRect['right'])) {
-                        //Canvas is to the right of view window
-                        let distance = canvasRect['left'] - wrapperRect['right'];
-                        priority = Math.ceil(distance / wrapperRect['width']);
-                    } else if (Math.ceil(canvasRect['right']) < Math.floor(wrapperRect['left'])) {
-                        //Canvas is to the left of the view window
-                        let distance = wrapperRect['left'] - canvasRect['right'];
-                        priority = Math.ceil(distance / wrapperRect['width']);
-                    }
-                } else {
-                    //Everything is equal priority
-                }
-
-                //This staggers the drawing of canvases so they don't all draw at once
-                entry.clearWave();
-                clearTimeout(entry.drawTimeout);
-                entry.drawTimeout = setTimeout(function(){
-                    entry.drawLines(peaks, absmax, halfH, offsetY, start, end);
-                    entry.drawTimeout = null;
-                }, 25 * priority);
-            } else {
-                entry.drawLines(peaks, absmax, halfH, offsetY, start, end);
-            }
+            entry.drawLines(peaks, absmax, halfH, offsetY, start, end);
         });
     }
 
@@ -652,30 +606,6 @@ export default class MultiCanvas extends Drawer {
         }
     }
 
-    /**
-     * Stretches the canvases to mimic zoom without recalculation
-     *
-     * @param {Number} desiredWidth new width of the wave display
-     * @param {Number} progress Value between 0 and 1 for wave progress
-     */
-    stretchCanvases(desiredWidth, progress) {
-        if (!this.optimiseZoom) {
-            //Enable optimsed zooming
-            this.optimiseZoom = true;
-        }
-        let totalCanvasWidth = Math.round(desiredWidth / this.params.pixelRatio);
-        this.width = desiredWidth;
-
-        for (let i = 0; i < this.canvases.length; i++) {
-            this.canvases[i].stretchCanvas(totalCanvasWidth);
-        }
-
-        //Update progress
-        let progressPos = progress * totalCanvasWidth;
-        this.updateProgress(progressPos);
-        this.recenterOnPosition(progressPos, true);
-    }
-
     /**
      * Render the new progress
      *

package/src/plugin/spectrogram/index.js

@@ -92,9 +92,6 @@ export default class SpectrogramPlugin {
         this._onRender = () => {
             this.render();
         };
-        this._onZoom = () => {
-            this.stretchCanvases();
-        };
         this._onWrapperClick = e => {
             this._wrapperClickHandler(e);
         };
@@ -139,9 +136,6 @@ export default class SpectrogramPlugin {
             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.
@@ -149,11 +143,10 @@ export default class SpectrogramPlugin {
             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);
         };
     }
@@ -238,49 +231,17 @@ export default class SpectrogramPlugin {
         this.fireEvent('click', relX / this.width || 0);
     }
 
-    /**
-     * Add a canvas to this.canvases
-     */
-    addCanvas() {
-        const canvas = (this.wrapper.appendChild(
+    createCanvas() {
+        const 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
-     */
-    removeCanvas() {
-        //Stop drawing (if drawing)
-        clearTimeout(this.canvasesTimeouts[this.canvasesTimeouts.length - 1]);
-
-        let 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
-     */
-    updateCanvases() {
-        let canvasesRequired = Math.ceil(this.width / 4000);
-
-        while (this.canvases.length < canvasesRequired) {
-            this.addCanvas();
-        }
-        while (this.canvases.length > canvasesRequired) {
-            this.removeCanvas();
-        }
     }
 
     render() {
@@ -294,14 +255,11 @@ export default class SpectrogramPlugin {
     }
 
     updateCanvasStyle() {
-        this.updateCanvases();
-        //width per canvas
-        for (let 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';
-        }
+        const 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';
     }
 
     drawSpectrogram(frequenciesData, my) {
@@ -310,61 +268,25 @@ export default class SpectrogramPlugin {
             frequenciesData = [frequenciesData];
         }
 
-        my.updateCanvasStyle();
-
-        //Stop canvases still being drawn
-        for (let i = 0; i < my.canvasesTimeouts.length; i++) {
-            clearTimeout(my.canvasesTimeouts[i]);
-        }
-
-        const view = [my.scrollLeftTracker, my.scrollLeftTracker + my.wrapper.clientWidth];
-
-        for (let canvasNum = 0; canvasNum < my.canvases.length; canvasNum++) {
-            const canvasLeft = canvasNum * Math.floor(my.width / my.canvases.length / my.pixelRatio);
-            const canvasRight = (canvasNum + 1) * Math.floor(my.width / my.canvases.length / my.pixelRatio);
-            const canvasBound = [canvasLeft, canvasRight];
-            my.canvases[canvasNum].style['left'] = canvasLeft + 'px';
-
-            //Optimise drawing for the view
-            let priority = 0;
-            if (canvasBound[0] > view[1]) {
-                //Canvas is to the right of view window
-                let 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
-                let 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
-     */
-    drawToCanvas(frequenciesData, my, canvasNum) {
+        const spectrCc = my.spectrCc;
         const height = my.fftSamples / 2;
+        const width = my.width;
         const freqFrom = my.buffer.sampleRate / 2;
         const freqMin = my.frequencyMin;
         const freqMax = my.frequencyMax;
 
-        for (let channel = 0; channel < frequenciesData.length; channel++) {
+        if (!spectrCc) {
+            return;
+        }
 
-            //Get pixels from frequency data and apply to image
-            const relevantFreqs = frequenciesData[channel].slice(canvasNum * Math.round(frequenciesData[channel].length / my.canvases.length), (canvasNum + 1) * Math.round(frequenciesData[channel].length / my.canvases.length));
-            const pixels = my.resample(relevantFreqs);
-            const imageData = new ImageData(pixels.length, height);
+        for (let c = 0; c < frequenciesData.length; c++) { // for each channel
+            const pixels = my.resample(frequenciesData[c]);
+            const imageData = new ImageData(width, height);
 
             for (let i = 0; i < pixels.length; i++) {
                 for (let j = 0; j < pixels[i].length; j++) {
                     const colorMap = my.colorMap[pixels[i][j]];
-                    const redIndex = ((height - j) * imageData.width + i) * 4;
+                    const 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;
@@ -372,20 +294,16 @@ export default class SpectrogramPlugin {
                 }
             }
 
-            //Draw image to canvas
-            createImageBitmap(imageData).then(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
-                    );
-                }
-            });
+            // 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
+                )
+            );
         }
-        //Drawing is finished
-        my.canvasesTimeouts[canvasNum] = null;
     }
 
     getFrequencies(callback) {
@@ -404,7 +322,7 @@ export default class SpectrogramPlugin {
 
         let noverlap = this.noverlap;
         if (!noverlap) {
-            const uniqueSamplesPerPx = buffer.length / this.width;
+            const uniqueSamplesPerPx = buffer.length / this.canvas.width;
             noverlap = Math.max(0, Math.round(fftSamples - uniqueSamplesPerPx));
         }
 
@@ -543,13 +461,12 @@ export default class SpectrogramPlugin {
 
     updateScroll(e) {
         if (this.wrapper) {
-            this.scrollLeftTracker = e.target.scrollLeft;
             this.wrapper.scrollLeft = e.target.scrollLeft;
         }
     }
 
     resample(oldMatrix) {
-        const columnsNumber = oldMatrix.length;
+        const columnsNumber = this.width;
         const newMatrix = [];
 
         const oldPiece = 1 / oldMatrix.length;
@@ -602,12 +519,4 @@ export default class SpectrogramPlugin {
 
         return newMatrix;
     }
-
-    stretchCanvases() {
-        for (let i = 0; i < this.canvases.length; i++) {
-            this.canvases[i].style.width = Math.round(this.drawer.width / this.canvases.length / this.pixelRatio) + 'px';
-            const canvasLeft = i * Math.floor(this.drawer.width / this.canvases.length / this.pixelRatio);
-            this.canvases[i].style['left'] = canvasLeft + 'px';
-        }
-    }
 }

package/src/wavesurfer.js

@@ -1275,21 +1275,6 @@ export default class WaveSurfer extends util.Observer {
         this.drawBuffer();
     }
 
-    /**
-     * Calls getPeaks() and drawPeaks()
-     * @param {WaveSurfer} wavesurfer the Wavesurfer to get/draw peaks from/to
-     * @param {number} width The width of the area that should be drawn
-     * @param {number} start The x-offset of the beginning of the area that
-     * should be rendered
-     * @param {number} end The x-offset of the end of the area that should be
-     * rendered
-     */
-    getAndDrawPeaks(wavesurfer, width, start, end) {
-        let peaks;
-        peaks = wavesurfer.backend.getPeaks(width, start, end);
-        wavesurfer.drawer.drawPeaks(peaks, width, start, end);
-    }
-
     /**
      * Get the correct peaks for current wave view-port and render wave
      *
@@ -1371,24 +1356,6 @@ export default class WaveSurfer extends util.Observer {
         this.fireEvent('zoom', pxPerSec);
     }
 
-    /**
-     * Call this function while moving the zoom slider to stretch the canvases
-     * of the wave without recalculating
-     *
-     * @param {Number} pxPerSec value returned from the zoom slider
-     */
-    zooming(pxPerSec) {
-        //Calculate the new width, this cannot be smaller than the parent container width
-        let desiredWidth = Math.round(this.getDuration() * pxPerSec * this.params.pixelRatio);
-        let parentWidth = this.drawer.getWidth();
-        desiredWidth = Math.max(parentWidth, desiredWidth);
-
-        //Stretch canvases
-        this.drawer.stretchCanvases(desiredWidth, this.backend.getPlayedPercents());
-
-        this.fireEvent('zoom', pxPerSec);
-    }
-
     /**
      * Decode buffer and load
      *