wavesurfer.js 7.0.0-alpha.9 → 7.0.0-beta.2

package/dist/index.d.ts

@@ -1,117 +0,0 @@
-import EventEmitter, { type GeneralEventTypes } from './event-emitter.js';
-import BasePlugin 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 cursort */
-    cursorColor?: string;
-    /** 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[];
-    /** 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? */
-    interactive?: boolean;
-};
-export type WaveSurferEvents = {
-    decode: {
-        duration: number;
-    };
-    canplay: {
-        duration: number;
-    };
-    ready: {
-        duration: number;
-    };
-    play: void;
-    pause: void;
-    timeupdate: {
-        currentTime: number;
-    };
-    seeking: {
-        currentTime: number;
-    };
-    seekClick: {
-        currentTime: number;
-    };
-    destroy: void;
-};
-export type WaveSurferPluginParams = {
-    wavesurfer: WaveSurfer;
-    container: HTMLElement;
-};
-export declare class WaveSurfer extends EventEmitter<WaveSurferEvents> {
-    private options;
-    private fetcher;
-    private decoder;
-    private renderer;
-    private player;
-    private timer;
-    private plugins;
-    private subscriptions;
-    private decodedData;
-    /** Create a new WaveSurfer instance */
-    static create(options: WaveSurferOptions): WaveSurfer;
-    /** Create a new WaveSurfer instance */
-    constructor(options: WaveSurferOptions);
-    private initPlayerEvents;
-    private initRendererEvents;
-    private initTimerEvents;
-    private initReadyEvent;
-    /** Load an audio file by URL, with optional pre-decoded audio data */
-    load(url: string, channelData?: Float32Array[], duration?: number): Promise<void>;
-    /** Zoom in or out */
-    zoom(minPxPerSec: number): void;
-    /** Start playing the audio */
-    play(): void;
-    /** Pause the audio */
-    pause(): void;
-    /** Skip to a time position in seconds */
-    seekTo(time: number): void;
-    /** Check if the audio is playing */
-    isPlaying(): boolean;
-    /** Get the duration of the audio in seconds */
-    getDuration(): number;
-    /** Get the current audio position in seconds */
-    getCurrentTime(): number;
-    /** Get the audio volume */
-    getVolume(): number;
-    /** Set the audio volume */
-    setVolume(volume: number): void;
-    /** Get the audio muted state */
-    getMuted(): boolean;
-    /** Mute or unmute the audio */
-    setMuted(muted: boolean): void;
-    /** Get playback rate */
-    getPlaybackRate(): number;
-    /** Set playback rate, with an optional parameter to NOT preserve the pitch if false */
-    setPlaybackRate(rate: number, preservePitch?: boolean): void;
-    /** Register and initialize a plugin */
-    registerPlugin<T extends BasePlugin<GeneralEventTypes, any>>(CustomPlugin: new (params: WaveSurferPluginParams, options: any) => T, options?: any): T;
-    /** Get the decoded audio data */
-    getDecodedData(): AudioBuffer | null;
-    /** Unmount wavesurfer */
-    destroy(): void;
-}
-export default WaveSurfer;

package/dist/index.js

@@ -1,227 +0,0 @@
-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 Fetcher from './fetcher.js';
-import Decoder from './decoder.js';
-import Renderer from './renderer.js';
-import Player from './player.js';
-import EventEmitter from './event-emitter.js';
-import Timer from './timer.js';
-const defaultOptions = {
-    height: 128,
-    waveColor: '#999',
-    progressColor: '#555',
-    minPxPerSec: 0,
-    fillParent: true,
-    interactive: true,
-};
-export class WaveSurfer extends EventEmitter {
-    /** Create a new WaveSurfer instance */
-    static create(options) {
-        return new WaveSurfer(options);
-    }
-    /** Create a new WaveSurfer instance */
-    constructor(options) {
-        var _a;
-        super();
-        this.plugins = [];
-        this.subscriptions = [];
-        this.decodedData = null;
-        this.options = Object.assign({}, defaultOptions, options);
-        this.fetcher = new Fetcher();
-        this.decoder = new Decoder();
-        this.timer = new Timer();
-        this.player = new Player({
-            media: this.options.media,
-            autoplay: this.options.autoplay,
-        });
-        this.renderer = new Renderer({
-            container: this.options.container,
-            height: this.options.height,
-            waveColor: this.options.waveColor,
-            progressColor: this.options.progressColor,
-            cursorColor: this.options.cursorColor,
-            minPxPerSec: this.options.minPxPerSec,
-            fillParent: this.options.fillParent,
-            barWidth: this.options.barWidth,
-            barGap: this.options.barGap,
-            barRadius: this.options.barRadius,
-        });
-        this.initPlayerEvents();
-        this.initRendererEvents();
-        this.initTimerEvents();
-        this.initReadyEvent();
-        const url = this.options.url || ((_a = this.options.media) === null || _a === void 0 ? void 0 : _a.src);
-        if (url) {
-            this.load(url, this.options.peaks, this.options.duration);
-        }
-    }
-    initPlayerEvents() {
-        this.subscriptions.push(this.player.on('timeupdate', () => {
-            const currentTime = this.getCurrentTime();
-            this.renderer.renderProgress(currentTime / this.getDuration(), this.isPlaying());
-            this.emit('timeupdate', { currentTime });
-        }), this.player.on('play', () => {
-            this.emit('play');
-            this.timer.start();
-        }), this.player.on('pause', () => {
-            this.emit('pause');
-            this.timer.stop();
-        }), this.player.on('canplay', () => {
-            this.emit('canplay', { duration: this.getDuration() });
-        }), this.player.on('seeking', () => {
-            this.emit('seeking', { currentTime: this.getCurrentTime() });
-        }));
-    }
-    initRendererEvents() {
-        // Seek on click
-        this.subscriptions.push(this.renderer.on('click', ({ relativeX }) => {
-            if (this.options.interactive) {
-                const time = this.getDuration() * relativeX;
-                this.seekTo(time);
-                this.emit('seekClick', { currentTime: this.getCurrentTime() });
-            }
-        }));
-    }
-    initTimerEvents() {
-        // The timer fires every 16ms for a smooth progress animation
-        this.subscriptions.push(this.timer.on('tick', () => {
-            const currentTime = this.getCurrentTime();
-            this.renderer.renderProgress(currentTime / this.getDuration(), true);
-            this.emit('timeupdate', { currentTime });
-        }));
-    }
-    initReadyEvent() {
-        let isDecoded = false;
-        let isPlayable = false;
-        const emitReady = () => {
-            if (isDecoded && isPlayable) {
-                this.emit('ready', { duration: this.getDuration() });
-            }
-        };
-        this.subscriptions.push(this.on('decode', () => {
-            isDecoded = true;
-            emitReady();
-        }), this.on('canplay', () => {
-            isPlayable = true;
-            emitReady();
-        }), this.player.on('waiting', () => {
-            isPlayable = false;
-            isDecoded = false;
-        }));
-    }
-    /** Load an audio file by URL, with optional pre-decoded audio data */
-    load(url, channelData, duration) {
-        return __awaiter(this, void 0, void 0, function* () {
-            this.player.loadUrl(url);
-            // Fetch and decode the audio of no pre-computed audio data is provided
-            if (channelData == null) {
-                const audio = yield this.fetcher.load(url);
-                const data = yield this.decoder.decode(audio);
-                this.decodedData = data;
-            }
-            else {
-                if (!duration) {
-                    duration =
-                        (yield new Promise((resolve) => {
-                            this.player.on('canplay', () => resolve(this.getDuration()), { once: true });
-                        })) || 0;
-                }
-                this.decodedData = {
-                    duration,
-                    numberOfChannels: channelData.length,
-                    sampleRate: channelData[0].length / duration,
-                    getChannelData: (i) => channelData[i],
-                };
-            }
-            this.renderer.render(this.decodedData);
-            this.emit('decode', { duration: this.decodedData.duration });
-        });
-    }
-    /** Zoom in or out */
-    zoom(minPxPerSec) {
-        if (!this.decodedData) {
-            throw new Error('No audio loaded');
-        }
-        this.renderer.zoom(this.decodedData, minPxPerSec);
-    }
-    /** Start playing the audio */
-    play() {
-        this.player.play();
-    }
-    /** Pause the audio */
-    pause() {
-        this.player.pause();
-    }
-    /** Skip to a time position in seconds */
-    seekTo(time) {
-        this.player.seekTo(time);
-    }
-    /** Check if the audio is playing */
-    isPlaying() {
-        return this.player.isPlaying();
-    }
-    /** Get the duration of the audio in seconds */
-    getDuration() {
-        var _a;
-        return this.player.getDuration() || ((_a = this.decodedData) === null || _a === void 0 ? void 0 : _a.duration) || 0;
-    }
-    /** Get the current audio position in seconds */
-    getCurrentTime() {
-        return this.player.getCurrentTime();
-    }
-    /** Get the audio volume */
-    getVolume() {
-        return this.player.getVolume();
-    }
-    /** Set the audio volume */
-    setVolume(volume) {
-        this.player.setVolume(volume);
-    }
-    /** Get the audio muted state */
-    getMuted() {
-        return this.player.getMuted();
-    }
-    /** Mute or unmute the audio */
-    setMuted(muted) {
-        this.player.setMuted(muted);
-    }
-    /** Get playback rate */
-    getPlaybackRate() {
-        return this.player.getPlaybackRate();
-    }
-    /** Set playback rate, with an optional parameter to NOT preserve the pitch if false */
-    setPlaybackRate(rate, preservePitch) {
-        this.player.setPlaybackRate(rate, preservePitch);
-    }
-    /** Register and initialize a plugin */
-    registerPlugin(CustomPlugin, options) {
-        const plugin = new CustomPlugin({
-            wavesurfer: this,
-            container: this.renderer.getContainer(),
-        }, options);
-        this.plugins.push(plugin);
-        return plugin;
-    }
-    /** Get the decoded audio data */
-    getDecodedData() {
-        return this.decodedData;
-    }
-    /** Unmount wavesurfer */
-    destroy() {
-        this.emit('destroy');
-        this.subscriptions.forEach((unsubscribe) => unsubscribe());
-        this.plugins.forEach((plugin) => plugin.destroy());
-        this.timer.destroy();
-        this.player.destroy();
-        this.decoder.destroy();
-        this.renderer.destroy();
-    }
-}
-export default WaveSurfer;

package/dist/player-webaudio.d.ts

@@ -1,8 +0,0 @@
-import Player from './player.js';
-declare class WebAudioPlayer extends Player {
-    audioCtx: AudioContext | null;
-    sourceNode: MediaElementAudioSourceNode | null;
-    destroy(): void;
-    loadUrl(url: string): void;
-}
-export default WebAudioPlayer;

package/dist/player-webaudio.js

@@ -1,32 +0,0 @@
-import Player from './player.js';
-class WebAudioPlayer extends Player {
-    constructor() {
-        super(...arguments);
-        this.audioCtx = null;
-        this.sourceNode = null;
-    }
-    destroy() {
-        var _a, _b;
-        (_a = this.sourceNode) === null || _a === void 0 ? void 0 : _a.disconnect();
-        this.sourceNode = null;
-        (_b = this.audioCtx) === null || _b === void 0 ? void 0 : _b.close();
-        this.audioCtx = null;
-        super.destroy();
-    }
-    loadUrl(url) {
-        super.loadUrl(url);
-        if (!this.audioCtx) {
-            this.audioCtx = new AudioContext({
-                latencyHint: 'playback',
-            });
-        }
-        if (this.sourceNode) {
-            this.sourceNode.disconnect();
-        }
-        if (this.media) {
-            this.sourceNode = this.audioCtx.createMediaElementSource(this.media);
-            this.sourceNode.connect(this.audioCtx.destination);
-        }
-    }
-}
-export default WebAudioPlayer;

package/dist/plugins/xmultitrack.d.ts

@@ -1,44 +0,0 @@
-import { type WaveSurferOptions } from '../index.js';
-type MultitrackTracks = Array<{
-    id: string | number;
-    url?: string;
-    peaks?: WaveSurferOptions['peaks'];
-    draggable?: boolean;
-    startPosition: number;
-    startCue?: number;
-    endCue?: number;
-    markers?: Array<{
-        id: string | number;
-        time: number;
-        label?: string;
-        color?: string;
-    }>;
-}>;
-type MultitrackOptions = {
-    container: HTMLElement;
-    minPxPerSec: number;
-} & WaveSurferOptions;
-declare class MultiTrack {
-    private tracks;
-    private options;
-    private audios;
-    private wavesurfers;
-    private durations;
-    private currentTime;
-    private maxDuration;
-    private rendering;
-    private isDragging;
-    static create(tracks: MultitrackTracks, options: MultitrackOptions): MultiTrack;
-    constructor(tracks: MultitrackTracks, options: MultitrackOptions);
-    private initAudios;
-    private initWavesurfers;
-    private updatePosition;
-    private onSeek;
-    private onDrag;
-    private findCurrentTracks;
-    play(): void;
-    pause(): void;
-    isPlaying(): boolean;
-    destroy(): void;
-}
-export default MultiTrack;

package/dist/plugins/xmultitrack.js

@@ -1,260 +0,0 @@
-import WaveSurfer from '../index.js';
-import RegionsPlugin from './regions.js';
-class MultiTrack {
-    static create(tracks, options) {
-        return new MultiTrack(tracks, options);
-    }
-    constructor(tracks, options) {
-        this.audios = [];
-        this.wavesurfers = [];
-        this.durations = [];
-        this.currentTime = 0;
-        this.maxDuration = 0;
-        this.isDragging = false;
-        this.tracks = tracks.map((track) => (Object.assign(Object.assign({}, track), { startPosition: track.startPosition || 0 })));
-        this.options = options;
-        this.rendering = initRendering(this.tracks, this.options);
-        this.initAudios().then((durations) => {
-            this.durations = durations;
-            const maxDuration = this.tracks.reduce((max, track, index) => {
-                return Math.max(max, track.startPosition + durations[index]);
-            }, 0);
-            this.rendering.setMainWidth(maxDuration * this.options.minPxPerSec);
-            this.rendering.addClickHandler((position) => {
-                this.onSeek(position * maxDuration);
-            });
-            this.maxDuration = maxDuration;
-        });
-        this.initWavesurfers();
-        this.rendering.containers.forEach((container, index) => {
-            const drag = initDragging(container, (delta) => this.onDrag(index, delta));
-            this.wavesurfers[index].once('destroy', () => {
-                drag === null || drag === void 0 ? void 0 : drag.destroy();
-            });
-        });
-    }
-    initAudios() {
-        const emptyTrackUrl = 'data:audio/wav;base64,UklGRigAAABXQVZFZm10IBIAAAABAAEARKwAAIhYAQACABAAAABkYXRhAgAAAAEA';
-        this.audios = this.tracks.map((track) => new Audio(track.url || emptyTrackUrl));
-        return Promise.all(this.audios.map((audio) => {
-            return new Promise((resolve) => {
-                audio.addEventListener('canplay', () => {
-                    resolve(audio.duration);
-                }, { once: true });
-            });
-        }));
-    }
-    initWavesurfers() {
-        const wavesurfers = this.tracks.map((track, index) => {
-            // Create a wavesurfer instance
-            const ws = WaveSurfer.create(Object.assign(Object.assign({}, this.options), { container: this.rendering.containers[index], media: this.audios[index], peaks: track.peaks, cursorColor: 'transparent', fillParent: false, interactive: false }));
-            ws.on('timeupdate', ({ currentTime }) => {
-                if (ws.isPlaying() && currentTime + track.startPosition > this.currentTime) {
-                    this.updatePosition(track.startPosition + currentTime);
-                }
-            });
-            const wsRegions = ws.registerPlugin(RegionsPlugin, {
-                draggable: false,
-                resizable: false,
-                dragSelection: false,
-            });
-            ws.once('decode', () => {
-                // Render start and end cues
-                if (track.startCue) {
-                    wsRegions.add(track.startCue, track.startCue, 'start');
-                }
-                if (track.endCue) {
-                    wsRegions.add(track.endCue, track.endCue, 'end');
-                }
-                // Render markers
-                ;
-                (track.markers || []).forEach((marker) => {
-                    wsRegions.add(marker.time, marker.time, marker.label, marker.color);
-                });
-            });
-            return ws;
-        });
-        this.wavesurfers = wavesurfers;
-    }
-    updatePosition(time) {
-        const precisionSeconds = 0.3;
-        this.currentTime = time;
-        this.rendering.updateCursor(time / this.maxDuration);
-        const isPaused = !this.isPlaying();
-        // Update the current time of each audio
-        this.tracks.forEach((track, index) => {
-            const audio = this.audios[index];
-            const duration = this.durations[index];
-            const newTime = time - track.startPosition;
-            if (Math.abs(audio.currentTime - newTime) > precisionSeconds) {
-                audio.currentTime = newTime;
-            }
-            // If the position is out of the track bounds, pause it
-            if (isPaused || newTime < 0 || newTime > duration) {
-                !audio.paused && audio.pause();
-            }
-            else if (!isPaused) {
-                // If the position is in the track bounds, play it
-                audio.paused && audio.play();
-            }
-            // Unmute if cue is reached
-            const newVolume = newTime >= (track.startCue || 0) && newTime < (track.endCue || Infinity) ? 1 : 0;
-            if (newVolume !== audio.volume)
-                audio.volume = newVolume;
-        });
-    }
-    onSeek(time) {
-        if (this.isDragging)
-            return;
-        const wasPlaying = this.isPlaying();
-        this.updatePosition(time);
-        if (wasPlaying)
-            this.play();
-    }
-    onDrag(index, delta) {
-        const track = this.tracks[index];
-        if (!track.draggable)
-            return;
-        this.isDragging = true;
-        setTimeout(() => (this.isDragging = false), 300);
-        const newTime = track.startPosition + delta * this.maxDuration;
-        track.startPosition = newTime;
-        this.rendering.setContainerOffsets();
-    }
-    findCurrentTracks() {
-        // Find the audios at the current time
-        const indexes = [];
-        this.tracks.forEach((track, index) => {
-            if (track.url &&
-                this.currentTime >= track.startPosition &&
-                this.currentTime < track.startPosition + this.durations[index]) {
-                indexes.push(index);
-            }
-        });
-        if (indexes.length === 0) {
-            const minStartTime = Math.min(...this.tracks.filter((t) => t.url).map((track) => track.startPosition));
-            indexes.push(this.tracks.findIndex((track) => track.startPosition === minStartTime));
-        }
-        return indexes;
-    }
-    play() {
-        const indexes = this.findCurrentTracks();
-        indexes.forEach((index) => {
-            var _a;
-            (_a = this.audios[index]) === null || _a === void 0 ? void 0 : _a.play();
-        });
-    }
-    pause() {
-        this.audios.forEach((audio) => audio.pause());
-    }
-    isPlaying() {
-        return this.audios.some((audio) => !audio.paused);
-    }
-    destroy() {
-        this.rendering.destroy();
-        this.audios.forEach((audio) => {
-            audio.pause();
-            audio.src = '';
-        });
-        this.wavesurfers.forEach((ws) => {
-            ws.destroy();
-        });
-    }
-}
-function initRendering(tracks, options) {
-    // Create a common container for all tracks
-    let scroll = document.createElement('div');
-    scroll.setAttribute('style', 'width: 100%; overflow-x: scroll; overflow-y: hidden; user-select: none;');
-    const wrapper = document.createElement('div');
-    wrapper.style.position = 'relative';
-    scroll.appendChild(wrapper);
-    options.container.appendChild(scroll);
-    // Create a common cursor
-    const cursor = document.createElement('div');
-    cursor.setAttribute('style', 'width: 1px; height: 100%; position: absolute; z-index: 10; top: 0; left: 0');
-    cursor.style.backgroundColor = options.cursorColor || options.progressColor || '#000';
-    wrapper.appendChild(cursor);
-    // Create containers for each track
-    const containers = tracks.map(() => {
-        const container = document.createElement('div');
-        container.style.width = 'fit-content';
-        wrapper.appendChild(container);
-        return container;
-    });
-    // Set the positions of each container
-    const setContainerOffsets = () => {
-        containers.forEach((container, i) => {
-            const offset = (tracks[i].startPosition * options.minPxPerSec) / devicePixelRatio;
-            container.style.transform = `translateX(${offset}px)`;
-            if (tracks[i].draggable)
-                container.style.cursor = 'ew-resize';
-        });
-    };
-    setContainerOffsets();
-    return {
-        containers,
-        // Set the start offset
-        setContainerOffsets,
-        // Set the container width
-        setMainWidth: (width) => {
-            wrapper.style.width = `${width / devicePixelRatio}px`;
-        },
-        // Update cursor position
-        updateCursor: (position) => {
-            cursor.style.left = `${Math.min(100, position * 100)}%`;
-        },
-        // Click to seek
-        addClickHandler: (onClick) => {
-            wrapper.addEventListener('click', (e) => {
-                const rect = wrapper.getBoundingClientRect();
-                const x = e.clientX - rect.left;
-                const position = x / wrapper.offsetWidth;
-                onClick(position);
-            });
-        },
-        // Destroy the container
-        destroy: () => {
-            scroll.remove();
-        },
-    };
-}
-function initDragging(container, onDrag) {
-    const wrapper = container.parentElement;
-    if (!wrapper)
-        return;
-    // Dragging tracks to set position
-    let dragStart = null;
-    // Drag start
-    container.addEventListener('mousedown', (e) => {
-        const rect = wrapper.getBoundingClientRect();
-        dragStart = e.clientX - rect.left;
-    });
-    // Drag end
-    const onMouseUp = (e) => {
-        if (dragStart != null) {
-            e.stopPropagation();
-            dragStart = null;
-        }
-    };
-    // Drag move
-    const onMouseMove = (e) => {
-        if (dragStart == null)
-            return;
-        const rect = wrapper.getBoundingClientRect();
-        const x = e.clientX - rect.left;
-        const diff = x - dragStart;
-        if (diff > 1 || diff < -1) {
-            dragStart = x;
-            onDrag(diff / wrapper.offsetWidth);
-        }
-    };
-    document.body.addEventListener('mouseup', onMouseUp);
-    document.body.addEventListener('mousemove', onMouseMove);
-    return {
-        destroy: () => {
-            document.body.removeEventListener('mouseup', onMouseUp);
-            document.body.removeEventListener('mousemove', onMouseMove);
-        },
-    };
-}
-export default MultiTrack;

package/dist/react/useWavesurfer.d.ts

@@ -1,5 +0,0 @@
-import WaveSurfer, { type WaveSurferOptions } from '../index.js';
-export declare const useWavesurfer: (containerRef: {
-    current: HTMLElement;
-}, options: WaveSurferOptions) => WaveSurfer | null;
-export default useWavesurfer;