wavesurfer.js 7.0.0-beta.6 → 7.0.0-beta.8

package/dist/plugins/minimap.min.cjs

@@ -1 +0,0 @@
-!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:()=>g});const i=class{constructor(){this.listeners={}}on(t,e){return this.listeners[t]||(this.listeners[t]=new Set),this.listeners[t].add(e),()=>this.un(t,e)}once(t,e){const i=this.on(t,e),s=this.on(t,(()=>{i(),s()}));return i}un(t,e){this.listeners[t]&&(e?this.listeners[t].delete(e):delete this.listeners[t])}unAll(){this.listeners={}}emit(t,...e){this.listeners[t]&&this.listeners[t].forEach((t=>t(...e)))}},s=class extends i{constructor(t){super(),this.subscriptions=[],this.options=t}onInit(){}init(t){this.wavesurfer=t,this.onInit()}destroy(){this.subscriptions.forEach((t=>t()))}},r={decode:async function(t,e){const i=new AudioContext({sampleRate:e}),s=i.decodeAudioData(t);return s.finally((()=>i.close())),s},createBuffer:function(t,e){return"number"==typeof t[0]&&(t=[t]),function(t){const e=t[0];if(e.some((t=>t>1||t<-1))){const i=e.length;let s=0;for(let t=0;t<i;t++){const i=Math.abs(e[t]);i>s&&(s=i)}for(const e of t)for(let t=0;t<i;t++)e[t]/=s}}(t),{duration:e,length:t[0].length,sampleRate:t[0].length/e,numberOfChannels:t.length,getChannelData:e=>t?.[e],copyFromChannel:AudioBuffer.prototype.copyFromChannel,copyToChannel:AudioBuffer.prototype.copyToChannel}}},n=async function(t){return fetch(t).then((t=>t.arrayBuffer()))},o=class extends i{constructor(t){super(),this.isExternalMedia=!1,t.media?(this.media=t.media,this.isExternalMedia=!0):this.media=document.createElement("audio"),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})}revokeSrc(){(this.media.currentSrc||this.media.src||"").startsWith("blob:")&&URL.revokeObjectURL(this.media.currentSrc)}setSrc(t,e){if((this.media.currentSrc||this.media.src||"")===t)return;this.revokeSrc();const i=e?URL.createObjectURL(new Blob([e],{type:"audio/wav"})):t;this.media.src=i}destroy(){this.media.pause(),this.revokeSrc(),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.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)}};class a extends i{constructor(t,e){if(super(),this.options={height:0},this.timeout=null,this.isScrolling=!1,this.audioData=null,this.resizeObserver=null,this.isDragging=!1,this.options={...e},"string"==typeof t&&(t=document.querySelector(t)),!t)throw new Error("Container not found");const[i,s]=this.initHtml();t.appendChild(i),this.container=i,this.scrollContainer=s.querySelector(".scroll"),this.wrapper=s.querySelector(".wrapper"),this.canvasWrapper=s.querySelector(".canvases"),this.progressWrapper=s.querySelector(".progress"),this.cursor=s.querySelector(".cursor"),this.initEvents()}initEvents(){this.wrapper.addEventListener("click",(t=>{const e=this.wrapper.getBoundingClientRect(),i=(t.clientX-e.left)/e.width;this.emit("click",i)})),this.initDrag(),this.scrollContainer.addEventListener("scroll",(()=>{const{scrollLeft:t,scrollWidth:e,clientWidth:i}=this.scrollContainer,s=t/e,r=(t+i)/e;this.emit("scroll",s,r)})),this.resizeObserver=new ResizeObserver((()=>{this.delay((()=>this.reRender()),100)})),this.resizeObserver.observe(this.scrollContainer)}initDrag(){this.wrapper.addEventListener("mousedown",(t=>{const e=t.clientX,i=t=>{if(Math.abs(t.clientX-e)>=5){this.isDragging=!0;const e=this.wrapper.getBoundingClientRect();this.emit("drag",Math.max(0,Math.min(1,(t.clientX-e.left)/e.width)))}},s=()=>{document.removeEventListener("mousemove",i),document.removeEventListener("mouseup",s),this.isDragging=!1};document.addEventListener("mousemove",i),document.addEventListener("mouseup",s)}))}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        }\n        :host .cursor {\n          pointer-events: none;\n          position: absolute;\n          z-index: 2;\n          top: 0;\n          left: 0;\n          height: 100%;\n          border-radius: 2px;\n          width: ${this.options.cursorWidth}px;\n          background-color: ${this.options.cursorColor||this.options.progressColor};\n        }\n      </style>\n\n      <div class="scroll" part="scroll">\n        <div class="wrapper">\n          <div class="canvases"></div>\n          <div class="progress"></div>\n          <div class="cursor" part="cursor"></div>\n        </div>\n      </div>\n    `,[t,e]}setOptions(t){this.options=t,this.reRender()}getWrapper(){return this.wrapper}getScroll(){return this.scrollContainer.scrollLeft}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||isNaN(this.options.barWidth)?1:this.options.barWidth*s,n=null==this.options.barGap||isNaN(this.options.barGap)?this.options.barWidth?r/2:0:this.options.barGap*s,o=this.options.barRadius||0,h=this.options.barHeight||1,l=t.getChannelData(0),c=l.length,d=Math.floor(e/(r+n))/c,p=i/2,u=1===t.numberOfChannels,m=u?l:t.getChannelData(1),g=u&&m.some((t=>t<0)),v=(t,i)=>{let a=0,u=0,v=0;const f=document.createElement("canvas");f.width=Math.round(e*(i-t)/c),f.height=this.options.height,f.style.width=`${Math.floor(f.width/s)}px`,f.style.height=`${this.options.height}px`,f.style.left=`${Math.floor(t*e/s/c)}px`,this.canvasWrapper.appendChild(f);const y=f.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)*d);if(i>a){const t=Math.round(u*p*h),e=Math.round(v*p*h);y.roundRect(a*(r+n),p-t,r,t+(e||1),o),a=i,u=0,v=0}const s=g?l[e]:Math.abs(l[e]),c=g?m[e]:Math.abs(m[e]);s>u&&(u=s),(g?c<-v:c>v)&&(v=c<0?-c:c)}y.fill(),y.closePath();const b=f.cloneNode();this.progressWrapper.appendChild(b);const w=b.getContext("2d",{desynchronized:!0});f.width>0&&f.height>0&&w.drawImage(f,0,0),w.globalCompositeOperation="source-in",w.fillStyle=this.options.progressColor??"",w.fillRect(0,0,f.width,f.height)};this.canvasWrapper.innerHTML="",this.progressWrapper.innerHTML="";const{scrollLeft:f,scrollWidth:y,clientWidth:b}=this.scrollContainer,w=c/y;let W=Math.min(a.MAX_CANVAS_WIDTH,b);W-=W%((r+n)/s);const C=Math.floor(Math.abs(f)*w),E=Math.ceil(C+W*w);v(C,E);const M=E-C;for(let t=E;t<c;t+=M)await this.delay((()=>{v(t,Math.min(c,t+M))}));for(let t=C-1;t>=0;t-=M)await this.delay((()=>{v(Math.max(0,t-M),t)}))}render(t){const e=window.devicePixelRatio||1,i=this.scrollContainer.clientWidth,s=Math.ceil(t.duration*(this.options.minPxPerSec||0));this.isScrolling=s>i;const r=this.options.fillParent&&!this.isScrolling,n=(r?i:s)*e,{height:o}=this.options;this.wrapper.style.width=r?"100%":`${s}px`,this.scrollContainer.style.overflowX=this.isScrolling?"auto":"hidden",this.scrollContainer.classList.toggle("noScrollbar",!!this.options.hideScrollbar),this.cursor.style.backgroundColor=`${this.options.cursorColor||this.options.progressColor}`,this.cursor.style.width=`${this.options.cursorWidth}px`,this.canvasWrapper.style.height=`${this.options.height}px`,this.renderPeaks(t,n,o,e),this.audioData=t,this.emit("render")}reRender(){if(!this.audioData)return;const t=this.progressWrapper.clientWidth;this.render(this.audioData);const e=this.progressWrapper.clientWidth;this.scrollContainer.scrollLeft+=e-t}zoom(t){this.options.minPxPerSec=t,this.reRender()}scrollIntoView(t,e=!1){const{clientWidth:i,scrollLeft:s,scrollWidth:r}=this.scrollContainer,n=r*t,o=i/2;if(n>s+(e&&this.options.autoCenter&&!this.isDragging?o:i)||n<s)if(this.options.autoCenter&&!this.isDragging){const t=o/20;n-(s+o)>=t&&n<s+i?this.scrollContainer.scrollLeft+=t:this.scrollContainer.scrollLeft=n-o}else if(this.isDragging){const t=10;this.scrollContainer.scrollLeft=n<s?n-t:n-i+t}else this.scrollContainer.scrollLeft=n;{const{scrollLeft:t}=this.scrollContainer,e=t/r,s=(t+i)/r;this.emit("scroll",e,s)}}renderProgress(t,e){isNaN(t)||(this.progressWrapper.style.width=100*t+"%",this.cursor.style.left=100*t+"%",this.cursor.style.marginLeft=100===Math.round(100*t)?`-${this.options.cursorWidth}px`:"",this.isScrolling&&this.options.autoScroll&&this.scrollIntoView(t,e))}}a.MAX_CANVAS_WIDTH=4e3;const h=a,l=class extends i{constructor(){super(...arguments),this.unsubscribe=()=>{}}start(){this.unsubscribe=this.on("tick",(()=>{requestAnimationFrame((()=>{this.emit("tick")}))})),this.emit("tick")}stop(){this.unsubscribe()}destroy(){this.unsubscribe()}},c={height:128,waveColor:"#999",progressColor:"#555",cursorWidth:1,minPxPerSec:0,fillParent:!0,interact:!0,autoScroll:!0,autoCenter:!0,sampleRate:8e3};class d extends o{static create(t){return new d(t)}constructor(t){super({media:t.media,autoplay:t.autoplay,playbackRate:t.audioRate}),this.plugins=[],this.decodedData=null,this.canPlay=!1,this.subscriptions=[],this.options=Object.assign({},c,t),this.timer=new l,this.renderer=new h(this.options.container,this.options),this.initPlayerEvents(),this.initRendererEvents(),this.initTimerEvents(),this.initReadyEvent(),this.initPlugins();const e=this.options.url||this.options.media?.currentSrc||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),t.audioRate&&this.setPlaybackRate(t.audioRate)}initPlayerEvents(){this.subscriptions.push(this.onMediaEvent("timeupdate",(()=>{const t=this.getCurrentTime();this.renderer.renderProgress(t/this.getDuration(),this.isPlaying()),this.emit("timeupdate",t)})),this.onMediaEvent("play",(()=>{this.emit("play"),this.timer.start()})),this.onMediaEvent("pause",(()=>{this.emit("pause"),this.timer.stop()})),this.onMediaEvent("ended",(()=>{this.emit("finish")})),this.onMediaEvent("canplay",(()=>{this.canPlay=!0,this.emit("canplay",this.getDuration())})),this.onMediaEvent("seeking",(()=>{this.emit("seeking",this.getCurrentTime())})))}initRendererEvents(){this.subscriptions.push(this.renderer.on("click",(t=>{this.options.interact&&(this.canPlay&&this.seekTo(t),this.emit("interaction"),this.emit("click",t))})),this.renderer.on("scroll",((t,e)=>{const i=this.getDuration();this.emit("scroll",t*i,e*i)})),this.renderer.on("render",(()=>{this.emit("redraw")})));{let t;this.subscriptions.push(this.renderer.on("drag",(e=>{this.options.interact&&(this.canPlay&&(this.renderer.renderProgress(e),clearTimeout(t),t=setTimeout((()=>{this.seekTo(e)}),this.isPlaying()?0:200)),this.emit("interaction"),this.emit("drag",e))})))}}initTimerEvents(){this.subscriptions.push(this.timer.on("tick",(()=>{const t=this.getCurrentTime();this.renderer.renderProgress(t/this.getDuration(),!0),this.emit("timeupdate",t),this.emit("audioprocess",t)})))}initReadyEvent(){const t=()=>{this.decodedData&&this.canPlay&&this.emit("ready",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(this),this.plugins.push(t),t}getWrapper(){return this.renderer.getWrapper()}getScroll(){return this.renderer.getScroll()}getActivePlugins(){return this.plugins}async load(t,e,i){if(this.decodedData=null,this.canPlay=!1,this.emit("load",t),e)this.setSrc(t),i||(i=await new Promise((t=>{this.onceMediaEvent("loadedmetadata",(()=>t(this.getMediaElement().duration)))}))||0),this.decodedData=r.createBuffer(e,i);else{const e=await n(t);this.setSrc(t,e),this.decodedData=await r.decode(e,this.options.sampleRate)}this.emit("decode",this.getDuration()),this.renderer.render(this.decodedData)}zoom(t){if(!this.decodedData)throw new Error("No audio loaded");this.renderer.zoom(t),this.emit("zoom",t)}getDecodedData(){return this.decodedData}getDuration(){const t=super.getDuration();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.subscriptions.forEach((t=>t())),this.plugins.forEach((t=>t.destroy())),this.timer.destroy(),this.renderer.destroy(),super.destroy()}}const p=d,u={height:50,overlayColor:"rgba(100, 100, 100, 0.1)",insertPosition:"afterend"};class m extends s{constructor(t){super(t),this.miniWavesurfer=null,this.container=null,this.options=Object.assign({},u,t),this.minimapWrapper=this.initMinimapWrapper(),this.overlay=this.initOverlay()}static create(t){return new m(t)}onInit(){if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");this.options.container?("string"==typeof this.options.container?this.container=document.querySelector(this.options.container):this.options.container instanceof HTMLElement&&(this.container=this.options.container),this.container?.appendChild(this.minimapWrapper)):(this.container=this.wavesurfer.getWrapper().parentElement,this.container?.insertAdjacentElement(this.options.insertPosition,this.minimapWrapper)),this.initWaveSurferEvents()}initMinimapWrapper(){const t=document.createElement("div");return t.style.position="relative",t.setAttribute("part","minimap"),t}initOverlay(){const t=document.createElement("div");return t.setAttribute("style","position: absolute; z-index: 2; left: 0; top: 0; bottom: 0; transition: left 100ms ease-out; pointer-events: none;"),t.style.backgroundColor=this.options.overlayColor,this.minimapWrapper.appendChild(t),t}initMinimap(){if(this.miniWavesurfer&&(this.miniWavesurfer.destroy(),this.miniWavesurfer=null),!this.wavesurfer)return;const t=this.wavesurfer.getDecodedData(),e=this.wavesurfer.getMediaElement();t&&e&&(this.miniWavesurfer=p.create({...this.options,container:this.minimapWrapper,minPxPerSec:0,fillParent:!0,media:e,peaks:[t.getChannelData(0)],duration:t.duration}),this.subscriptions.push(this.miniWavesurfer.on("ready",(()=>{this.emit("ready")})),this.miniWavesurfer.on("interaction",(()=>{this.wavesurfer&&this.miniWavesurfer&&this.wavesurfer.setTime(this.miniWavesurfer.getCurrentTime()),this.emit("interaction")}))))}getOverlayWidth(){const t=this.wavesurfer?.getWrapper().clientWidth||1;return Math.round(this.minimapWrapper.clientWidth/t*100)}onRedraw(){const t=this.getOverlayWidth();this.overlay.style.width=`${t}%`}onScroll(t){if(!this.wavesurfer)return;const e=this.wavesurfer.getDuration();this.overlay.style.left=t/e*100+"%"}initWaveSurferEvents(){this.wavesurfer&&this.subscriptions.push(this.wavesurfer.on("decode",(()=>{this.initMinimap()})),this.wavesurfer.on("scroll",(t=>{this.onScroll(t)})),this.wavesurfer.on("redraw",(()=>{this.onRedraw()})))}destroy(){this.miniWavesurfer?.destroy(),this.minimapWrapper.remove(),super.destroy()}}const g=m;return e.default})()));

package/dist/plugins/multitrack.d.ts

@@ -1,117 +0,0 @@
-/**
- * Multitrack isn't a plugin, but rather a helper class for creating a multitrack audio player.
- * Individual tracks are synced and played together. They can be dragged to set their start position.
- */
-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: [];
-    '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

@@ -1,507 +0,0 @@
-/**
- * Multitrack isn't a plugin, but rather a helper class for creating a multitrack audio player.
- * Individual tracks are synced and played together. They can be dragged to set their start position.
- */
-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 {
-    static create(tracks, options) {
-        return new MultiTrack(tracks, options);
-    }
-    constructor(tracks, options) {
-        super();
-        this.audios = [];
-        this.wavesurfers = [];
-        this.durations = [];
-        this.currentTime = 0;
-        this.maxDuration = 0;
-        this.isDragging = false;
-        this.frameRequest = null;
-        this.timer = null;
-        this.subscriptions = [];
-        this.timeline = null;
-        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,
-            hideScrollbar: true,
-        });
-        // Regions and markers
-        const wsRegions = RegionsPlugin.create();
-        ws.registerPlugin(wsRegions);
-        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;