wavesurfer.js 7.0.0-alpha.1 → 7.0.0-alpha.11

package/dist/plugins/multitrack.d.ts

@@ -0,0 +1,47 @@
+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;
+    private frameRequest;
+    static create(tracks: MultitrackTracks, options: MultitrackOptions): MultiTrack;
+    constructor(tracks: MultitrackTracks, options: MultitrackOptions);
+    private initAudios;
+    private initWavesurfers;
+    private initTimeline;
+    private updatePosition;
+    private onSeek;
+    private onDrag;
+    private findCurrentTracks;
+    private startSync;
+    play(): void;
+    pause(): void;
+    isPlaying(): boolean;
+    destroy(): void;
+}
+export default MultiTrack;

package/dist/plugins/multitrack.js

@@ -0,0 +1,283 @@
+import WaveSurfer from '../index.js';
+import RegionsPlugin from './regions.js';
+import TimelinePlugin from './timeline.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.frameRequest = null;
+        this.tracks = tracks.map((track) => (Object.assign(Object.assign({}, track), { startPosition: track.startPosition || 0, peaks: track.peaks || (track.url ? undefined : [new Float32Array()]) })));
+        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.initTimeline();
+        });
+        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() {
+        this.audios = this.tracks.map((track) => new Audio(track.url));
+        return Promise.all(this.audios.map((audio) => {
+            return new Promise((resolve) => {
+                audio.src
+                    ? audio.addEventListener('canplay', () => {
+                        resolve(audio.duration);
+                    }, { once: true })
+                    : resolve(0);
+            });
+        }));
+    }
+    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 }));
+            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;
+    }
+    initTimeline() {
+        this.wavesurfers[0].registerPlugin(TimelinePlugin, {
+            duration: this.maxDuration,
+            container: this.rendering.containers[0].parentElement,
+        });
+    }
+    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;
+    }
+    startSync() {
+        const onFrame = () => {
+            const position = this.audios.reduce((pos, audio, index) => {
+                if (!audio.paused) {
+                    pos = Math.max(pos, audio.currentTime + this.tracks[index].startPosition);
+                }
+                return pos;
+            }, this.currentTime);
+            if (position > this.currentTime) {
+                this.updatePosition(position);
+            }
+            this.frameRequest = requestAnimationFrame(onFrame);
+        };
+        onFrame();
+    }
+    play() {
+        this.startSync();
+        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() {
+        if (this.frameRequest)
+            cancelAnimationFrame(this.frameRequest);
+        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/plugins/regions.d.ts

@@ -1,5 +1,10 @@
 import BasePlugin from '../base-plugin.js';
 import { WaveSurferPluginParams } from '../index.js';
+type RegionsPluginOptions = {
+    dragSelection?: boolean;
+    draggable?: boolean;
+    resizable?: boolean;
+};
 type Region = {
     startTime: number;
     endTime: number;
@@ -19,19 +24,19 @@ type RegionsPluginEvents = {
         region: Region;
     };
 };
-declare class RegionsPlugin extends BasePlugin<RegionsPluginEvents> {
+declare class RegionsPlugin extends BasePlugin<RegionsPluginEvents, RegionsPluginOptions> {
     private dragStart;
-    private container;
+    private wrapper;
     private regions;
     private createdRegion;
     private modifiedRegion;
     private isResizingLeft;
     private isMoving;
     /** Create an instance of RegionsPlugin */
-    constructor(params: WaveSurferPluginParams);
-    /** Unmounts the regions */
+    constructor(params: WaveSurferPluginParams, options: RegionsPluginOptions);
+    /** Unmount */
     destroy(): void;
-    private initContainer;
+    private initWrapper;
     private handleMouseDown;
     private handleMouseMove;
     private handleMouseUp;
@@ -41,7 +46,7 @@ declare class RegionsPlugin extends BasePlugin<RegionsPluginEvents> {
     private updateRegion;
     private moveRegion;
     /** Create a region at a given start and end time, with an optional title */
-    addRegionAtTime(startTime: number, endTime: number, title?: string): Region;
+    add(startTime: number, endTime: number, title?: string, color?: string): Region;
     /** Set the background color of a region */
     setRegionColor(region: Region, color: string): void;
 }

package/dist/plugins/regions.js

@@ -1,9 +1,24 @@
 import BasePlugin from '../base-plugin.js';
 const MIN_WIDTH = 10;
+const defaultOptions = {
+    dragSelection: true,
+    draggable: true,
+    resizable: true,
+};
+const style = (element, styles) => {
+    for (const key in styles) {
+        element.style[key] = styles[key] || '';
+    }
+};
+const el = (tagName, css) => {
+    const element = document.createElement(tagName);
+    style(element, css);
+    return element;
+};
 class RegionsPlugin extends BasePlugin {
     /** Create an instance of RegionsPlugin */
-    constructor(params) {
-        super(params);
+    constructor(params, options) {
+        super(params, options);
         this.dragStart = NaN;
         this.regions = [];
         this.createdRegion = null;
@@ -11,24 +26,26 @@ class RegionsPlugin extends BasePlugin {
         this.isResizingLeft = false;
         this.isMoving = false;
         this.handleMouseDown = (e) => {
-            this.dragStart = e.clientX - this.container.getBoundingClientRect().left;
+            if (this.options.draggable || this.options.resizable || this.options.dragSelection) {
+                this.dragStart = e.clientX - this.container.getBoundingClientRect().left;
+            }
         };
         this.handleMouseMove = (e) => {
             const dragEnd = e.clientX - this.container.getBoundingClientRect().left;
-            if (this.modifiedRegion && this.isMoving) {
+            if (this.options.draggable && this.modifiedRegion && this.isMoving) {
                 this.moveRegion(this.modifiedRegion, dragEnd - this.dragStart);
                 this.dragStart = dragEnd;
                 return;
             }
-            if (this.modifiedRegion) {
+            if (this.options.resizable && this.modifiedRegion) {
                 this.updateRegion(this.modifiedRegion, this.isResizingLeft ? dragEnd : undefined, this.isResizingLeft ? undefined : dragEnd);
                 return;
             }
-            if (!isNaN(this.dragStart)) {
-                const dragEnd = e.clientX - this.container.getBoundingClientRect().left;
+            if (this.options.dragSelection && !isNaN(this.dragStart)) {
+                const dragEnd = e.clientX - this.wrapper.getBoundingClientRect().left;
                 if (dragEnd - this.dragStart >= MIN_WIDTH) {
                     if (!this.createdRegion) {
-                        this.renderer.getContainer().style.pointerEvents = 'none';
+                        this.container.style.pointerEvents = 'none';
                         this.createdRegion = this.createRegion(this.dragStart, dragEnd);
                     }
                     else {
@@ -45,97 +62,107 @@ class RegionsPlugin extends BasePlugin {
             this.modifiedRegion = null;
             this.isMoving = false;
             this.dragStart = NaN;
-            this.renderer.getContainer().style.pointerEvents = '';
+            this.container.style.pointerEvents = '';
         };
-        this.container = this.initContainer();
-        const unsubscribeReady = this.wavesurfer.on('ready', () => {
-            const wrapper = this.renderer.getContainer();
-            wrapper.appendChild(this.container);
-            unsubscribeReady();
+        this.options = Object.assign({}, defaultOptions, options);
+        this.wrapper = this.initWrapper();
+        const unsubscribe = this.wavesurfer.once('decode', () => {
+            this.container.appendChild(this.wrapper);
         });
-        this.subscriptions.push(unsubscribeReady);
-        const wsContainer = this.renderer.getContainer();
-        wsContainer.addEventListener('mousedown', this.handleMouseDown);
+        this.subscriptions.push(unsubscribe);
+        this.container.addEventListener('mousedown', this.handleMouseDown);
         document.addEventListener('mousemove', this.handleMouseMove);
         document.addEventListener('mouseup', this.handleMouseUp);
     }
-    /** Unmounts the regions */
+    /** Unmount */
     destroy() {
-        var _a;
-        this.renderer.getContainer().removeEventListener('mousedown', this.handleMouseDown);
+        this.container.removeEventListener('mousedown', this.handleMouseDown);
         document.removeEventListener('mousemove', this.handleMouseMove);
         document.removeEventListener('mouseup', this.handleMouseUp, true);
-        (_a = this.container) === null || _a === void 0 ? void 0 : _a.remove();
+        this.wrapper.remove();
         super.destroy();
     }
-    initContainer() {
-        const div = document.createElement('div');
-        div.style.position = 'absolute';
-        div.style.top = '0';
-        div.style.left = '0';
-        div.style.width = '100%';
-        div.style.height = '100%';
-        div.style.zIndex = '3';
-        div.style.pointerEvents = 'none';
-        return div;
+    initWrapper() {
+        return el('div', {
+            position: 'absolute',
+            top: '0',
+            left: '0',
+            width: '100%',
+            height: '100%',
+            zIndex: '3',
+            pointerEvents: 'none',
+        });
     }
     createRegionElement(start, end, title = '') {
-        const el = document.createElement('div');
-        el.style.position = 'absolute';
-        el.style.left = `${start}px`;
-        el.style.width = `${end - start}px`;
-        el.style.height = '100%';
-        el.style.backgroundColor = 'rgba(0, 0, 0, 0.1)';
-        el.style.transition = 'background-color 0.2s ease';
-        el.style.cursor = 'move';
-        el.style.pointerEvents = 'all';
-        el.title = title;
-        const leftHandle = document.createElement('div');
-        leftHandle.style.position = 'absolute';
-        leftHandle.style.left = '0';
-        leftHandle.style.width = '6px';
-        leftHandle.style.height = '100%';
-        leftHandle.style.borderLeft = '2px solid rgba(0, 0, 0, 0.5)';
-        leftHandle.style.cursor = 'ew-resize';
-        leftHandle.style.pointerEvents = 'all';
-        el.appendChild(leftHandle);
-        const rightHandle = document.createElement('div');
-        rightHandle.style.position = 'absolute';
-        rightHandle.style.right = '0';
-        rightHandle.style.width = '6px';
-        rightHandle.style.height = '100%';
-        rightHandle.style.borderRight = '2px solid rgba(0, 0, 0, 0.5)';
-        rightHandle.style.cursor = 'ew-resize';
-        rightHandle.style.pointerEvents = 'all';
-        el.appendChild(rightHandle);
+        const noWidth = start === end;
+        const div = el('div', {
+            position: 'absolute',
+            left: `${start}px`,
+            width: `${end - start}px`,
+            height: '100%',
+            backgroundColor: noWidth ? '' : 'rgba(0, 0, 0, 0.1)',
+            borderRadius: '2px',
+            boxSizing: 'border-box',
+            borderLeft: '2px solid rgba(0, 0, 0, 0.5)',
+            borderRight: noWidth ? '' : '2px solid rgba(0, 0, 0, 0.5)',
+            transition: 'background-color 0.2s ease',
+            cursor: this.options.draggable ? 'move' : '',
+            pointerEvents: 'all',
+            padding: '0.2em',
+        });
+        div.textContent = title;
+        const leftHandle = el('div', {
+            position: 'absolute',
+            left: '0',
+            width: '6px',
+            height: '100%',
+            cursor: this.options.resizable ? 'ew-resize' : '',
+            pointerEvents: 'all',
+        });
+        div.appendChild(leftHandle);
+        const rightHandle = leftHandle.cloneNode();
+        style(rightHandle, {
+            left: '',
+            right: '0',
+            borderLeft: '',
+        });
+        div.appendChild(rightHandle);
         leftHandle.addEventListener('mousedown', (e) => {
+            if (!this.options.resizable)
+                return;
             e.stopPropagation();
-            this.modifiedRegion = this.regions.find((r) => r.element === el) || null;
+            this.modifiedRegion = this.regions.find((r) => r.element === div) || null;
             this.isResizingLeft = true;
             this.isMoving = false;
         });
         rightHandle.addEventListener('mousedown', (e) => {
+            if (!this.options.resizable)
+                return;
             e.stopPropagation();
-            this.modifiedRegion = this.regions.find((r) => r.element === el) || null;
+            this.modifiedRegion = this.regions.find((r) => r.element === div) || null;
             this.isResizingLeft = false;
             this.isMoving = false;
         });
-        el.addEventListener('mousedown', () => {
-            this.modifiedRegion = this.regions.find((r) => r.element === el) || null;
+        div.addEventListener('mousedown', () => {
+            if (!this.options.draggable)
+                return;
+            this.modifiedRegion = this.regions.find((r) => r.element === div) || null;
             this.isMoving = true;
         });
-        el.addEventListener('click', () => {
-            const region = this.regions.find((r) => r.element === el);
+        div.addEventListener('click', () => {
+            const region = this.regions.find((r) => r.element === div);
             if (region) {
                 this.emit('region-clicked', { region });
             }
         });
-        this.container.appendChild(el);
-        return el;
+        this.wrapper.appendChild(div);
+        return div;
     }
     createRegion(start, end, title = '') {
         const duration = this.wavesurfer.getDuration();
-        const width = this.container.clientWidth;
+        const width = this.wrapper.clientWidth;
+        start = Math.max(0, Math.min(start, width - 1));
+        end = Math.max(0, Math.min(end, width - 1));
         return {
             element: this.createRegionElement(start, end, title),
             start,
@@ -150,15 +177,18 @@ class RegionsPlugin extends BasePlugin {
         this.emit('region-created', { region });
     }
     updateRegion(region, start, end) {
+        const width = this.wrapper.clientWidth;
         if (start != null) {
-            region.start = start !== null && start !== void 0 ? start : region.start;
+            start = Math.max(0, Math.min(start, width));
+            region.start = start;
             region.element.style.left = `${region.start}px`;
-            region.startTime = (start / this.container.clientWidth) * this.wavesurfer.getDuration();
+            region.startTime = (start / this.wrapper.clientWidth) * this.wavesurfer.getDuration();
         }
         if (end != null) {
+            end = Math.max(0, Math.min(end, width));
             region.end = end;
             region.element.style.width = `${region.end - region.start}px`;
-            region.endTime = (end / this.container.clientWidth) * this.wavesurfer.getDuration();
+            region.endTime = (end / this.wrapper.clientWidth) * this.wavesurfer.getDuration();
         }
         this.emit('region-updated', { region });
     }
@@ -166,18 +196,20 @@ class RegionsPlugin extends BasePlugin {
         this.updateRegion(region, region.start + delta, region.end + delta);
     }
     /** Create a region at a given start and end time, with an optional title */
-    addRegionAtTime(startTime, endTime, title = '') {
+    add(startTime, endTime, title = '', color = '') {
         const duration = this.wavesurfer.getDuration();
-        const width = this.container.clientWidth;
+        const width = this.wrapper.clientWidth;
         const start = (startTime / duration) * width;
         const end = (endTime / duration) * width;
         const region = this.createRegion(start, end, title);
         this.addRegion(region);
+        if (color)
+            this.setRegionColor(region, color);
         return region;
     }
     /** Set the background color of a region */
     setRegionColor(region, color) {
-        region.element.style.backgroundColor = color;
+        region.element.style[region.startTime === region.endTime ? 'borderColor' : 'backgroundColor'] = color;
     }
 }
 export default RegionsPlugin;