wavesurfer.js 7.10.3 → 7.11.1

package/dist/renderer.js

@@ -20,6 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
 import { makeDraggable } from './draggable.js';
 import EventEmitter from './event-emitter.js';
+import * as utils from './renderer-utils.js';
 class Renderer extends EventEmitter {
     constructor(options, audioElement) {
         super();
@@ -31,6 +32,7 @@ class Renderer extends EventEmitter {
         this.isDragging = false;
         this.subscriptions = [];
         this.unsubscribeOnScroll = [];
+        this.dragUnsubscribe = null;
         this.subscriptions = [];
         this.options = options;
         const parent = this.parentFromOptionsContainer(options.container);
@@ -62,22 +64,16 @@ class Renderer extends EventEmitter {
         return parent;
     }
     initEvents() {
-        const getClickPosition = (e) => {
-            const rect = this.wrapper.getBoundingClientRect();
-            const x = e.clientX - rect.left;
-            const y = e.clientY - rect.top;
-            const relativeX = x / rect.width;
-            const relativeY = y / rect.height;
-            return [relativeX, relativeY];
-        };
         // Add a click listener
         this.wrapper.addEventListener('click', (e) => {
-            const [x, y] = getClickPosition(e);
+            const rect = this.wrapper.getBoundingClientRect();
+            const [x, y] = utils.getRelativePointerPosition(rect, e.clientX, e.clientY);
             this.emit('click', x, y);
         });
         // Add a double click listener
         this.wrapper.addEventListener('dblclick', (e) => {
-            const [x, y] = getClickPosition(e);
+            const rect = this.wrapper.getBoundingClientRect();
+            const [x, y] = utils.getRelativePointerPosition(rect, e.clientX, e.clientY);
             this.emit('dblclick', x, y);
         });
         // Drag
@@ -87,8 +83,11 @@ class Renderer extends EventEmitter {
         // Add a scroll listener
         this.scrollContainer.addEventListener('scroll', () => {
             const { scrollLeft, scrollWidth, clientWidth } = this.scrollContainer;
-            const startX = scrollLeft / scrollWidth;
-            const endX = (scrollLeft + clientWidth) / scrollWidth;
+            const { startX, endX } = utils.calculateScrollPercentages({
+                scrollLeft,
+                scrollWidth,
+                clientWidth,
+            });
             this.emit('scroll', startX, endX, scrollLeft, scrollLeft + clientWidth);
         });
         // Re-render the waveform on container resize
@@ -108,39 +107,31 @@ class Renderer extends EventEmitter {
             return;
         this.lastContainerWidth = width;
         this.reRender();
+        this.emit('resize');
     }
     initDrag() {
-        this.subscriptions.push(makeDraggable(this.wrapper, 
+        // Don't initialize drag if it's already set up
+        if (this.dragUnsubscribe)
+            return;
+        this.dragUnsubscribe = makeDraggable(this.wrapper, 
         // On drag
         (_, __, x) => {
-            this.emit('drag', Math.max(0, Math.min(1, x / this.wrapper.getBoundingClientRect().width)));
+            const width = this.wrapper.getBoundingClientRect().width;
+            this.emit('drag', utils.clampToUnit(x / width));
         }, 
         // On start drag
         (x) => {
             this.isDragging = true;
-            this.emit('dragstart', Math.max(0, Math.min(1, x / this.wrapper.getBoundingClientRect().width)));
+            const width = this.wrapper.getBoundingClientRect().width;
+            this.emit('dragstart', utils.clampToUnit(x / width));
         }, 
         // On end drag
         (x) => {
             this.isDragging = false;
-            this.emit('dragend', Math.max(0, Math.min(1, x / this.wrapper.getBoundingClientRect().width)));
-        }));
-    }
-    getHeight(optionsHeight, optionsSplitChannel) {
-        var _a;
-        const defaultHeight = 128;
-        const numberOfChannels = ((_a = this.audioData) === null || _a === void 0 ? void 0 : _a.numberOfChannels) || 1;
-        if (optionsHeight == null)
-            return defaultHeight;
-        if (!isNaN(Number(optionsHeight)))
-            return Number(optionsHeight);
-        if (optionsHeight === 'auto') {
-            const height = this.parent.clientHeight || defaultHeight;
-            if (optionsSplitChannel === null || optionsSplitChannel === void 0 ? void 0 : optionsSplitChannel.every((channel) => !channel.overlay))
-                return height / numberOfChannels;
-            return height;
-        }
-        return defaultHeight;
+            const width = this.wrapper.getBoundingClientRect().width;
+            this.emit('dragend', utils.clampToUnit(x / width));
+        });
+        this.subscriptions.push(this.dragUnsubscribe);
     }
     initHtml() {
         const div = document.createElement('div');
@@ -177,6 +168,7 @@ class Renderer extends EventEmitter {
         }
         :host .canvases {
           min-height: ${this.getHeight(this.options.height, this.options.splitChannels)}px;
+          pointer-events: none;
         }
         :host .canvases > div {
           position: relative;
@@ -253,150 +245,125 @@ class Renderer extends EventEmitter {
         this.setScroll(scrollStart);
     }
     destroy() {
-        var _a, _b;
+        var _a;
         this.subscriptions.forEach((unsubscribe) => unsubscribe());
         this.container.remove();
-        (_a = this.resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
-        (_b = this.unsubscribeOnScroll) === null || _b === void 0 ? void 0 : _b.forEach((unsubscribe) => unsubscribe());
+        if (this.resizeObserver) {
+            this.resizeObserver.disconnect();
+            this.resizeObserver = null;
+        }
+        (_a = this.unsubscribeOnScroll) === null || _a === void 0 ? void 0 : _a.forEach((unsubscribe) => unsubscribe());
         this.unsubscribeOnScroll = [];
     }
     createDelay(delayMs = 10) {
         let timeout;
-        let reject;
+        let rejectFn;
         const onClear = () => {
-            if (timeout)
+            if (timeout) {
                 clearTimeout(timeout);
-            if (reject)
-                reject();
+                timeout = undefined;
+            }
+            if (rejectFn) {
+                rejectFn();
+                rejectFn = undefined;
+            }
         };
         this.timeouts.push(onClear);
         return () => {
-            return new Promise((resolveFn, rejectFn) => {
+            return new Promise((resolve, reject) => {
+                // Clear any pending delay
                 onClear();
-                reject = rejectFn;
+                // Store reject function for cleanup
+                rejectFn = reject;
+                // Set new timeout
                 timeout = setTimeout(() => {
                     timeout = undefined;
-                    reject = undefined;
-                    resolveFn();
+                    rejectFn = undefined;
+                    resolve();
                 }, delayMs);
             });
         };
     }
-    // Convert array of color values to linear gradient
-    convertColorValues(color) {
-        if (!Array.isArray(color))
-            return color || '';
-        if (color.length < 2)
-            return color[0] || '';
-        const canvasElement = document.createElement('canvas');
-        const ctx = canvasElement.getContext('2d');
-        const gradientHeight = canvasElement.height * (window.devicePixelRatio || 1);
-        const gradient = ctx.createLinearGradient(0, 0, 0, gradientHeight);
-        const colorStopPercentage = 1 / (color.length - 1);
-        color.forEach((color, index) => {
-            const offset = index * colorStopPercentage;
-            gradient.addColorStop(offset, color);
+    getHeight(optionsHeight, optionsSplitChannel) {
+        var _a;
+        const numberOfChannels = ((_a = this.audioData) === null || _a === void 0 ? void 0 : _a.numberOfChannels) || 1;
+        return utils.resolveChannelHeight({
+            optionsHeight,
+            optionsSplitChannels: optionsSplitChannel,
+            parentHeight: this.parent.clientHeight,
+            numberOfChannels,
+            defaultHeight: utils.DEFAULT_HEIGHT,
         });
-        return gradient;
+    }
+    convertColorValues(color) {
+        return utils.resolveColorValue(color, this.getPixelRatio());
     }
     getPixelRatio() {
-        return Math.max(1, window.devicePixelRatio || 1);
+        return utils.getPixelRatio(window.devicePixelRatio);
     }
     renderBarWaveform(channelData, options, ctx, vScale) {
-        const topChannel = channelData[0];
-        const bottomChannel = channelData[1] || channelData[0];
-        const length = topChannel.length;
         const { width, height } = ctx.canvas;
-        const halfHeight = height / 2;
-        const pixelRatio = this.getPixelRatio();
-        const barWidth = options.barWidth ? options.barWidth * pixelRatio : 1;
-        const barGap = options.barGap ? options.barGap * pixelRatio : options.barWidth ? barWidth / 2 : 0;
-        const barRadius = options.barRadius || 0;
-        const barIndexScale = width / (barWidth + barGap) / length;
-        const rectFn = barRadius && 'roundRect' in ctx ? 'roundRect' : 'rect';
+        const { halfHeight, barWidth, barRadius, barIndexScale, barSpacing } = utils.calculateBarRenderConfig({
+            width,
+            height,
+            length: (channelData[0] || []).length,
+            options,
+            pixelRatio: this.getPixelRatio(),
+        });
+        const segments = utils.calculateBarSegments({
+            channelData,
+            barIndexScale,
+            barSpacing,
+            barWidth,
+            halfHeight,
+            vScale,
+            canvasHeight: height,
+            barAlign: options.barAlign,
+        });
         ctx.beginPath();
-        let prevX = 0;
-        let maxTop = 0;
-        let maxBottom = 0;
-        for (let i = 0; i <= length; i++) {
-            const x = Math.round(i * barIndexScale);
-            if (x > prevX) {
-                const topBarHeight = Math.round(maxTop * halfHeight * vScale);
-                const bottomBarHeight = Math.round(maxBottom * halfHeight * vScale);
-                const barHeight = topBarHeight + bottomBarHeight || 1;
-                // Vertical alignment
-                let y = halfHeight - topBarHeight;
-                if (options.barAlign === 'top') {
-                    y = 0;
-                }
-                else if (options.barAlign === 'bottom') {
-                    y = height - barHeight;
-                }
-                ctx[rectFn](prevX * (barWidth + barGap), y, barWidth, barHeight, barRadius);
-                prevX = x;
-                maxTop = 0;
-                maxBottom = 0;
+        for (const segment of segments) {
+            if (barRadius && 'roundRect' in ctx) {
+                ;
+                ctx.roundRect(segment.x, segment.y, segment.width, segment.height, barRadius);
+            }
+            else {
+                ctx.rect(segment.x, segment.y, segment.width, segment.height);
             }
-            const magnitudeTop = Math.abs(topChannel[i] || 0);
-            const magnitudeBottom = Math.abs(bottomChannel[i] || 0);
-            if (magnitudeTop > maxTop)
-                maxTop = magnitudeTop;
-            if (magnitudeBottom > maxBottom)
-                maxBottom = magnitudeBottom;
         }
         ctx.fill();
         ctx.closePath();
     }
     renderLineWaveform(channelData, _options, ctx, vScale) {
-        const drawChannel = (index) => {
-            const channel = channelData[index] || channelData[0];
-            const length = channel.length;
-            const { height } = ctx.canvas;
-            const halfHeight = height / 2;
-            const hScale = ctx.canvas.width / length;
-            ctx.moveTo(0, halfHeight);
-            let prevX = 0;
-            let max = 0;
-            for (let i = 0; i <= length; i++) {
-                const x = Math.round(i * hScale);
-                if (x > prevX) {
-                    const h = Math.round(max * halfHeight * vScale) || 1;
-                    const y = halfHeight + h * (index === 0 ? -1 : 1);
-                    ctx.lineTo(prevX, y);
-                    prevX = x;
-                    max = 0;
-                }
-                const value = Math.abs(channel[i] || 0);
-                if (value > max)
-                    max = value;
-            }
-            ctx.lineTo(prevX, halfHeight);
-        };
+        const { width, height } = ctx.canvas;
+        const paths = utils.calculateLinePaths({ channelData, width, height, vScale });
         ctx.beginPath();
-        drawChannel(0);
-        drawChannel(1);
+        for (const path of paths) {
+            if (!path.length)
+                continue;
+            ctx.moveTo(path[0].x, path[0].y);
+            for (let i = 1; i < path.length; i++) {
+                const point = path[i];
+                ctx.lineTo(point.x, point.y);
+            }
+        }
         ctx.fill();
         ctx.closePath();
     }
     renderWaveform(channelData, options, ctx) {
         ctx.fillStyle = this.convertColorValues(options.waveColor);
-        // Custom rendering function
         if (options.renderFunction) {
             options.renderFunction(channelData, ctx);
             return;
         }
-        // Vertical scaling
-        let vScale = options.barHeight || 1;
-        if (options.normalize) {
-            const max = Array.from(channelData[0]).reduce((max, value) => Math.max(max, Math.abs(value)), 0);
-            vScale = max ? 1 / max : 1;
-        }
-        // Render waveform as bars
-        if (options.barWidth || options.barGap || options.barAlign) {
+        const vScale = utils.calculateVerticalScale({
+            channelData,
+            barHeight: options.barHeight,
+            normalize: options.normalize,
+        });
+        if (utils.shouldRenderBars(options)) {
             this.renderBarWaveform(channelData, options, ctx, vScale);
             return;
         }
-        // Render waveform as a polyline
         this.renderLineWaveform(channelData, options, ctx, vScale);
     }
     renderSingleCanvas(data, options, width, height, offset, canvasContainer, progressContainer) {
@@ -409,7 +376,13 @@ class Renderer extends EventEmitter {
         canvas.style.left = `${Math.round(offset)}px`;
         canvasContainer.appendChild(canvas);
         const ctx = canvas.getContext('2d');
-        this.renderWaveform(data, options, ctx);
+        if (options.renderFunction) {
+            ctx.fillStyle = this.convertColorValues(options.waveColor);
+            options.renderFunction(data, ctx);
+        }
+        else {
+            this.renderWaveform(data, options, ctx);
+        }
         // Draw a progress canvas
         if (canvas.width > 0 && canvas.height > 0) {
             const progressCanvas = canvas.cloneNode();
@@ -427,17 +400,8 @@ class Renderer extends EventEmitter {
         const pixelRatio = this.getPixelRatio();
         const { clientWidth } = this.scrollContainer;
         const totalWidth = width / pixelRatio;
-        let singleCanvasWidth = Math.min(Renderer.MAX_CANVAS_WIDTH, clientWidth, totalWidth);
+        const singleCanvasWidth = utils.calculateSingleCanvasWidth({ clientWidth, totalWidth, options });
         let drawnIndexes = {};
-        // Adjust width to avoid gaps between canvases when using bars
-        if (options.barWidth || options.barGap) {
-            const barWidth = options.barWidth || 0.5;
-            const barGap = options.barGap || barWidth / 2;
-            const totalBarWidth = barWidth + barGap;
-            if (singleCanvasWidth % totalBarWidth !== 0) {
-                singleCanvasWidth = Math.floor(singleCanvasWidth / totalBarWidth) * totalBarWidth;
-            }
-        }
         // Nothing to render
         if (singleCanvasWidth === 0)
             return;
@@ -451,24 +415,15 @@ class Renderer extends EventEmitter {
             const offset = index * singleCanvasWidth;
             let clampedWidth = Math.min(totalWidth - offset, singleCanvasWidth);
             // Clamp the width to the bar grid to avoid empty canvases at the end
-            if (options.barWidth || options.barGap) {
-                const barWidth = options.barWidth || 0.5;
-                const barGap = options.barGap || barWidth / 2;
-                const totalBarWidth = barWidth + barGap;
-                clampedWidth = Math.floor(clampedWidth / totalBarWidth) * totalBarWidth;
-            }
+            clampedWidth = utils.clampWidthToBarGrid(clampedWidth, options);
             if (clampedWidth <= 0)
                 return;
-            const data = channelData.map((channel) => {
-                const start = Math.floor((offset / totalWidth) * channel.length);
-                const end = Math.floor(((offset + clampedWidth) / totalWidth) * channel.length);
-                return channel.slice(start, end);
-            });
+            const data = utils.sliceChannelData({ channelData, offset, clampedWidth, totalWidth });
             this.renderSingleCanvas(data, options, clampedWidth, height, offset, canvasContainer, progressContainer);
         };
         // Clear canvases to avoid too many DOM nodes
         const clearCanvases = () => {
-            if (Object.keys(drawnIndexes).length > Renderer.MAX_NODES) {
+            if (utils.shouldClearCanvases(Object.keys(drawnIndexes).length)) {
                 canvasContainer.innerHTML = '';
                 progressContainer.innerHTML = '';
                 drawnIndexes = {};
@@ -484,21 +439,18 @@ class Renderer extends EventEmitter {
             return;
         }
         // Lazy rendering
-        const viewPosition = this.scrollContainer.scrollLeft / totalWidth;
-        const startCanvas = Math.floor(viewPosition * numCanvases);
-        // Draw the canvases in the viewport first
-        draw(startCanvas - 1);
-        draw(startCanvas);
-        draw(startCanvas + 1);
+        const initialRange = utils.getLazyRenderRange({
+            scrollLeft: this.scrollContainer.scrollLeft,
+            totalWidth,
+            numCanvases,
+        });
+        initialRange.forEach((index) => draw(index));
         // Subscribe to the scroll event to draw additional canvases
         if (numCanvases > 1) {
             const unsubscribe = this.on('scroll', () => {
                 const { scrollLeft } = this.scrollContainer;
-                const canvasIndex = Math.floor((scrollLeft / totalWidth) * numCanvases);
                 clearCanvases();
-                draw(canvasIndex - 1);
-                draw(canvasIndex);
-                draw(canvasIndex + 1);
+                utils.getLazyRenderRange({ scrollLeft, totalWidth, numCanvases }).forEach((index) => draw(index));
             });
             this.unsubscribeOnScroll.push(unsubscribe);
         }
@@ -537,12 +489,15 @@ class Renderer extends EventEmitter {
             // Determine the width of the waveform
             const pixelRatio = this.getPixelRatio();
             const parentWidth = this.scrollContainer.clientWidth;
-            const scrollWidth = Math.ceil(audioData.duration * (this.options.minPxPerSec || 0));
+            const { scrollWidth, isScrollable, useParentWidth, width } = utils.calculateWaveformLayout({
+                duration: audioData.duration,
+                minPxPerSec: this.options.minPxPerSec || 0,
+                parentWidth,
+                fillParent: this.options.fillParent,
+                pixelRatio,
+            });
             // Whether the container should scroll
-            this.isScrollable = scrollWidth > parentWidth;
-            const useParentWidth = this.options.fillParent && !this.isScrollable;
-            // Width of the waveform in pixels
-            const width = (useParentWidth ? parentWidth : scrollWidth) * pixelRatio;
+            this.isScrollable = isScrollable;
             // Set the width of the wrapper
             this.wrapper.style.width = useParentWidth ? '100%' : `${scrollWidth}px`;
             // Set additional styles
@@ -585,12 +540,7 @@ class Renderer extends EventEmitter {
         // Adjust the scroll position so that the cursor stays in the same place
         if (this.isScrollable && scrollWidth !== this.scrollContainer.scrollWidth) {
             const { right: after } = this.progressWrapper.getBoundingClientRect();
-            let delta = after - before;
-            // to limit compounding floating-point drift
-            // we need to round to the half px furthest from 0
-            delta *= 2;
-            delta = delta < 0 ? Math.floor(delta) : Math.ceil(delta);
-            delta /= 2;
+            const delta = utils.roundToHalfAwayFromZero(after - before);
             this.scrollContainer.scrollLeft += delta;
         }
     }
@@ -621,14 +571,17 @@ class Renderer extends EventEmitter {
             // Keep the cursor centered when playing
             const center = progressWidth - scrollLeft - middle;
             if (isPlaying && this.options.autoCenter && center > 0) {
-                this.scrollContainer.scrollLeft += Math.min(center, 10);
+                this.scrollContainer.scrollLeft += center;
             }
         }
         // Emit the scroll event
         {
             const newScroll = this.scrollContainer.scrollLeft;
-            const startX = newScroll / scrollWidth;
-            const endX = (newScroll + clientWidth) / scrollWidth;
+            const { startX, endX } = utils.calculateScrollPercentages({
+                scrollLeft: newScroll,
+                scrollWidth,
+                clientWidth,
+            });
             this.emit('scroll', startX, endX, newScroll, newScroll + clientWidth);
         }
     }
@@ -673,6 +626,4 @@ class Renderer extends EventEmitter {
         });
     }
 }
-Renderer.MAX_CANVAS_WIDTH = 8000;
-Renderer.MAX_NODES = 10;
 export default Renderer;

package/dist/timer.d.ts

@@ -3,7 +3,8 @@ type TimerEvents = {
     tick: [];
 };
 declare class Timer extends EventEmitter<TimerEvents> {
-    private unsubscribe;
+    private animationFrameId;
+    private isRunning;
     start(): void;
     stop(): void;
     destroy(): void;

package/dist/timer.js

@@ -2,21 +2,35 @@ import EventEmitter from './event-emitter.js';
 class Timer extends EventEmitter {
     constructor() {
         super(...arguments);
-        this.unsubscribe = () => undefined;
+        this.animationFrameId = null;
+        this.isRunning = false;
     }
     start() {
-        this.unsubscribe = this.on('tick', () => {
-            requestAnimationFrame(() => {
-                this.emit('tick');
-            });
-        });
-        this.emit('tick');
+        // Prevent multiple simultaneous loops
+        if (this.isRunning)
+            return;
+        this.isRunning = true;
+        const tick = () => {
+            // Only continue if timer is still running
+            if (!this.isRunning)
+                return;
+            this.emit('tick');
+            // Schedule next frame
+            this.animationFrameId = requestAnimationFrame(tick);
+        };
+        // Start the loop
+        tick();
     }
     stop() {
-        this.unsubscribe();
+        this.isRunning = false;
+        // Cancel any pending animation frame
+        if (this.animationFrameId !== null) {
+            cancelAnimationFrame(this.animationFrameId);
+            this.animationFrameId = null;
+        }
     }
     destroy() {
-        this.unsubscribe();
+        this.stop();
     }
 }
 export default Timer;

package/dist/types.d.ts

@@ -243,6 +243,8 @@ type WaveSurferEvents = {
     destroy: [];
     /** When source file is unable to be fetched, decoded, or an error is thrown by media element */
     error: [error: Error];
+    /** When audio container resizing */
+    resize: [];
 };
 declare class WaveSurfer extends Player<WaveSurferEvents> {
     options: WaveSurferOptions & typeof defaultOptions;