wavesurfer.js 7.0.0-alpha.3 → 7.0.0-alpha.31

package/dist/renderer.js

@@ -1,202 +1,288 @@
 import EventEmitter from './event-emitter.js';
 class Renderer extends EventEmitter {
-    constructor(options) {
+    options = {
+        height: 0,
+    };
+    container;
+    scrollContainer;
+    wrapper;
+    canvasWrapper;
+    progressWrapper;
+    timeout = null;
+    isScrolling = false;
+    channelData = null;
+    duration = null;
+    resizeObserver = null;
+    constructor(params, options) {
         super();
-        this.options = options;
+        this.options = { ...options };
         let container = null;
-        if (typeof this.options.container === 'string') {
-            container = document.querySelector(this.options.container);
+        if (typeof params.container === 'string') {
+            container = document.querySelector(params.container);
         }
-        else if (this.options.container instanceof HTMLElement) {
-            container = this.options.container;
+        else if (params.container instanceof HTMLElement) {
+            container = params.container;
         }
         if (!container) {
             throw new Error('Container not found');
         }
+        const [div, shadow] = this.initHtml();
+        container.appendChild(div);
+        this.container = div;
+        this.scrollContainer = shadow.querySelector('.scroll');
+        this.wrapper = shadow.querySelector('.wrapper');
+        this.canvasWrapper = shadow.querySelector('.canvases');
+        this.progressWrapper = shadow.querySelector('.progress');
+        // Set a click handler
+        this.wrapper.addEventListener('click', (e) => {
+            const rect = this.wrapper.getBoundingClientRect();
+            const x = e.clientX - rect.left;
+            const relativeX = x / rect.width;
+            this.emit('click', { relativeX });
+        });
+        // Re-render the waveform on container resize
+        this.resizeObserver = new ResizeObserver(() => {
+            this.delay(() => this.reRender(), 100);
+        });
+        this.resizeObserver.observe(this.scrollContainer);
+    }
+    initHtml() {
         const div = document.createElement('div');
         const shadow = div.attachShadow({ mode: 'open' });
         shadow.innerHTML = `
       <style>
+        :host {
+          user-select: none;
+        }
         :host .scroll {
           overflow-x: auto;
-          overflow-y: visible;
-          user-select: none;
+          overflow-y: hidden;
           width: 100%;
-          height: ${this.options.height}px;
           position: relative;
         }
+        :host .noScrollbar {
+          scrollbar-color: transparent;
+          scrollbar-width: none;
+        }
+        :host .noScrollbar::-webkit-scrollbar {
+          display: none;
+          -webkit-appearance: none;
+        }
         :host .wrapper {
           position: relative;
-          width: fit-content;
-          min-width: 100%;
-          height: 100%;
+          overflow: visible;
           z-index: 2;
         }
+        :host .canvases {
+          position: relative;
+          height: ${this.options.height}px;
+        }
         :host canvas {
           display: block;
-          height: 100%;
-          min-width: 100%;
+          position: absolute;
+          top: 0;
           image-rendering: pixelated;
+          height: ${this.options.height}px;
         }
         :host .progress {
-          position: absolute;
-          z-index: 2;
-          top: 0;
-          left: 0;
-          height: 100%;
           pointer-events: none;
-          clip-path: inset(100%);
-        }
-        :host .cursor {
           position: absolute;
-          z-index: 3;
+          z-index: 2;
           top: 0;
           left: 0;
+          width: 0;
           height: 100%;
-          border-right: 1px solid ${this.options.progressColor};
+          overflow: hidden;
+          box-sizing: border-box;
         }
       </style>
 
       <div class="scroll">
         <div class="wrapper">
-          <canvas></canvas>
-          <canvas class="progress"></canvas>
-          <div class="cursor"></div>
+          <div class="canvases"></div>
+          <div class="progress"></div>
         </div>
       </div>
     `;
-        this.container = div;
-        this.scrollContainer = shadow.querySelector('.scroll');
-        this.mainCanvas = shadow.querySelector('canvas');
-        this.ctx = this.mainCanvas.getContext('2d', { desynchronized: true });
-        this.progressCanvas = shadow.querySelector('.progress');
-        this.cursor = shadow.querySelector('.cursor');
-        container.appendChild(div);
-        this.mainCanvas.addEventListener('click', (e) => {
-            const rect = this.mainCanvas.getBoundingClientRect();
-            const x = e.clientX - rect.left;
-            const relativeX = x / rect.width;
-            this.emit('click', { relativeX });
-        });
+        return [div, shadow];
+    }
+    setOptions(options) {
+        this.options = options;
+        // Re-render the waveform
+        this.reRender();
+    }
+    getContainer() {
+        return this.scrollContainer;
+    }
+    getWrapper() {
+        return this.wrapper;
     }
     destroy() {
         this.container.remove();
+        this.resizeObserver?.disconnect();
     }
-    renderLinePeaks(channelData, width, height) {
-        const { ctx } = this;
-        ctx.clearRect(0, 0, width, height);
-        ctx.beginPath();
-        ctx.moveTo(0, height / 2);
-        // Channel 0 is left, 1 is right
-        const leftChannel = channelData[0];
-        const isMono = channelData.length === 1;
-        const rightChannel = isMono ? leftChannel : channelData[1];
-        // Draw left channel in the top half of the canvas
-        let prevX = -1;
-        let prevY = 0;
-        for (let i = 0, len = leftChannel.length; i < len; i++) {
-            const x = Math.round((i / leftChannel.length) * width);
-            const y = Math.round(((1 - leftChannel[i]) * height) / 2);
-            if (x !== prevX || y > prevY) {
-                ctx.lineTo(x, y);
-                prevX = x;
-                prevY = y;
-            }
+    delay(fn, delayMs = 10) {
+        if (this.timeout) {
+            clearTimeout(this.timeout);
         }
-        // Draw right channel in the bottom half of the canvas
-        prevX = -1;
-        prevY = 0;
-        for (let i = rightChannel.length - 1; i >= 0; i--) {
-            const x = Math.round((i / rightChannel.length) * width);
-            const y = Math.round(((1 + rightChannel[i]) * height) / 2);
-            if (x !== prevX || (isMono ? y < -prevY : y > prevY)) {
-                ctx.lineTo(x, y);
-                prevX = x;
-                prevY = y;
-            }
-        }
-        ctx.strokeStyle = ctx.fillStyle = this.options.waveColor;
-        ctx.stroke();
-        ctx.fill();
+        return new Promise((resolve) => {
+            this.timeout = setTimeout(() => {
+                resolve(fn());
+            }, delayMs);
+        });
     }
-    renderBarPeaks(channelData, width, height) {
-        var _a, _b;
-        const { devicePixelRatio } = window;
-        const { ctx } = this;
-        ctx.clearRect(0, 0, width, height);
-        const barWidthOption = this.options.barWidth || 1;
-        const barWidth = barWidthOption * devicePixelRatio;
-        const barGap = ((_a = this.options.barGap) !== null && _a !== void 0 ? _a : barWidthOption / 2) * devicePixelRatio;
-        const barRadius = (_b = this.options.barRadius) !== null && _b !== void 0 ? _b : 0;
+    async renderPeaks(channelData, width, height, pixelRatio) {
+        const barWidth = this.options.barWidth != null ? this.options.barWidth * pixelRatio : 1;
+        const barGap = this.options.barGap != null ? this.options.barGap * pixelRatio : this.options.barWidth ? barWidth / 2 : 0;
+        const barRadius = this.options.barRadius ?? 0;
         const leftChannel = channelData[0];
+        const len = leftChannel.length;
+        const barCount = Math.floor(width / (barWidth + barGap));
+        const barIndexScale = barCount / len;
+        const halfHeight = height / 2;
         const isMono = channelData.length === 1;
         const rightChannel = isMono ? leftChannel : channelData[1];
-        const barCount = Math.floor(width / (barWidth + barGap));
-        const leftChannelBars = new Float32Array(barCount);
-        const rightChannelBars = new Float32Array(barCount);
-        const barIndexScale = barCount / leftChannel.length;
-        const leftChannelLength = leftChannel.length;
-        for (let i = 0; i < leftChannelLength; i++) {
-            const barIndex = Math.round(i * barIndexScale);
-            leftChannelBars[barIndex] = Math.max(leftChannelBars[barIndex], leftChannel[i]);
-            rightChannelBars[barIndex] = (isMono ? Math.min : Math.max)(rightChannelBars[barIndex], rightChannel[i]);
+        const useNegative = isMono && rightChannel.some((v) => v < 0);
+        const draw = (start, end) => {
+            let prevX = 0;
+            let prevLeft = 0;
+            let prevRight = 0;
+            const canvas = document.createElement('canvas');
+            canvas.width = Math.round((width * (end - start)) / len);
+            canvas.height = this.options.height;
+            canvas.style.width = `${Math.floor(canvas.width / pixelRatio)}px`;
+            canvas.style.height = `${this.options.height}px`;
+            canvas.style.left = `${Math.floor((start * width) / pixelRatio / len)}px`;
+            this.canvasWrapper.appendChild(canvas);
+            const ctx = canvas.getContext('2d', {
+                desynchronized: true,
+            });
+            ctx.beginPath();
+            ctx.fillStyle = this.options.waveColor ?? '';
+            // Firefox shim until 2023.04.11
+            if (!ctx.roundRect)
+                ctx.roundRect = ctx.fillRect;
+            for (let i = start; i < end; i++) {
+                const barIndex = Math.round((i - start) * barIndexScale);
+                if (barIndex > prevX) {
+                    const leftBarHeight = Math.round(prevLeft * halfHeight);
+                    const rightBarHeight = Math.round(prevRight * halfHeight);
+                    ctx.roundRect(prevX * (barWidth + barGap), halfHeight - leftBarHeight, barWidth, leftBarHeight + rightBarHeight || 1, barRadius);
+                    prevX = barIndex;
+                    prevLeft = 0;
+                    prevRight = 0;
+                }
+                const leftValue = useNegative ? leftChannel[i] : Math.abs(leftChannel[i]);
+                const rightValue = useNegative ? rightChannel[i] : Math.abs(rightChannel[i]);
+                if (leftValue > prevLeft) {
+                    prevLeft = leftValue;
+                }
+                // If stereo, both channels are drawn as max values
+                // If mono with negative values, the bottom channel will be the min negative values
+                if (useNegative ? rightValue < -prevRight : rightValue > prevRight) {
+                    prevRight = rightValue < 0 ? -rightValue : rightValue;
+                }
+            }
+            ctx.fill();
+            ctx.closePath();
+            // Draw a progress canvas
+            const progressCanvas = canvas.cloneNode();
+            this.progressWrapper.appendChild(progressCanvas);
+            const progressCtx = progressCanvas.getContext('2d', {
+                desynchronized: true,
+            });
+            if (canvas.width > 0 && canvas.height > 0) {
+                progressCtx.drawImage(canvas, 0, 0);
+            }
+            // Set the composition method to draw only where the waveform is drawn
+            progressCtx.globalCompositeOperation = 'source-in';
+            progressCtx.fillStyle = this.options.progressColor ?? '';
+            // This rectangle acts as a mask thanks to the composition method
+            progressCtx.fillRect(0, 0, canvas.width, canvas.height);
+        };
+        // Clear the canvas
+        this.canvasWrapper.innerHTML = '';
+        this.progressWrapper.innerHTML = '';
+        // Determine the currently visible part of the waveform
+        const { scrollLeft, scrollWidth, clientWidth } = this.scrollContainer;
+        const scale = len / scrollWidth;
+        const start = Math.floor(scrollLeft * scale);
+        const end = Math.ceil(Math.min(scrollWidth, scrollLeft + clientWidth) * scale);
+        // Draw the visible portion of the waveform
+        draw(start, end);
+        // Draw the rest of the waveform with a timeout for better performance
+        const step = end - start;
+        for (let i = end; i < len; i += step) {
+            await this.delay(() => {
+                draw(i, Math.min(len, i + step));
+            });
         }
-        ctx.beginPath();
-        for (let i = 0; i < barCount; i++) {
-            const leftBarHeight = Math.max(1, Math.round((leftChannelBars[i] * height) / 2));
-            const rightBarHeight = Math.max(1, Math.round(Math.abs(rightChannelBars[i] * height) / 2));
-            ctx.roundRect(i * (barWidth + barGap), height / 2 - leftBarHeight, barWidth, leftBarHeight + rightBarHeight, barRadius);
+        for (let i = start - 1; i >= 0; i -= step) {
+            await this.delay(() => {
+                draw(Math.max(0, i - step), i);
+            });
         }
-        ctx.fillStyle = this.options.waveColor;
-        ctx.fill();
-    }
-    createProgressMask() {
-        const progressCtx = this.progressCanvas.getContext('2d', { desynchronized: true });
-        if (!progressCtx) {
-            throw new Error('Failed to get canvas context');
-        }
-        this.progressCanvas.width = this.mainCanvas.width;
-        this.progressCanvas.height = this.mainCanvas.height;
-        this.progressCanvas.style.width = this.mainCanvas.style.width;
-        this.progressCanvas.style.height = this.mainCanvas.style.height;
-        progressCtx.drawImage(this.mainCanvas, 0, 0);
-        progressCtx.globalCompositeOperation = 'source-in';
-        progressCtx.fillStyle = this.options.progressColor;
-        progressCtx.fillRect(0, 0, this.progressCanvas.width, this.progressCanvas.height);
     }
     render(channelData, duration) {
-        const { devicePixelRatio } = window;
-        const width = Math.max(this.container.clientWidth * devicePixelRatio, duration * this.options.minPxPerSec);
+        // Determine the width of the waveform
+        const pixelRatio = window.devicePixelRatio || 1;
+        const parentWidth = this.scrollContainer.clientWidth;
+        const scrollWidth = Math.ceil(duration * (this.options.minPxPerSec || 0));
+        // Whether the container should scroll
+        this.isScrolling = scrollWidth > parentWidth;
+        const useParentWidth = this.options.fillParent && !this.isScrolling;
+        // Width and height of the waveform in pixels
+        const width = (useParentWidth ? parentWidth : scrollWidth) * pixelRatio;
         const { height } = this.options;
-        this.mainCanvas.width = width;
-        this.mainCanvas.height = height;
-        this.mainCanvas.style.width = Math.round(width / devicePixelRatio) + 'px';
-        const renderingFn = this.options.barWidth ? this.renderBarPeaks : this.renderLinePeaks;
-        renderingFn.call(this, channelData, width, height);
-        this.createProgressMask();
+        // Set the width of the wrapper
+        this.wrapper.style.width = useParentWidth ? '100%' : `${scrollWidth}px`;
+        // Set additional styles
+        this.scrollContainer.style.overflowX = this.isScrolling ? 'auto' : 'hidden';
+        this.scrollContainer.classList.toggle('noScrollbar', !!this.options.hideScrollbar);
+        this.progressWrapper.style.borderRightStyle = 'solid';
+        this.progressWrapper.style.borderRightColor = `${this.options.cursorColor || this.options.progressColor}`;
+        this.progressWrapper.style.borderRightWidth = `${this.options.cursorWidth}px`;
+        this.canvasWrapper.style.height = `${this.options.height}px`;
+        // Render the waveform
+        this.renderPeaks(channelData, width, height, pixelRatio);
+        this.channelData = channelData;
+        this.duration = duration;
     }
-    zoom(channelData, duration, minPxPerSec) {
+    reRender() {
+        // Return if the waveform has not been rendered yet
+        if (!this.channelData || !this.duration)
+            return;
         // Remember the current cursor position
-        const oldCursorPosition = this.cursor.getBoundingClientRect().left;
-        this.options.minPxPerSec = minPxPerSec;
-        this.render(channelData, duration);
+        const oldCursorPosition = this.progressWrapper.clientWidth;
+        // Set the new zoom level and re-render the waveform
+        this.render(this.channelData, this.duration);
         // Adjust the scroll position so that the cursor stays in the same place
-        const newCursortPosition = this.cursor.getBoundingClientRect().left;
+        const newCursortPosition = this.progressWrapper.clientWidth;
         this.scrollContainer.scrollLeft += newCursortPosition - oldCursorPosition;
     }
+    zoom(minPxPerSec) {
+        this.options.minPxPerSec = minPxPerSec;
+        this.reRender();
+    }
     renderProgress(progress, autoCenter = false) {
-        this.progressCanvas.style.clipPath = `inset(0 ${100 - progress * 100}% 0 0)`;
-        this.cursor.style.left = `${progress * 100}%`;
-        if (autoCenter) {
-            const center = this.container.clientWidth / 2;
-            const fullWidth = this.mainCanvas.clientWidth;
-            if (fullWidth * progress >= center) {
-                this.scrollContainer.scrollLeft = fullWidth * progress - center;
+        this.progressWrapper.style.width = `${progress * 100}%`;
+        if (this.isScrolling && this.options.autoCenter) {
+            const { clientWidth, scrollLeft, scrollWidth } = this.scrollContainer;
+            const progressWidth = scrollWidth * progress;
+            const center = clientWidth / 2;
+            const minScroll = autoCenter ? center : clientWidth;
+            const minDiff = center / 20;
+            if (progressWidth > scrollLeft + minScroll || progressWidth < scrollLeft) {
+                // If the cursor is in viewport but not centered, scroll to the center slowly
+                if (progressWidth - (scrollLeft + center) >= minDiff && progressWidth < scrollLeft + clientWidth) {
+                    this.scrollContainer.scrollLeft += minDiff;
+                }
+                else {
+                    // Otherwise, scroll to the center immediately
+                    this.scrollContainer.scrollLeft = progressWidth - center;
+                }
             }
         }
     }
-    getContainer() {
-        return this.scrollContainer;
-    }
 }
 export default Renderer;

package/dist/timer.d.ts

@@ -4,7 +4,8 @@ type TimerEvents = {
 };
 declare class Timer extends EventEmitter<TimerEvents> {
     private unsubscribe;
-    constructor();
+    start(): void;
+    stop(): void;
     destroy(): void;
 }
 export default Timer;

package/dist/timer.js

@@ -1,8 +1,7 @@
 import EventEmitter from './event-emitter.js';
 class Timer extends EventEmitter {
-    constructor() {
-        super();
-        this.unsubscribe = () => undefined;
+    unsubscribe = () => undefined;
+    start() {
         this.unsubscribe = this.on('tick', () => {
             requestAnimationFrame(() => {
                 this.emit('tick');
@@ -10,6 +9,9 @@ class Timer extends EventEmitter {
         });
         this.emit('tick');
     }
+    stop() {
+        this.unsubscribe();
+    }
     destroy() {
         this.unsubscribe();
     }

package/dist/wavesurfer.d.ts

@@ -0,0 +1,132 @@
+import { type RendererStyleOptions } from './renderer.js';
+import Player from './player.js';
+import type { GenericPlugin } from './base-plugin.js';
+export type WaveSurferOptions = {
+    /** HTML element or CSS selector */
+    container: HTMLElement | string | null;
+    /** Height of the waveform in pixels */
+    height?: number;
+    /** The color of the waveform */
+    waveColor?: string;
+    /** The color of the progress mask */
+    progressColor?: string;
+    /** The color of the playpack cursor */
+    cursorColor?: string;
+    /** The cursor with */
+    cursorWidth?: number;
+    /** If set, the waveform will be rendered in bars like so: ▁ ▂ ▇ ▃ ▅ ▂ */
+    barWidth?: number;
+    /** Spacing between bars in pixels */
+    barGap?: number;
+    /** Rounded borders for bars */
+    barRadius?: number;
+    /** Minimum pixels per second of audio (zoom) */
+    minPxPerSec?: number;
+    /** Stretch the waveform to fill the container, true by default */
+    fillParent?: boolean;
+    /** Audio URL */
+    url?: string;
+    /** Pre-computed audio data */
+    peaks?: Float32Array[] | Array<number[]>;
+    /** Pre-computed duration */
+    duration?: number;
+    /** Use an existing media element instead of creating one */
+    media?: HTMLMediaElement;
+    /** Play the audio on load */
+    autoplay?: boolean;
+    /** Is the waveform clickable? */
+    interact?: boolean;
+    /** Hide scrollbar **/
+    hideScrollbar?: boolean;
+    /** Audio rate */
+    audioRate?: number;
+    /** Keep scroll to the center of the waveform during playback */
+    autoCenter?: boolean;
+    /** Initialize plugins */
+    plugins?: GenericPlugin[];
+};
+declare const defaultOptions: {
+    height: number;
+    waveColor: string;
+    progressColor: string;
+    cursorWidth: number;
+    minPxPerSec: number;
+    fillParent: boolean;
+    interact: boolean;
+    autoCenter: boolean;
+};
+export type WaveSurferEvents = {
+    decode: {
+        duration: number;
+    };
+    canplay: {
+        duration: number;
+    };
+    ready: {
+        duration: number;
+    };
+    play: void;
+    pause: void;
+    finish: void;
+    timeupdate: {
+        currentTime: number;
+    };
+    seeking: {
+        currentTime: number;
+    };
+    interaction: void;
+    zoom: {
+        minPxPerSec: number;
+    };
+    destroy: void;
+};
+export type WaveSurferPluginParams = {
+    wavesurfer: WaveSurfer;
+    container: HTMLElement;
+    wrapper: HTMLElement;
+};
+declare class WaveSurfer extends Player<WaveSurferEvents> {
+    options: WaveSurferOptions & typeof defaultOptions;
+    private fetcher;
+    private decoder;
+    private renderer;
+    private timer;
+    private plugins;
+    private decodedData;
+    private canPlay;
+    /** Create a new WaveSurfer instance */
+    static create(options: WaveSurferOptions): WaveSurfer;
+    /** Create a new WaveSurfer instance */
+    constructor(options: WaveSurferOptions);
+    setOptions(options: Partial<RendererStyleOptions>): void;
+    private initPlayerEvents;
+    private initRendererEvents;
+    private initTimerEvents;
+    private initReadyEvent;
+    private initPlugins;
+    /** Register a wavesurfer.js plugin */
+    registerPlugin<T extends GenericPlugin>(plugin: T): T;
+    /** Load an audio file by URL, with optional pre-decoded audio data */
+    load(url: string, channelData?: WaveSurferOptions['peaks'], duration?: number): Promise<void>;
+    private renderAudio;
+    /** Zoom in or out */
+    zoom(minPxPerSec: number): void;
+    /** Get the decoded audio data */
+    getDecodedData(): AudioBuffer | null;
+    getDuration(): number;
+    /** Toggle if the waveform should react to clicks */
+    toggleInteraction(isInteractive: boolean): void;
+    /** Seeks to a percentage of audio as [0..1] (0 = beginning, 1 = end) */
+    seekTo(progress: number): void;
+    /** Play or pause the audio */
+    playPause(): Promise<void>;
+    /** Stop the audio and go to the beginning */
+    stop(): void;
+    /** Skip N or -N seconds from the current positions */
+    skip(seconds: number): void;
+    /** Empty the waveform by loading a tiny silent audio */
+    empty(): void;
+    /** Unmount wavesurfer */
+    destroy(): void;
+}
+export default WaveSurfer;