wavesurfer.js 7.0.0-alpha.2 → 7.0.0-alpha.20

package/dist/plugins/multitrack.js

@@ -0,0 +1,474 @@
+import WaveSurfer from '../index.js';
+import RegionsPlugin from './regions.js';
+import TimelinePlugin from './timeline.js';
+import EnvelopePlugin from './envelope.js';
+import EventEmitter from '../event-emitter.js';
+class MultiTrack extends EventEmitter {
+    tracks;
+    options;
+    audios = [];
+    wavesurfers = [];
+    durations = [];
+    currentTime = 0;
+    maxDuration = 0;
+    rendering;
+    isDragging = false;
+    frameRequest = null;
+    timer = null;
+    subscriptions = [];
+    timeline = null;
+    static create(tracks, options) {
+        return new MultiTrack(tracks, options);
+    }
+    constructor(tracks, options) {
+        super();
+        this.tracks = tracks.map((track) => ({
+            ...track,
+            startPosition: track.startPosition || 0,
+            peaks: track.peaks || (track.url ? undefined : [new Float32Array()]),
+        }));
+        this.options = options;
+        this.rendering = initRendering(this.tracks, this.options);
+        this.rendering.addDropHandler((trackId) => {
+            this.emit('drop', { id: trackId });
+        });
+        this.initAllAudios().then((durations) => {
+            this.initDurations(durations);
+            this.initAllWavesurfers();
+            this.rendering.containers.forEach((container, index) => {
+                const drag = initDragging(container, (delta) => this.onDrag(index, delta), options.rightButtonDrag);
+                this.wavesurfers[index].once('destroy', () => drag?.destroy());
+            });
+            this.emit('canplay');
+        });
+    }
+    initDurations(durations) {
+        this.durations = durations;
+        this.maxDuration = this.tracks.reduce((max, track, index) => {
+            return Math.max(max, track.startPosition + durations[index]);
+        }, 0);
+        this.rendering.setMainWidth(durations, this.maxDuration);
+        this.rendering.addClickHandler((position) => {
+            if (this.isDragging)
+                return;
+            this.seekTo(position * this.maxDuration);
+        });
+    }
+    initAudio(track) {
+        const audio = new Audio(track.url);
+        return new Promise((resolve) => {
+            if (!audio.src)
+                return resolve(audio);
+            audio.addEventListener('loadedmetadata', () => resolve(audio), { once: true });
+        });
+    }
+    async initAllAudios() {
+        this.audios = await Promise.all(this.tracks.map((track) => this.initAudio(track)));
+        return this.audios.map((a) => (a.src ? a.duration : 0));
+    }
+    initWavesurfer(track, index) {
+        const container = this.rendering.containers[index];
+        // Create a wavesurfer instance
+        const ws = WaveSurfer.create({
+            ...track.options,
+            container,
+            minPxPerSec: 0,
+            media: this.audios[index],
+            peaks: track.peaks,
+            cursorColor: 'transparent',
+            cursorWidth: 0,
+            interactive: false,
+        });
+        // Regions and markers
+        const wsRegions = ws.registerPlugin(RegionsPlugin, {
+            draggable: false,
+            resizable: true,
+            dragSelection: false,
+        });
+        this.subscriptions.push(ws.once('decode', () => {
+            // Start and end cues
+            if (track.startCue != null || track.endCue != null) {
+                const { startCue = 0, endCue = this.durations[index] } = track;
+                const startCueRegion = wsRegions.add(0, startCue, '', 'rgba(0, 0, 0, 0.7)');
+                const endCueRegion = wsRegions.add(endCue, endCue + this.durations[index], '', 'rgba(0, 0, 0, 0.7)');
+                // Allow resizing only from one side
+                startCueRegion.element.firstElementChild?.remove();
+                endCueRegion.element.lastChild?.remove();
+                // Update the start and end cues on resize
+                this.subscriptions.push(wsRegions.on('region-updated', ({ region }) => {
+                    this.setIsDragging();
+                    if (region === startCueRegion || region === endCueRegion) {
+                        if (region === startCueRegion) {
+                            track.startCue = region.endTime;
+                            this.emit('start-cue-change', { id: track.id, startCue: track.startCue });
+                        }
+                        else {
+                            track.endCue = region.startTime;
+                            this.emit('end-cue-change', { id: track.id, endCue: track.endCue });
+                        }
+                    }
+                }));
+            }
+            // Render regions
+            if (track.regions) {
+                track.regions.forEach((params) => {
+                    const region = wsRegions.add(params.startTime || 0, params.endTime, params.label, params.color);
+                    if (!params.startTime) {
+                        region.element.firstElementChild?.remove();
+                    }
+                });
+            }
+            // Render markers
+            if (track.markers) {
+                track.markers.forEach((marker) => {
+                    wsRegions.add(marker.time, marker.time, marker.label, marker.color);
+                });
+            }
+        }));
+        // Envelope
+        const envelope = ws.registerPlugin(EnvelopePlugin, {
+            ...this.options.envelopeOptions,
+            startTime: track.startCue,
+            endTime: track.endCue,
+            fadeInEnd: track.fadeInEnd,
+            fadeOutStart: track.fadeOutStart,
+            volume: track.volume,
+        });
+        this.subscriptions.push(envelope.on('volume-change', ({ volume }) => {
+            this.setIsDragging();
+            this.emit('volume-change', { id: track.id, volume });
+        }), envelope.on('fade-in-change', ({ time }) => {
+            this.setIsDragging();
+            this.emit('fade-in-change', { id: track.id, fadeInEnd: time });
+        }), envelope.on('fade-out-change', ({ time }) => {
+            this.setIsDragging();
+            this.emit('fade-out-change', { id: track.id, fadeOutStart: time });
+        }));
+        return ws;
+    }
+    initAllWavesurfers() {
+        const wavesurfers = this.tracks.map((track, index) => {
+            return this.initWavesurfer(track, index);
+        });
+        this.wavesurfers = wavesurfers;
+        this.initTimeline();
+    }
+    initTimeline() {
+        if (this.timeline)
+            this.timeline.destroy();
+        this.timeline = this.wavesurfers[0].registerPlugin(TimelinePlugin, {
+            duration: this.maxDuration,
+            container: this.rendering.containers[0].parentElement,
+        });
+    }
+    updatePosition(time, autoCenter = false) {
+        const precisionSeconds = 0.3;
+        this.currentTime = time;
+        this.rendering.updateCursor(time / this.maxDuration, autoCenter);
+        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;
+        });
+    }
+    setIsDragging() {
+        // Prevent click events when dragging
+        this.isDragging = true;
+        if (this.timer)
+            clearTimeout(this.timer);
+        this.timer = setTimeout(() => (this.isDragging = false), 300);
+    }
+    onDrag(index, delta) {
+        this.setIsDragging();
+        const newTime = this.tracks[index].startPosition + delta * this.maxDuration;
+        this.onMove(index, newTime);
+    }
+    onMove(index, newStartPosition) {
+        const track = this.tracks[index];
+        if (!track.draggable)
+            return;
+        const mainIndex = this.tracks.findIndex((item) => item.url && !item.draggable);
+        const mainTrack = this.tracks[mainIndex];
+        const minStart = (mainTrack ? mainTrack.startPosition : 0) - this.durations[index];
+        const maxStart = mainTrack ? mainTrack.startPosition + this.durations[mainIndex] : this.maxDuration;
+        if (newStartPosition >= minStart && newStartPosition <= maxStart) {
+            track.startPosition = newStartPosition;
+            this.rendering.setContainerOffsets();
+            this.updatePosition(this.currentTime);
+            this.emit('start-position-change', { id: track.id, startPosition: newStartPosition });
+        }
+    }
+    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, true);
+            }
+            this.frameRequest = requestAnimationFrame(onFrame);
+        };
+        onFrame();
+    }
+    play() {
+        this.startSync();
+        const indexes = this.findCurrentTracks();
+        indexes.forEach((index) => {
+            this.audios[index]?.play();
+        });
+    }
+    pause() {
+        this.audios.forEach((audio) => audio.pause());
+    }
+    isPlaying() {
+        return this.audios.some((audio) => !audio.paused);
+    }
+    getCurrentTime() {
+        return this.currentTime;
+    }
+    seekTo(time) {
+        const wasPlaying = this.isPlaying();
+        this.updatePosition(time);
+        if (wasPlaying)
+            this.play();
+    }
+    zoom(pxPerSec) {
+        this.options.minPxPerSec = pxPerSec;
+        this.wavesurfers.forEach((ws, index) => this.tracks[index].url && ws.zoom(pxPerSec));
+        this.rendering.setMainWidth(this.durations, this.maxDuration);
+        this.rendering.setContainerOffsets();
+    }
+    addTrack(track) {
+        const index = this.tracks.findIndex((t) => t.id === track.id);
+        if (index !== -1) {
+            this.tracks[index] = track;
+            this.initAudio(track).then((audio) => {
+                this.audios[index] = audio;
+                this.durations[index] = audio.duration;
+                this.initDurations(this.durations);
+                const container = this.rendering.containers[index];
+                container.innerHTML = '';
+                this.wavesurfers[index].destroy();
+                this.wavesurfers[index] = this.initWavesurfer(track, index);
+                const drag = initDragging(container, (delta) => this.onDrag(index, delta), this.options.rightButtonDrag);
+                this.wavesurfers[index].once('destroy', () => drag?.destroy());
+                this.initTimeline();
+                this.emit('canplay');
+            });
+        }
+    }
+    destroy() {
+        if (this.frameRequest)
+            cancelAnimationFrame(this.frameRequest);
+        this.rendering.destroy();
+        this.audios.forEach((audio) => {
+            audio.pause();
+            audio.src = '';
+        });
+        this.wavesurfers.forEach((ws) => {
+            ws.destroy();
+        });
+    }
+    // See https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/setSinkId
+    setSinkId(sinkId) {
+        return Promise.all(this.audios.map((item) => {
+            const audio = item;
+            return audio.setSinkId ? audio.setSinkId(sinkId) : Promise.resolve();
+        }));
+    }
+}
+function initRendering(tracks, options) {
+    let pxPerSec = 0;
+    let durations = [];
+    let mainWidth = 0;
+    // Create a common container for all tracks
+    const 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', 'height: 100%; position: absolute; z-index: 10; top: 0; left: 0');
+    cursor.style.backgroundColor = options.cursorColor || '#000';
+    cursor.style.width = `${options.cursorWidth ?? 1}px`;
+    wrapper.appendChild(cursor);
+    const { clientWidth } = wrapper;
+    // Create containers for each track
+    const containers = tracks.map((track, index) => {
+        const container = document.createElement('div');
+        container.style.position = 'relative';
+        if (options.trackBorderColor && index > 0) {
+            const borderDiv = document.createElement('div');
+            borderDiv.setAttribute('style', `width: 100%; height: 2px; background-color: ${options.trackBorderColor}`);
+            wrapper.appendChild(borderDiv);
+        }
+        if (options.trackBackground && track.url) {
+            container.style.background = options.trackBackground;
+        }
+        // No audio on this track, so make it droppable
+        if (!track.url) {
+            const dropArea = document.createElement('div');
+            dropArea.setAttribute('style', `position: absolute; z-index: 10; left: 10px; top: 10px; right: 10px; bottom: 10px; border: 2px dashed ${options.trackBorderColor};`);
+            dropArea.addEventListener('dragover', (e) => {
+                e.preventDefault();
+                dropArea.style.background = options.trackBackground || '';
+            });
+            dropArea.addEventListener('dragleave', (e) => {
+                e.preventDefault();
+                dropArea.style.background = '';
+            });
+            dropArea.addEventListener('drop', (e) => {
+                e.preventDefault();
+                dropArea.style.background = '';
+            });
+            container.appendChild(dropArea);
+        }
+        wrapper.appendChild(container);
+        return container;
+    });
+    // Set the positions of each container
+    const setContainerOffsets = () => {
+        containers.forEach((container, i) => {
+            const offset = tracks[i].startPosition * pxPerSec;
+            if (durations[i]) {
+                container.style.width = `${durations[i] * pxPerSec}px`;
+            }
+            container.style.transform = `translateX(${offset}px)`;
+        });
+    };
+    return {
+        containers,
+        // Set the start offset
+        setContainerOffsets,
+        // Set the container width
+        setMainWidth: (trackDurations, maxDuration) => {
+            durations = trackDurations;
+            pxPerSec = Math.max(options.minPxPerSec || 0, clientWidth / maxDuration);
+            mainWidth = pxPerSec * maxDuration;
+            wrapper.style.width = `${mainWidth}px`;
+            setContainerOffsets();
+        },
+        // Update cursor position
+        updateCursor: (position, autoCenter) => {
+            cursor.style.left = `${Math.min(100, position * 100)}%`;
+            // Update scroll
+            const { clientWidth, scrollLeft } = scroll;
+            const center = clientWidth / 2;
+            const minScroll = autoCenter ? center : clientWidth;
+            const pos = position * mainWidth;
+            if (pos > scrollLeft + minScroll || pos < scrollLeft) {
+                scroll.scrollLeft = pos - center;
+            }
+        },
+        // 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();
+        },
+        // Do something on drop
+        addDropHandler: (onDrop) => {
+            tracks.forEach((track, index) => {
+                if (!track.url) {
+                    const droppable = containers[index].querySelector('div');
+                    droppable?.addEventListener('drop', (e) => {
+                        e.preventDefault();
+                        onDrop(track.id);
+                    });
+                }
+            });
+        },
+    };
+}
+function initDragging(container, onDrag, rightButtonDrag = false) {
+    const wrapper = container.parentElement;
+    if (!wrapper)
+        return;
+    // Dragging tracks to set position
+    let dragStart = null;
+    container.addEventListener('contextmenu', (e) => {
+        rightButtonDrag && e.preventDefault();
+    });
+    // Drag start
+    container.addEventListener('mousedown', (e) => {
+        if (rightButtonDrag && e.button !== 2)
+            return;
+        const rect = wrapper.getBoundingClientRect();
+        dragStart = e.clientX - rect.left;
+        container.style.cursor = 'grabbing';
+    });
+    // Drag end
+    const onMouseUp = (e) => {
+        if (dragStart != null) {
+            e.stopPropagation();
+            dragStart = null;
+            container.style.cursor = '';
+        }
+    };
+    // 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';
+import type { WaveSurferPluginParams } from '../index.js';
+export type RegionsPluginOptions = {
+    dragSelection?: boolean;
+    draggable?: boolean;
+    resizable?: boolean;
+};
 type Region = {
     startTime: number;
     endTime: number;
@@ -8,7 +13,7 @@ type Region = {
     end: number;
     element: HTMLElement;
 };
-type RegionsPluginEvents = {
+export type RegionsPluginEvents = {
     'region-created': {
         region: Region;
     };
@@ -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 regionsContainer;
     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 initRegionsContainer;
     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;
 }