wavesurfer.js 7.0.0-alpha.0 → 7.0.0-alpha.10

package/dist/plugins/timeline.js

@@ -0,0 +1,119 @@
+import BasePlugin from '../base-plugin.js';
+const defaultOptions = {
+    height: 20,
+};
+class TimelinePlugin extends BasePlugin {
+    constructor(params, options) {
+        var _a;
+        super(params, options);
+        this.options = Object.assign({}, defaultOptions, options);
+        this.container = (_a = this.options.container) !== null && _a !== void 0 ? _a : this.container;
+        this.wrapper = this.initWrapper();
+        this.container.appendChild(this.wrapper);
+        this.subscriptions.push(this.wavesurfer.on('decode', ({ duration }) => {
+            this.initTimeline(duration);
+        }));
+    }
+    /** Unmount */
+    destroy() {
+        this.wrapper.remove();
+        super.destroy();
+    }
+    initWrapper() {
+        return document.createElement('div');
+    }
+    formatTime(seconds) {
+        if (seconds / 60 > 1) {
+            // calculate minutes and seconds from seconds count
+            const minutes = Math.round(seconds / 60);
+            seconds = Math.round(seconds % 60);
+            const paddedSeconds = `${seconds < 10 ? '0' : ''}${seconds}`;
+            return `${minutes}:${paddedSeconds}`;
+        }
+        const rounded = Math.round(seconds * 1000) / 1000;
+        return `${rounded}`;
+    }
+    // Return how many seconds should be between each notch
+    defaultTimeInterval(pxPerSec) {
+        if (pxPerSec >= 25) {
+            return 1;
+        }
+        else if (pxPerSec * 5 >= 25) {
+            return 5;
+        }
+        else if (pxPerSec * 15 >= 25) {
+            return 15;
+        }
+        return Math.ceil(0.5 / pxPerSec) * 60;
+    }
+    // Return the cadence of notches that get labels in the primary color.
+    defaultPrimaryLabelInterval(pxPerSec) {
+        if (pxPerSec >= 25) {
+            return 10;
+        }
+        else if (pxPerSec * 5 >= 25) {
+            return 6;
+        }
+        else if (pxPerSec * 15 >= 25) {
+            return 4;
+        }
+        return 4;
+    }
+    // Return the cadence of notches that get labels in the secondary color.
+    defaultSecondaryLabelInterval(pxPerSec) {
+        if (pxPerSec >= 25) {
+            return 5;
+        }
+        else if (pxPerSec * 5 >= 25) {
+            return 2;
+        }
+        else if (pxPerSec * 15 >= 25) {
+            return 2;
+        }
+        return 2;
+    }
+    initTimeline(duration) {
+        var _a, _b, _c;
+        const width = Math.round(this.wrapper.scrollWidth * devicePixelRatio);
+        const pxPerSec = width / duration;
+        const timeInterval = (_a = this.options.timeInterval) !== null && _a !== void 0 ? _a : this.defaultTimeInterval(pxPerSec);
+        const primaryLabelInterval = (_b = this.options.primaryLabelInterval) !== null && _b !== void 0 ? _b : this.defaultPrimaryLabelInterval(pxPerSec);
+        const secondaryLabelInterval = (_c = this.options.secondaryLabelInterval) !== null && _c !== void 0 ? _c : this.defaultSecondaryLabelInterval(pxPerSec);
+        const timeline = document.createElement('div');
+        timeline.setAttribute('style', `
+      height: ${this.options.height}px;
+      overflow: hidden;
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-end;
+      font-size: ${this.options.height / 2}px;
+    `);
+        const notchEl = document.createElement('div');
+        notchEl.setAttribute('style', `
+      width: 1px;
+      height: 50%;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
+      overflow: visible;
+      border-left: 1px solid currentColor;
+      opacity: 0.25;
+    `);
+        for (let i = 0; i < duration; i += timeInterval) {
+            const notch = notchEl.cloneNode();
+            const isPrimary = i % primaryLabelInterval === 0;
+            const isSecondary = i % secondaryLabelInterval === 0;
+            if (isPrimary || isSecondary) {
+                notch.style.height = '100%';
+                notch.style.textIndent = '3px';
+                notch.textContent = this.formatTime(i);
+                if (isPrimary)
+                    notch.style.opacity = '1';
+            }
+            timeline.appendChild(notch);
+        }
+        this.wrapper.appendChild(timeline);
+        this.emit('ready');
+    }
+}
+export default TimelinePlugin;

package/dist/plugins/xmultitrack.d.ts

@@ -0,0 +1,44 @@
+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

@@ -0,0 +1,260 @@
+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

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

package/dist/react/useWavesurfer.js

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import WaveSurfer from '../index.js';
+const { useEffect, useState } = React;
+// A React hook to use WaveSurfer
+export const useWavesurfer = (containerRef, options) => {
+    const [wavesurfer, setWavesurfer] = useState(null);
+    // Initialize wavesurfer when the container mounts
+    // or any of the props change
+    useEffect(() => {
+        if (!containerRef.current)
+            return;
+        const ws = WaveSurfer.create(Object.assign(Object.assign({}, options), { container: containerRef.current }));
+        setWavesurfer(ws);
+        return () => {
+            ws.destroy();
+        };
+    }, [options, containerRef]);
+    return wavesurfer;
+};
+export default useWavesurfer;

package/dist/renderer.d.ts

@@ -4,7 +4,9 @@ type RendererOptions = {
     height: number;
     waveColor: string;
     progressColor: string;
+    cursorColor?: string;
     minPxPerSec: number;
+    fillParent: boolean;
     barWidth?: number;
     barGap?: number;
     barRadius?: number;
@@ -17,18 +19,20 @@ type RendererEvents = {
 declare class Renderer extends EventEmitter<RendererEvents> {
     private options;
     private container;
-    private shadowRoot;
+    private scrollContainer;
     private mainCanvas;
     private progressCanvas;
     private cursor;
     private ctx;
+    private timeout;
     constructor(options: RendererOptions);
+    getContainer(): HTMLElement;
     destroy(): void;
-    private renderLinePeaks;
-    private renderBarPeaks;
-    render(channelData: Float32Array[], duration: number, minPxPerSec?: number): void;
+    private delay;
+    private renderPeaks;
     private createProgressMask;
+    render(audioData: AudioBuffer): void;
+    zoom(audioData: AudioBuffer, minPxPerSec: number): void;
     renderProgress(progress: number, autoCenter?: boolean): void;
-    getContainer(): HTMLElement;
 }
 export default Renderer;