wavesurfer.js 7.0.0-beta.6 → 7.0.0-beta.7

package/dist/src/renderer.js

@@ -1,420 +0,0 @@
-import EventEmitter from './event-emitter.js';
-class Renderer extends EventEmitter {
-    static MAX_CANVAS_WIDTH = 4000;
-    options;
-    container;
-    scrollContainer;
-    wrapper;
-    canvasWrapper;
-    progressWrapper;
-    cursor;
-    timeouts = [];
-    isScrolling = false;
-    audioData = null;
-    resizeObserver = null;
-    isDragging = false;
-    constructor(options) {
-        super();
-        this.options = options;
-        let container;
-        if (typeof options.container === 'string') {
-            container = document.querySelector(options.container);
-        }
-        else if (options.container instanceof HTMLElement) {
-            container = options.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');
-        this.cursor = shadow.querySelector('.cursor');
-        this.initEvents();
-    }
-    initEvents() {
-        // Add a click listener
-        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);
-        });
-        // Drag
-        this.initDrag();
-        // Add a scroll listener
-        this.scrollContainer.addEventListener('scroll', () => {
-            const { scrollLeft, scrollWidth, clientWidth } = this.scrollContainer;
-            const startX = scrollLeft / scrollWidth;
-            const endX = (scrollLeft + clientWidth) / scrollWidth;
-            this.emit('scroll', startX, endX);
-        });
-        // Re-render the waveform on container resize
-        const delay = this.createDelay(100);
-        this.resizeObserver = new ResizeObserver(() => {
-            delay(() => this.reRender());
-        });
-        this.resizeObserver.observe(this.scrollContainer);
-    }
-    initDrag() {
-        this.wrapper.addEventListener('mousedown', (e) => {
-            const minDx = 5;
-            const x = e.clientX;
-            const move = (e) => {
-                const diff = Math.abs(e.clientX - x);
-                if (diff >= minDx) {
-                    this.isDragging = true;
-                    const rect = this.wrapper.getBoundingClientRect();
-                    this.emit('drag', Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width)));
-                }
-            };
-            const up = () => {
-                document.removeEventListener('mousemove', move);
-                document.removeEventListener('mouseup', up);
-                this.isDragging = false;
-            };
-            document.addEventListener('mousemove', move);
-            document.addEventListener('mouseup', up);
-        });
-    }
-    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: hidden;
-          width: 100%;
-          position: relative;
-        }
-        :host .noScrollbar {
-          scrollbar-color: transparent;
-          scrollbar-width: none;
-        }
-        :host .noScrollbar::-webkit-scrollbar {
-          display: none;
-          -webkit-appearance: none;
-        }
-        :host .wrapper {
-          position: relative;
-          overflow: visible;
-          z-index: 2;
-        }
-        :host .canvases {
-          min-height: ${this.options.height}px;
-        }
-        :host .canvases > div {
-          position: relative;
-        }
-        :host canvas {
-          display: block;
-          position: absolute;
-          top: 0;
-          image-rendering: crisp-edges;
-        }
-        :host .progress {
-          pointer-events: none;
-          position: absolute;
-          z-index: 2;
-          top: 0;
-          left: 0;
-          width: 0;
-          height: 100%;
-          overflow: hidden;
-        }
-        :host .progress > div {
-          position: relative;
-        }
-        :host .cursor {
-          pointer-events: none;
-          position: absolute;
-          z-index: 5;
-          top: 0;
-          left: 0;
-          height: 100%;
-          border-radius: 2px;
-        }
-      </style>
-
-      <div class="scroll" part="scroll">
-        <div class="wrapper">
-          <div class="canvases"></div>
-          <div class="progress"></div>
-          <div class="cursor" part="cursor"></div>
-        </div>
-      </div>
-    `;
-        return [div, shadow];
-    }
-    setOptions(options) {
-        this.options = options;
-        // Re-render the waveform
-        this.reRender();
-    }
-    getWrapper() {
-        return this.wrapper;
-    }
-    getScroll() {
-        return this.scrollContainer.scrollLeft;
-    }
-    destroy() {
-        this.container.remove();
-        this.resizeObserver?.disconnect();
-    }
-    createDelay(delayMs = 10) {
-        const context = {};
-        this.timeouts.push(context);
-        return (callback) => {
-            context.timeout && clearTimeout(context.timeout);
-            context.timeout = setTimeout(callback, delayMs);
-        };
-    }
-    // Convert array of color values to linear gradient
-    convertColorValues(color) {
-        if (!Array.isArray(color))
-            return color || '';
-        if (color.length < 2)
-            return color.length === 1 ? color[0] : '';
-        const canvasElement = document.createElement('canvas');
-        const ctx = canvasElement.getContext('2d');
-        const gradient = ctx.createLinearGradient(0, 0, 0, canvasElement.height);
-        const colorStopPercentage = 1 / (color.length - 1);
-        color.forEach((color, index) => {
-            const offset = index * colorStopPercentage;
-            gradient.addColorStop(offset, color);
-        });
-        return gradient;
-    }
-    renderSingleCanvas(channelData, options, width, start, end, canvasContainer, progressContainer) {
-        const pixelRatio = window.devicePixelRatio || 1;
-        const height = options.height || 0;
-        const barWidth = options.barWidth != null && !isNaN(options.barWidth) ? options.barWidth * pixelRatio : 1;
-        const barGap = options.barGap != null && !isNaN(options.barGap)
-            ? options.barGap * pixelRatio
-            : options.barWidth
-                ? barWidth / 2
-                : 0;
-        const barRadius = options.barRadius || 0;
-        const barScale = options.barHeight || 1;
-        const isMono = channelData.length === 1;
-        const leftChannel = channelData[0];
-        const rightChannel = isMono ? leftChannel : channelData[1];
-        const useNegative = isMono && rightChannel.some((v) => v < 0);
-        const length = leftChannel.length;
-        const barCount = Math.floor(width / (barWidth + barGap));
-        const barIndexScale = barCount / length;
-        const halfHeight = height / 2;
-        let prevX = 0;
-        let prevLeft = 0;
-        let prevRight = 0;
-        const canvas = document.createElement('canvas');
-        canvas.width = Math.round((width * (end - start)) / length);
-        canvas.height = height * pixelRatio;
-        canvas.style.width = `${Math.floor(canvas.width / pixelRatio)}px`;
-        canvas.style.height = `${options.height}px`;
-        canvas.style.left = `${Math.floor((start * width) / pixelRatio / length)}px`;
-        canvasContainer.appendChild(canvas);
-        const ctx = canvas.getContext('2d', {
-            desynchronized: true,
-        });
-        ctx.beginPath();
-        ctx.fillStyle = this.convertColorValues(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 * barScale);
-                const rightBarHeight = Math.round(prevRight * halfHeight * barScale);
-                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();
-        progressContainer.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.convertColorValues(options.progressColor);
-        // This rectangle acts as a mask thanks to the composition method
-        progressCtx.fillRect(0, 0, canvas.width, canvas.height);
-    }
-    renderWaveform(channelData, options, width) {
-        // A container for canvases
-        const canvasContainer = document.createElement('div');
-        canvasContainer.style.height = `${options.height}px`;
-        this.canvasWrapper.appendChild(canvasContainer);
-        // A container for progress canvases
-        const progressContainer = canvasContainer.cloneNode();
-        this.progressWrapper.appendChild(progressContainer);
-        // Determine the currently visible part of the waveform
-        const { scrollLeft, scrollWidth, clientWidth } = this.scrollContainer;
-        const len = channelData[0].length;
-        const scale = len / scrollWidth;
-        const viewportWidth = Math.min(Renderer.MAX_CANVAS_WIDTH, clientWidth);
-        const start = Math.floor(Math.abs(scrollLeft) * scale);
-        const end = Math.ceil(start + viewportWidth * scale);
-        const viewportLen = end - start;
-        // Draw a portion of the waveform from start peak to end peak
-        const draw = (start, end) => {
-            this.renderSingleCanvas(channelData, options, width, Math.max(0, start), Math.min(end, len), canvasContainer, progressContainer);
-        };
-        // Draw the waveform in viewport chunks, each with a delay
-        const headDelay = this.createDelay();
-        const tailDelay = this.createDelay();
-        const renderHead = (fromIndex, toIndex) => {
-            draw(fromIndex, toIndex);
-            if (fromIndex > 0) {
-                headDelay(() => {
-                    renderHead(fromIndex - viewportLen, toIndex - viewportLen);
-                });
-            }
-        };
-        const renderTail = (fromIndex, toIndex) => {
-            draw(fromIndex, toIndex);
-            if (toIndex < len) {
-                tailDelay(() => {
-                    renderTail(fromIndex + viewportLen, toIndex + viewportLen);
-                });
-            }
-        };
-        renderHead(start, end);
-        if (end < len) {
-            renderTail(end, end + viewportLen);
-        }
-    }
-    render(audioData) {
-        // Clear previous timeouts
-        this.timeouts.forEach((context) => context.timeout && clearTimeout(context.timeout));
-        this.timeouts = [];
-        // Determine the width of the waveform
-        const pixelRatio = window.devicePixelRatio || 1;
-        const parentWidth = this.scrollContainer.clientWidth;
-        const scrollWidth = Math.ceil(audioData.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;
-        // 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.cursor.style.backgroundColor = `${this.options.cursorColor || this.options.progressColor}`;
-        this.cursor.style.width = `${this.options.cursorWidth}px`;
-        // Clear the canvases
-        this.canvasWrapper.innerHTML = '';
-        this.progressWrapper.innerHTML = '';
-        // Render the waveform
-        if (this.options.splitChannels) {
-            // Render a waveform for each channel
-            for (let i = 0; i < audioData.numberOfChannels; i++) {
-                const options = { ...this.options, ...this.options.splitChannels[i] };
-                this.renderWaveform([audioData.getChannelData(i)], options, width);
-            }
-        }
-        else {
-            // Render a single waveform for the first two channels (left and right)
-            const channels = [audioData.getChannelData(0)];
-            if (audioData.numberOfChannels > 1)
-                channels.push(audioData.getChannelData(1));
-            this.renderWaveform(channels, this.options, width);
-        }
-        this.audioData = audioData;
-        this.emit('render');
-    }
-    reRender() {
-        // Return if the waveform has not been rendered yet
-        if (!this.audioData)
-            return;
-        // Remember the current cursor position
-        const oldCursorPosition = this.progressWrapper.clientWidth;
-        // Set the new zoom level and re-render the waveform
-        this.render(this.audioData);
-        // Adjust the scroll position so that the cursor stays in the same place
-        const newCursortPosition = this.progressWrapper.clientWidth;
-        this.scrollContainer.scrollLeft += newCursortPosition - oldCursorPosition;
-    }
-    zoom(minPxPerSec) {
-        this.options.minPxPerSec = minPxPerSec;
-        this.reRender();
-    }
-    scrollIntoView(progress, isPlaying = false) {
-        const { clientWidth, scrollLeft, scrollWidth } = this.scrollContainer;
-        const progressWidth = scrollWidth * progress;
-        const center = clientWidth / 2;
-        const minScroll = isPlaying && this.options.autoCenter && !this.isDragging ? center : clientWidth;
-        if (progressWidth > scrollLeft + minScroll || progressWidth < scrollLeft) {
-            // Scroll to the center
-            if (this.options.autoCenter && !this.isDragging) {
-                // If the cursor is in viewport but not centered, scroll to the center slowly
-                const minDiff = center / 20;
-                if (progressWidth - (scrollLeft + center) >= minDiff && progressWidth < scrollLeft + clientWidth) {
-                    this.scrollContainer.scrollLeft += minDiff;
-                }
-                else {
-                    // Otherwise, scroll to the center immediately
-                    this.scrollContainer.scrollLeft = progressWidth - center;
-                }
-            }
-            else if (this.isDragging) {
-                // Scroll just a little bit to allow for some space between the cursor and the edge
-                const gap = 10;
-                this.scrollContainer.scrollLeft =
-                    progressWidth < scrollLeft ? progressWidth - gap : progressWidth - clientWidth + gap;
-            }
-            else {
-                // Scroll to the beginning
-                this.scrollContainer.scrollLeft = progressWidth;
-            }
-        }
-        // Emit the scroll event
-        {
-            const { scrollLeft } = this.scrollContainer;
-            const startX = scrollLeft / scrollWidth;
-            const endX = (scrollLeft + clientWidth) / scrollWidth;
-            this.emit('scroll', startX, endX);
-        }
-    }
-    renderProgress(progress, isPlaying) {
-        if (isNaN(progress))
-            return;
-        this.progressWrapper.style.width = `${progress * 100}%`;
-        this.cursor.style.left = `${progress * 100}%`;
-        this.cursor.style.marginLeft = Math.round(progress * 100) === 100 ? `-${this.options.cursorWidth}px` : '';
-        if (this.isScrolling && this.options.autoScroll) {
-            this.scrollIntoView(progress, isPlaying);
-        }
-    }
-}
-export default Renderer;

package/dist/src/timer.d.ts

@@ -1,11 +0,0 @@
-import EventEmitter from './event-emitter.js';
-type TimerEvents = {
-    tick: [];
-};
-declare class Timer extends EventEmitter<TimerEvents> {
-    private unsubscribe;
-    start(): void;
-    stop(): void;
-    destroy(): void;
-}
-export default Timer;

package/dist/src/timer.js

@@ -1,19 +0,0 @@
-import EventEmitter from './event-emitter.js';
-class Timer extends EventEmitter {
-    unsubscribe = () => undefined;
-    start() {
-        this.unsubscribe = this.on('tick', () => {
-            requestAnimationFrame(() => {
-                this.emit('tick');
-            });
-        });
-        this.emit('tick');
-    }
-    stop() {
-        this.unsubscribe();
-    }
-    destroy() {
-        this.unsubscribe();
-    }
-}
-export default Timer;

package/dist/src/wavesurfer.d.ts

@@ -1,149 +0,0 @@
-import type { GenericPlugin } from './base-plugin.js';
-import Player from './player.js';
-export type WaveSurferColor = string | string[] | CanvasGradient;
-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?: WaveSurferColor;
-    /** The color of the progress mask */
-    progressColor?: WaveSurferColor;
-    /** The color of the playpack cursor */
-    cursorColor?: string;
-    /** The cursor width */
-    cursorWidth?: number;
-    /** Render the waveform with bars like this: ▁ ▂ ▇ ▃ ▅ ▂ */
-    barWidth?: number;
-    /** Spacing between bars in pixels */
-    barGap?: number;
-    /** Rounded borders for bars */
-    barRadius?: number;
-    /** A vertical scaling factor for the waveform */
-    barHeight?: 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;
-    /** Automatically scroll the container to keep the current position in viewport */
-    autoScroll?: boolean;
-    /** If autoScroll is enabled, keep the cursor in the center of the waveform during playback */
-    autoCenter?: boolean;
-    /** Decoding sample rate. Doesn't affect the playback. Defaults to 8000 */
-    sampleRate?: number;
-    /** Render each audio channel as a separate waveform */
-    splitChannels?: WaveSurferOptions[];
-    /** The list of plugins to initialize on start */
-    plugins?: GenericPlugin[];
-};
-declare const defaultOptions: {
-    height: number;
-    waveColor: WaveSurferColor;
-    progressColor: WaveSurferColor;
-    cursorWidth: number;
-    minPxPerSec: number;
-    fillParent: boolean;
-    interact: boolean;
-    autoScroll: boolean;
-    autoCenter: boolean;
-    sampleRate: number;
-};
-export type WaveSurferEvents = {
-    /** When audio starts loading */
-    load: [url: string];
-    /** When the audio has been decoded */
-    decode: [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 during playback */
-    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 the user interacts with the waveform (i.g. clicks or drags on it) */
-    interaction: [];
-    /** When the user clicks on the waveform */
-    click: [relativeX: number];
-    /** When the user drags the cursor */
-    drag: [relativeX: number];
-    /** When the waveform is scrolled (panned) */
-    scroll: [visibleStartTime: number, visibleEndTime: number];
-    /** 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 renderer;
-    private timer;
-    private plugins;
-    private decodedData;
-    protected subscriptions: Array<() => void>;
-    /** Create a new WaveSurfer instance */
-    static create(options: WaveSurferOptions): WaveSurfer;
-    /** Create a new WaveSurfer instance */
-    constructor(options: WaveSurferOptions);
-    setOptions(options: Partial<WaveSurferOptions>): void;
-    private initPlayerEvents;
-    private initRendererEvents;
-    private initTimerEvents;
-    private initPlugins;
-    /** Register a wavesurfer.js plugin */
-    registerPlugin<T extends GenericPlugin>(plugin: T): T;
-    /** For plugins only: get the waveform wrapper div */
-    getWrapper(): HTMLElement;
-    /** Get the current scroll position in pixels */
-    getScroll(): number;
-    /** 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>;
-    /** 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;