wavesurfer.js 7.0.0-alpha.3 → 7.0.0-alpha.31

package/dist/plugins/minimap.min.js

@@ -0,0 +1 @@
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.Minimap=e():t.Minimap=e()}(WaveSurfer,(()=>(()=>{"use strict";var t={d:(e,i)=>{for(var s in i)t.o(i,s)&&!t.o(e,s)&&Object.defineProperty(e,s,{enumerable:!0,get:i[s]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e)},e={};t.d(e,{default:()=>p});const i=class{eventTarget;constructor(){this.eventTarget=new EventTarget}emit(t,e){const i=new CustomEvent(String(t),{detail:e});this.eventTarget.dispatchEvent(i)}on(t,e,i){const s=t=>{t instanceof CustomEvent&&e(t.detail)},r=String(t);return this.eventTarget.addEventListener(r,s,{once:i}),()=>this.eventTarget.removeEventListener(r,s)}once(t,e){return this.on(t,e,!0)}},s=class extends i{wavesurfer;container;wrapper;subscriptions=[];options;constructor(t){super(),this.options=t}init(t){this.wavesurfer=t.wavesurfer,this.container=t.container,this.wrapper=t.wrapper}destroy(){this.subscriptions.forEach((t=>t()))}},r=class extends i{options={height:0};container;scrollContainer;wrapper;canvasWrapper;progressWrapper;timeout=null;isScrolling=!1;channelData=null;duration=null;resizeObserver=null;constructor(t,e){super(),this.options={...e};let i=null;if("string"==typeof t.container?i=document.querySelector(t.container):t.container instanceof HTMLElement&&(i=t.container),!i)throw new Error("Container not found");const[s,r]=this.initHtml();i.appendChild(s),this.container=s,this.scrollContainer=r.querySelector(".scroll"),this.wrapper=r.querySelector(".wrapper"),this.canvasWrapper=r.querySelector(".canvases"),this.progressWrapper=r.querySelector(".progress"),this.wrapper.addEventListener("click",(t=>{const e=this.wrapper.getBoundingClientRect(),i=(t.clientX-e.left)/e.width;this.emit("click",{relativeX:i})})),this.resizeObserver=new ResizeObserver((()=>{this.delay((()=>this.reRender()),100)})),this.resizeObserver.observe(this.scrollContainer)}initHtml(){const t=document.createElement("div"),e=t.attachShadow({mode:"open"});return e.innerHTML=`\n      <style>\n        :host {\n          user-select: none;\n        }\n        :host .scroll {\n          overflow-x: auto;\n          overflow-y: hidden;\n          width: 100%;\n          position: relative;\n        }\n        :host .noScrollbar {\n          scrollbar-color: transparent;\n          scrollbar-width: none;\n        }\n        :host .noScrollbar::-webkit-scrollbar {\n          display: none;\n          -webkit-appearance: none;\n        }\n        :host .wrapper {\n          position: relative;\n          overflow: visible;\n          z-index: 2;\n        }\n        :host .canvases {\n          position: relative;\n          height: ${this.options.height}px;\n        }\n        :host canvas {\n          display: block;\n          position: absolute;\n          top: 0;\n          image-rendering: pixelated;\n          height: ${this.options.height}px;\n        }\n        :host .progress {\n          pointer-events: none;\n          position: absolute;\n          z-index: 2;\n          top: 0;\n          left: 0;\n          width: 0;\n          height: 100%;\n          overflow: hidden;\n          box-sizing: border-box;\n        }\n      </style>\n\n      <div class="scroll">\n        <div class="wrapper">\n          <div class="canvases"></div>\n          <div class="progress"></div>\n        </div>\n      </div>\n    `,[t,e]}setOptions(t){this.options=t,this.reRender()}getContainer(){return this.scrollContainer}getWrapper(){return this.wrapper}destroy(){this.container.remove(),this.resizeObserver?.disconnect()}delay(t,e=10){return this.timeout&&clearTimeout(this.timeout),new Promise((i=>{this.timeout=setTimeout((()=>{i(t())}),e)}))}async renderPeaks(t,e,i,s){const r=null!=this.options.barWidth?this.options.barWidth*s:1,n=null!=this.options.barGap?this.options.barGap*s:this.options.barWidth?r/2:0,o=this.options.barRadius??0,a=t[0],h=a.length,l=Math.floor(e/(r+n))/h,d=i/2,c=1===t.length,p=c?a:t[1],u=c&&p.some((t=>t<0)),m=(t,i)=>{let c=0,m=0,g=0;const v=document.createElement("canvas");v.width=Math.round(e*(i-t)/h),v.height=this.options.height,v.style.width=`${Math.floor(v.width/s)}px`,v.style.height=`${this.options.height}px`,v.style.left=`${Math.floor(t*e/s/h)}px`,this.canvasWrapper.appendChild(v);const y=v.getContext("2d",{desynchronized:!0});y.beginPath(),y.fillStyle=this.options.waveColor??"",y.roundRect||(y.roundRect=y.fillRect);for(let e=t;e<i;e++){const i=Math.round((e-t)*l);if(i>c){const t=Math.round(m*d),e=Math.round(g*d);y.roundRect(c*(r+n),d-t,r,t+e||1,o),c=i,m=0,g=0}const s=u?a[e]:Math.abs(a[e]),h=u?p[e]:Math.abs(p[e]);s>m&&(m=s),(u?h<-g:h>g)&&(g=h<0?-h:h)}y.fill(),y.closePath();const f=v.cloneNode();this.progressWrapper.appendChild(f);const b=f.getContext("2d",{desynchronized:!0});v.width>0&&v.height>0&&b.drawImage(v,0,0),b.globalCompositeOperation="source-in",b.fillStyle=this.options.progressColor??"",b.fillRect(0,0,v.width,v.height)};this.canvasWrapper.innerHTML="",this.progressWrapper.innerHTML="";const{scrollLeft:g,scrollWidth:v,clientWidth:y}=this.scrollContainer,f=h/v,b=Math.floor(g*f),w=Math.ceil(Math.min(v,g+y)*f);m(b,w);const C=w-b;for(let t=w;t<h;t+=C)await this.delay((()=>{m(t,Math.min(h,t+C))}));for(let t=b-1;t>=0;t-=C)await this.delay((()=>{m(Math.max(0,t-C),t)}))}render(t,e){const i=window.devicePixelRatio||1,s=this.scrollContainer.clientWidth,r=Math.ceil(e*(this.options.minPxPerSec||0));this.isScrolling=r>s;const n=this.options.fillParent&&!this.isScrolling,o=(n?s:r)*i,{height:a}=this.options;this.wrapper.style.width=n?"100%":`${r}px`,this.scrollContainer.style.overflowX=this.isScrolling?"auto":"hidden",this.scrollContainer.classList.toggle("noScrollbar",!!this.options.hideScrollbar),this.progressWrapper.style.borderRightStyle="solid",this.progressWrapper.style.borderRightColor=`${this.options.cursorColor||this.options.progressColor}`,this.progressWrapper.style.borderRightWidth=`${this.options.cursorWidth}px`,this.canvasWrapper.style.height=`${this.options.height}px`,this.renderPeaks(t,o,a,i),this.channelData=t,this.duration=e}reRender(){if(!this.channelData||!this.duration)return;const t=this.progressWrapper.clientWidth;this.render(this.channelData,this.duration);const e=this.progressWrapper.clientWidth;this.scrollContainer.scrollLeft+=e-t}zoom(t){this.options.minPxPerSec=t,this.reRender()}renderProgress(t,e=!1){if(this.progressWrapper.style.width=100*t+"%",this.isScrolling&&this.options.autoCenter){const{clientWidth:i,scrollLeft:s,scrollWidth:r}=this.scrollContainer,n=r*t,o=i/2,a=o/20;(n>s+(e?o:i)||n<s)&&(n-(s+o)>=a&&n<s+i?this.scrollContainer.scrollLeft+=a:this.scrollContainer.scrollLeft=n-o)}}},n=class extends i{media;subscriptions=[];isExternalMedia=!1;hasPlayedOnce=!1;constructor(t){super(),t.media?(this.media=t.media,this.isExternalMedia=!0):this.media=document.createElement("audio"),this.subscriptions.push(this.onceMediaEvent("play",(()=>{this.hasPlayedOnce=!0}))),t.autoplay&&(this.media.autoplay=!0),null!=t.playbackRate&&(this.media.playbackRate=t.playbackRate)}onMediaEvent(t,e,i){return this.media.addEventListener(t,e,i),()=>this.media.removeEventListener(t,e)}onceMediaEvent(t,e){return this.onMediaEvent(t,e,{once:!0})}loadUrl(t){this.media.src=t}destroy(){this.media.pause(),this.subscriptions.forEach((t=>t())),this.isExternalMedia||this.media.remove()}play(){return this.media.play()}pause(){this.media.pause()}isPlaying(){return this.media.currentTime>0&&!this.media.paused&&!this.media.ended}setTime(t){this.hasPlayedOnce||this.media.play()?.then?.((()=>{setTimeout((()=>this.media.pause()),10)})),this.media.currentTime=t}getDuration(){return this.media.duration}getCurrentTime(){return this.media.currentTime}getVolume(){return this.media.volume}setVolume(t){this.media.volume=t}getMuted(){return this.media.muted}setMuted(t){this.media.muted=t}getPlaybackRate(){return this.media.playbackRate}setPlaybackRate(t,e){null!=e&&(this.media.preservesPitch=e),this.media.playbackRate=t}getMediaElement(){return this.media}setSinkId(t){return this.media.setSinkId(t)}},o=class extends i{unsubscribe=()=>{};start(){this.unsubscribe=this.on("tick",(()=>{requestAnimationFrame((()=>{this.emit("tick")}))})),this.emit("tick")}stop(){this.unsubscribe()}destroy(){this.unsubscribe()}},a={height:128,waveColor:"#999",progressColor:"#555",cursorWidth:1,minPxPerSec:0,fillParent:!0,interact:!0,autoCenter:!0};class h extends n{options;fetcher;decoder;renderer;timer;plugins=[];decodedData=null;canPlay=!1;static create(t){return new h(t)}constructor(t){super({media:t.media,autoplay:t.autoplay,playbackRate:t.audioRate}),this.options=Object.assign({},a,t),this.fetcher=new class{async load(t){return fetch(t).then((t=>t.arrayBuffer()))}},this.decoder=new class{audioCtx=null;initAudioContext(t){this.audioCtx=new AudioContext({latencyHint:"playback",sampleRate:t})}constructor(){try{this.initAudioContext(3e3)}catch(t){this.initAudioContext(8e3)}}async decode(t){if(!this.audioCtx)throw new Error("AudioContext is not initialized");return this.audioCtx.decodeAudioData(t)}destroy(){this.audioCtx?.close(),this.audioCtx=null}},this.timer=new o,this.renderer=new r({container:this.options.container},this.options),this.initPlayerEvents(),this.initRendererEvents(),this.initTimerEvents(),this.initReadyEvent(),this.initPlugins();const e=this.options.url||this.options.media?.src;e&&this.load(e,this.options.peaks,this.options.duration)}setOptions(t){this.options={...this.options,...t},this.renderer.setOptions(this.options)}initPlayerEvents(){this.subscriptions.push(this.onMediaEvent("timeupdate",(()=>{const t=this.getCurrentTime();this.renderer.renderProgress(t/this.getDuration(),this.isPlaying()),this.emit("timeupdate",{currentTime:t})})),this.onMediaEvent("play",(()=>{this.emit("play"),this.timer.start()})),this.onMediaEvent("pause",(()=>{this.emit("pause"),this.timer.stop(),this.getCurrentTime()>=this.getDuration()&&this.emit("finish")})),this.onMediaEvent("canplay",(()=>{this.canPlay=!0,this.emit("canplay",{duration:this.getDuration()})})),this.onMediaEvent("seeking",(()=>{this.emit("seeking",{currentTime:this.getCurrentTime()})})))}initRendererEvents(){this.subscriptions.push(this.renderer.on("click",(({relativeX:t})=>{this.options.interact&&(this.seekTo(t),this.emit("interaction"))})))}initTimerEvents(){this.subscriptions.push(this.timer.on("tick",(()=>{const t=this.getCurrentTime();this.renderer.renderProgress(t/this.getDuration(),!0),this.emit("timeupdate",{currentTime:t})})))}initReadyEvent(){const t=()=>{this.decodedData&&this.canPlay&&this.emit("ready",{duration:this.getDuration()})};this.subscriptions.push(this.on("decode",t),this.on("canplay",t))}initPlugins(){this.options.plugins?.length&&this.options.plugins.forEach((t=>{this.registerPlugin(t)}))}registerPlugin(t){return t.init({wavesurfer:this,container:this.renderer.getContainer(),wrapper:this.renderer.getWrapper()}),this.plugins.push(t),t}async load(t,e,i){if(this.decodedData=null,this.canPlay=!1,this.loadUrl(t),null==e){const e=await this.fetcher.load(t),i=await this.decoder.decode(e);this.decodedData=i}else i||(i=await new Promise((t=>{this.onceMediaEvent("loadedmetadata",(()=>t(this.getDuration())))}))||0),"number"==typeof e[0]&&(e=[e]),this.decodedData={duration:i,numberOfChannels:e.length,sampleRate:e[0].length/i,getChannelData:t=>e?.[t]};this.renderAudio(),this.emit("decode",{duration:this.getDuration()})}renderAudio(){if(!this.decodedData)return;const t=[this.decodedData.getChannelData(0)];this.decodedData.numberOfChannels>1&&t.push(this.decodedData.getChannelData(1));const e=this.getDuration();this.renderer.render(t,e)}zoom(t){if(!this.decodedData)throw new Error("No audio loaded");this.renderer.zoom(t),this.emit("zoom",{minPxPerSec:t})}getDecodedData(){return this.decodedData}getDuration(){const t=this.getMediaElement()?.duration;return t>0&&t<1/0?t:this.decodedData?.duration||0}toggleInteraction(t){this.options.interact=t}seekTo(t){const e=this.getDuration()*t;this.setTime(e)}playPause(){return this.isPlaying()?(this.pause(),Promise.resolve()):this.play()}stop(){this.pause(),this.setTime(0)}skip(t){this.setTime(this.getCurrentTime()+t)}empty(){this.load("",[[0]],.001)}destroy(){this.emit("destroy"),this.plugins.forEach((t=>t.destroy())),this.timer.destroy(),this.decoder.destroy(),this.renderer.destroy(),super.destroy()}}const l=h,d={height:50,overlayColor:"rgba(100, 100, 100, 0.1)"};class c extends s{options;minimapWrapper;miniWavesurfer=null;overlay;constructor(t){super(t),this.options=Object.assign({},d,t),this.minimapWrapper=this.initMinimapWrapper(),this.overlay=this.initOverlay()}static create(t){return new c(t)}init(t){if(super.init(t),!this.wavesurfer)throw Error("WaveSurfer is not initialized");this.container?.insertAdjacentElement("afterend",this.minimapWrapper),this.subscriptions.push(this.wavesurfer.on("decode",(()=>{this.initMinimap()})))}initMinimapWrapper(){const t=document.createElement("div");return t.style.position="relative",t}initOverlay(){const t=document.createElement("div");return t.setAttribute("style","position: absolute; z-index: 2; left: 0; top: 0; bottom: 0;"),t.style.backgroundColor=this.options.overlayColor,this.minimapWrapper.appendChild(t),t}initMinimap(){if(!this.wavesurfer||!this.wrapper)return;const t=this.wavesurfer.getDecodedData(),e=this.wavesurfer.getMediaElement();if(!t||!e)return;this.miniWavesurfer=l.create({...this.options,container:this.minimapWrapper,minPxPerSec:1,fillParent:!0,media:e,url:e.src,peaks:[t.getChannelData(0)],duration:t.duration});const i=Math.round(this.minimapWrapper.clientWidth/this.wrapper.clientWidth*100);this.overlay.style.width=`${i}%`,this.subscriptions.push(this.wavesurfer.on("timeupdate",(({currentTime:e})=>{const s=Math.max(0,Math.min(e/t.duration*100-i/2,100-i)).toFixed(2);this.overlay.style.left=`${s}%`}))),this.subscriptions.push(this.miniWavesurfer.on("interaction",(()=>{this.wavesurfer&&this.miniWavesurfer&&this.wavesurfer.setTime(this.miniWavesurfer.getCurrentTime()),this.container&&(this.container.scrollLeft=this.minimapWrapper.scrollLeft/this.minimapWrapper.scrollWidth*this.container.scrollWidth)})))}destroy(){this.miniWavesurfer?.destroy(),this.minimapWrapper.remove(),super.destroy()}}const p=c;return e.default})()));

package/dist/plugins/multitrack.d.ts

@@ -0,0 +1,113 @@
+import { type WaveSurferOptions } from '../wavesurfer.js';
+import { type EnvelopePluginOptions } from './envelope.js';
+import EventEmitter from '../event-emitter.js';
+export type TrackId = string | number;
+export type TrackOptions = {
+    id: TrackId;
+    url?: string;
+    peaks?: WaveSurferOptions['peaks'];
+    draggable?: boolean;
+    startPosition: number;
+    startCue?: number;
+    endCue?: number;
+    fadeInEnd?: number;
+    fadeOutStart?: number;
+    volume?: number;
+    markers?: Array<{
+        time: number;
+        label?: string;
+        color?: string;
+    }>;
+    intro?: {
+        endTime: number;
+        label?: string;
+        color?: string;
+    };
+    options?: WaveSurferOptions;
+};
+export type MultitrackOptions = {
+    container: HTMLElement;
+    minPxPerSec?: number;
+    cursorColor?: string;
+    cursorWidth?: number;
+    trackBackground?: string;
+    trackBorderColor?: string;
+    rightButtonDrag?: boolean;
+    envelopeOptions?: EnvelopePluginOptions;
+};
+export type MultitrackEvents = {
+    canplay: void;
+    'start-position-change': {
+        id: TrackId;
+        startPosition: number;
+    };
+    'start-cue-change': {
+        id: TrackId;
+        startCue: number;
+    };
+    'end-cue-change': {
+        id: TrackId;
+        endCue: number;
+    };
+    'fade-in-change': {
+        id: TrackId;
+        fadeInEnd: number;
+    };
+    'fade-out-change': {
+        id: TrackId;
+        fadeOutStart: number;
+    };
+    'volume-change': {
+        id: TrackId;
+        volume: number;
+    };
+    'intro-end-change': {
+        id: TrackId;
+        endTime: number;
+    };
+    drop: {
+        id: TrackId;
+    };
+};
+export type MultitrackTracks = Array<TrackOptions>;
+declare class MultiTrack extends EventEmitter<MultitrackEvents> {
+    private tracks;
+    private options;
+    private audios;
+    private wavesurfers;
+    private durations;
+    private currentTime;
+    private maxDuration;
+    private rendering;
+    private isDragging;
+    private frameRequest;
+    private timer;
+    private subscriptions;
+    private timeline;
+    static create(tracks: MultitrackTracks, options: MultitrackOptions): MultiTrack;
+    constructor(tracks: MultitrackTracks, options: MultitrackOptions);
+    private initDurations;
+    private initAudio;
+    private initAllAudios;
+    private initWavesurfer;
+    private initAllWavesurfers;
+    private initTimeline;
+    private updatePosition;
+    private setIsDragging;
+    private onDrag;
+    private findCurrentTracks;
+    private startSync;
+    play(): void;
+    pause(): void;
+    isPlaying(): boolean;
+    getCurrentTime(): number;
+    /** Position percentage from 0 to 1 */
+    seekTo(position: number): void;
+    /** Set time in seconds */
+    setTime(time: number): void;
+    zoom(pxPerSec: number): void;
+    addTrack(track: TrackOptions): void;
+    destroy(): void;
+    setSinkId(sinkId: string): Promise<void[]>;
+}
+export default MultiTrack;

package/dist/plugins/multitrack.js

@@ -0,0 +1,504 @@
+import WaveSurfer from '../wavesurfer.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.rendering.addClickHandler((position) => {
+                if (this.isDragging)
+                    return;
+                this.seekTo(position);
+            });
+            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);
+    }
+    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,
+            interact: false,
+        });
+        // Regions and markers
+        const wsRegions = ws.registerPlugin(RegionsPlugin.create());
+        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.addRegion({
+                    start: 0,
+                    end: startCue,
+                    color: 'rgba(0, 0, 0, 0.7)',
+                    drag: false,
+                });
+                const endCueRegion = wsRegions.addRegion({
+                    start: endCue,
+                    end: endCue + this.durations[index],
+                    color: 'rgba(0, 0, 0, 0.7)',
+                    drag: false,
+                });
+                // Allow resizing only from one side
+                startCueRegion.element.firstElementChild?.remove();
+                endCueRegion.element.lastChild?.remove();
+                // Prevent clicks when dragging
+                // Update the start and end cues on resize
+                this.subscriptions.push(startCueRegion.on('update-end', () => {
+                    track.startCue = startCueRegion.end;
+                    this.emit('start-cue-change', { id: track.id, startCue: track.startCue });
+                }), endCueRegion.on('update-end', () => {
+                    track.endCue = endCueRegion.start;
+                    this.emit('end-cue-change', { id: track.id, endCue: track.endCue });
+                }));
+            }
+            // Intro
+            if (track.intro) {
+                const introRegion = wsRegions.addRegion({
+                    start: 0,
+                    end: track.intro.endTime,
+                    content: track.intro.label,
+                    color: this.options.trackBackground,
+                    drag: false,
+                });
+                introRegion.element.querySelector('[data-resize="left"]')?.remove();
+                introRegion.element.parentElement.style.mixBlendMode = 'plus-lighter';
+                if (track.intro.color) {
+                    ;
+                    introRegion.element.querySelector('[data-resize="right"]').style.borderColor =
+                        track.intro.color;
+                }
+                this.subscriptions.push(introRegion.on('update-end', () => {
+                    this.emit('intro-end-change', { id: track.id, endTime: introRegion.end });
+                }));
+            }
+            // Render markers
+            if (track.markers) {
+                track.markers.forEach((marker) => {
+                    wsRegions.addRegion({
+                        start: marker.time,
+                        content: marker.label,
+                        color: marker.color,
+                        resize: false,
+                    });
+                });
+            }
+        }));
+        // Envelope
+        const envelope = ws.registerPlugin(EnvelopePlugin.create({
+            ...this.options.envelopeOptions,
+            fadeInStart: track.startCue,
+            fadeInEnd: track.fadeInEnd,
+            fadeOutStart: track.fadeOutStart,
+            fadeOutEnd: track.endCue,
+            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 });
+        }), this.on('start-cue-change', ({ id, startCue }) => {
+            if (id === track.id) {
+                envelope.setStartTime(startCue);
+            }
+        }), this.on('end-cue-change', ({ id, endCue }) => {
+            if (id === track.id) {
+                envelope.setEndTime(endCue);
+            }
+        }));
+        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.create({
+            duration: this.maxDuration,
+            container: this.rendering.containers[0].parentElement,
+        }));
+    }
+    updatePosition(time, autoCenter = false) {
+        const precisionSeconds = 0.3;
+        const isPaused = !this.isPlaying();
+        if (time !== this.currentTime) {
+            this.currentTime = time;
+            this.rendering.updateCursor(time / this.maxDuration, autoCenter);
+        }
+        // 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 track = this.tracks[index];
+        if (!track.draggable)
+            return;
+        const newStartPosition = track.startPosition + delta * this.maxDuration;
+        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.initDurations(this.durations);
+            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;
+    }
+    /** Position percentage from 0 to 1 */
+    seekTo(position) {
+        const wasPlaying = this.isPlaying();
+        this.updatePosition(position * this.maxDuration);
+        if (wasPlaying)
+            this.play();
+    }
+    /** Set time in seconds */
+    setTime(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.wavesurfers.map((ws) => ws.setSinkId(sinkId)));
+    }
+}
+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;