wavesurfer.js 7.0.0-alpha.4 → 7.0.0-alpha.40

package/dist/renderer.js

@@ -1,28 +1,47 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 import EventEmitter from './event-emitter.js';
 class Renderer extends EventEmitter {
-    constructor(options) {
+    constructor(params, options) {
         super();
+        this.options = {
+            height: 0,
+        };
         this.timeout = null;
-        this.options = options;
+        this.isScrolling = false;
+        this.channelData = null;
+        this.duration = null;
+        this.resizeObserver = null;
+        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 = `
@@ -32,73 +51,72 @@ class Renderer extends EventEmitter {
         }
         :host .scroll {
           overflow-x: auto;
-          overflow-y: visible;
+          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};
-          margin-left: -1px;
+          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.querySelector('.wrapper');
+        return this.scrollContainer;
+    }
+    getWrapper() {
+        return this.wrapper;
     }
     destroy() {
         this.container.remove();
+        this.resizeObserver?.disconnect();
     }
-    delay(fn, delayMs = 100) {
+    delay(fn, delayMs = 10) {
         if (this.timeout) {
             clearTimeout(this.timeout);
         }
@@ -108,127 +126,163 @@ class Renderer extends EventEmitter {
             }, delayMs);
         });
     }
-    renderPeaks(channelData, width, height) {
-        var _a;
-        return __awaiter(this, void 0, void 0, function* () {
-            const { devicePixelRatio } = window;
-            const { ctx } = this;
-            const barWidth = this.options.barWidth != null ? this.options.barWidth * devicePixelRatio : 1;
-            const barGap = this.options.barGap != null ? this.options.barGap * devicePixelRatio : this.options.barWidth ? barWidth / 2 : 0;
-            const barRadius = (_a = this.options.barRadius) !== null && _a !== void 0 ? _a : 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 useNegative = isMono && rightChannel.some((v) => v < 0);
-            const draw = (start, end) => {
-                let prevX = 0;
-                let prevLeft = 0;
-                let prevRight = 0;
-                ctx.beginPath();
-                for (let i = start; i < end; i++) {
-                    const barIndex = Math.round(i * 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;
-                    }
+    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 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.fillStyle = this.options.waveColor;
-                ctx.fill();
-                ctx.closePath();
-            };
-            // Clear the canvas
-            ctx.clearRect(0, 0, width, height);
-            // Draw 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((scrollLeft + clientWidth) * scale);
-            draw(start, end);
-            // Draw the progress mask
-            this.createProgressMask();
-            // Draw the rest of the waveform with a timeout for better performance
-            if (start > 0) {
-                yield this.delay(() => {
-                    draw(0, start);
-                });
             }
-            if (end < len) {
-                yield this.delay(() => {
-                    draw(end, len);
-                });
+            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);
             }
-            // Redraw the progress mask
-            this.delay(() => {
-                this.createProgressMask();
+            // 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;
+        let viewportWidth = Math.min(Renderer.MAX_CANVAS_WIDTH, clientWidth);
+        viewportWidth -= viewportWidth % ((barWidth + barGap) / pixelRatio);
+        const start = Math.floor(Math.abs(scrollLeft) * scale);
+        const end = Math.ceil(start + viewportWidth * 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));
             });
-        });
-    }
-    createProgressMask() {
-        const progressCtx = this.progressCanvas.getContext('2d', { desynchronized: true });
-        // Set the canvas to the same size as the main canvas
-        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;
-        // Copy the waveform image to the progress canvas
-        // The main canvas itself is used as the source image
-        progressCtx.drawImage(this.mainCanvas, 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, this.progressCanvas.width, this.progressCanvas.height);
+        }
+        for (let i = start - 1; i >= 0; i -= step) {
+            await this.delay(() => {
+                draw(Math.max(0, i - step), i);
+            });
+        }
     }
     render(channelData, duration) {
-        // Determine the width of the canvas
-        const { devicePixelRatio } = window;
-        const parentWidth = this.scrollContainer.clientWidth * devicePixelRatio;
-        const scrollWidth = duration * this.options.minPxPerSec;
-        const scrollParent = scrollWidth > parentWidth;
-        const width = scrollParent ? scrollWidth : parentWidth;
+        // 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 = scrollParent ? Math.round(scrollWidth / devicePixelRatio) + 'px' : '100%';
-        this.renderPeaks(channelData, width, height);
+        // 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;
+        if (isNaN(progress))
+            return;
+        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;
+                }
             }
         }
     }
 }
+Renderer.MAX_CANVAS_WIDTH = 4000;
 export default Renderer;

package/dist/timer.d.ts

@@ -1,6 +1,6 @@
 import EventEmitter from './event-emitter.js';
 type TimerEvents = {
-    tick: void;
+    tick: [];
 };
 declare class Timer extends EventEmitter<TimerEvents> {
     private unsubscribe;

package/dist/wavesurfer.d.ts

@@ -0,0 +1,134 @@
+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;
+    /** The 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 width */
+    cursorWidth?: number;
+    /** If set, the waveform will be rendered with bars like this: ▁ ▂ ▇ ▃ ▅ ▂ */
+    barWidth?: number;
+    /** Spacing between bars in pixels */
+    barGap?: number;
+    /** Rounded borders for bars */
+    barRadius?: number;
+    /** Minimum pixels per second of audio (i.e. zoom level) */
+    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;
+    /** Pass false to disable clicks on the waveform */
+    interact?: boolean;
+    /** Hide the scrollbar */
+    hideScrollbar?: boolean;
+    /** Audio rate */
+    audioRate?: number;
+    /** Keep scroll in the center of the waveform during playback */
+    autoCenter?: boolean;
+    /** The list of plugins to initialize on start */
+    plugins?: GenericPlugin[];
+};
+declare const defaultOptions: {
+    height: number;
+    waveColor: string;
+    progressColor: string;
+    cursorWidth: number;
+    minPxPerSec: number;
+    fillParent: boolean;
+    interact: boolean;
+    autoCenter: boolean;
+};
+export type WaveSurferEvents = {
+    /** When audio starts loading */
+    load: [url: string];
+    /** When the audio has been decoded */
+    decode: [duration: number];
+    /** When the media element has loaded enough to play */
+    canplay: [duration: number];
+    /** When the audio is both decoded and can play */
+    ready: [duration: number];
+    /** When a waveform is drawn */
+    redraw: [];
+    /** When the audio starts playing */
+    play: [];
+    /** When the audio pauses */
+    pause: [];
+    /** When the audio finishes playing */
+    finish: [];
+    /** On audio position change, fires continuously while the audio is playing */
+    timeupdate: [currentTime: number];
+    /** An alias of timeupdate but only when the audio is playing */
+    audioprocess: [currentTime: number];
+    /** When the user seeks to a new position */
+    seeking: [currentTime: number];
+    /** When a user interaction (i.e. a click on the waveform) happens */
+    interaction: [];
+    /** When the zoom level changes */
+    zoom: [minPxPerSec: number];
+    /** Just before the waveform is destroyed so you can clean up your events */
+    destroy: [];
+};
+declare class WaveSurfer extends Player<WaveSurferEvents> {
+    options: WaveSurferOptions & typeof defaultOptions;
+    private fetcher;
+    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;
+    /** Get all registered plugins */
+    getActivePlugins(): GenericPlugin[];
+    /** 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;
+    /** Get the duration of the audio in seconds */
+    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;