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

package/dist/plugins/multitrack.js

@@ -1,7 +1,9 @@
 import WaveSurfer from '../index.js';
 import RegionsPlugin from './regions.js';
 import TimelinePlugin from './timeline.js';
-class MultiTrack {
+import EnvelopePlugin from './envelope.js';
+import EventEmitter from '../event-emitter.js';
+class MultiTrack extends EventEmitter {
     tracks;
     options;
     audios = [];
@@ -12,10 +14,14 @@ class MultiTrack {
     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,
@@ -23,98 +29,142 @@ class MultiTrack {
         }));
         this.options = options;
         this.rendering = initRendering(this.tracks, this.options);
-        this.initAudios().then((durations) => {
-            this.durations = durations;
-            const maxDuration = this.tracks.reduce((max, track, index) => {
-                return Math.max(max, track.startPosition + durations[index]);
-            }, 0);
-            this.rendering.setMainWidth(durations, maxDuration);
-            this.rendering.addClickHandler((position) => {
-                if (this.isDragging)
-                    return;
-                this.seekTo(position * maxDuration);
-            });
-            this.maxDuration = maxDuration;
-            this.initWavesurfers();
-            this.initTimeline();
+        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.wavesurfers[index].once('destroy', () => drag?.destroy());
             });
+            this.emit('canplay');
         });
     }
-    initAudios() {
-        this.audios = this.tracks.map((track) => new Audio(track.url));
-        return Promise.all(this.audios.map((audio) => {
-            return new Promise((resolve) => {
-                if (!audio.src)
-                    return resolve(0);
-                audio.addEventListener('canplay', () => {
-                    resolve(audio.duration);
-                }, { once: true });
-            });
+    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;
     }
-    initWavesurfers() {
+    initAllWavesurfers() {
         const wavesurfers = this.tracks.map((track, index) => {
-            // Create a wavesurfer instance
-            const ws = WaveSurfer.create({
-                ...track.options,
-                container: this.rendering.containers[index],
-                minPxPerSec: 0,
-                media: this.audios[index],
-                peaks: track.peaks,
-                cursorColor: 'transparent',
-                cursorWidth: 0,
-                interactive: false,
-            });
-            const wsRegions = ws.registerPlugin(RegionsPlugin, {
-                draggable: false,
-                resizable: true,
-                dragSelection: false,
-            });
-            ws.once('decode', () => {
-                // Render start and end cues
-                if (track.startCue) {
-                    const region = wsRegions.add(0, track.startCue, '', 'rgba(0, 0, 0, 0.7)');
-                    region.element.firstElementChild?.remove();
-                }
-                if (track.endCue) {
-                    const region = wsRegions.add(track.endCue, track.endCue + this.durations[index], '', 'rgba(0, 0, 0, 0.7)');
-                    region.element.lastChild?.remove();
-                }
-                // 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);
-                    });
-                }
-            });
-            return ws;
+            return this.initWavesurfer(track, index);
         });
         this.wavesurfers = wavesurfers;
+        this.initTimeline();
     }
     initTimeline() {
-        this.wavesurfers[0].registerPlugin(TimelinePlugin, {
+        if (this.timeline)
+            this.timeline.destroy();
+        this.timeline = this.wavesurfers[0].registerPlugin(TimelinePlugin, {
             duration: this.maxDuration,
             container: this.rendering.containers[0].parentElement,
         });
     }
-    updatePosition(time) {
+    updatePosition(time, autoCenter = false) {
         const precisionSeconds = 0.3;
         this.currentTime = time;
-        this.rendering.updateCursor(time / this.maxDuration);
+        this.rendering.updateCursor(time / this.maxDuration, autoCenter);
         const isPaused = !this.isPlaying();
         // Update the current time of each audio
         this.tracks.forEach((track, index) => {
@@ -138,10 +188,15 @@ class MultiTrack {
                 audio.volume = newVolume;
         });
     }
-    onDrag(index, delta) {
+    setIsDragging() {
         // Prevent click events when dragging
         this.isDragging = true;
-        setTimeout(() => (this.isDragging = false), 600);
+        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);
     }
@@ -157,7 +212,7 @@ class MultiTrack {
             track.startPosition = newStartPosition;
             this.rendering.setContainerOffsets();
             this.updatePosition(this.currentTime);
-            this.options.onTrackPositionUpdate?.(track.id, track.startPosition);
+            this.emit('start-position-change', { id: track.id, startPosition: newStartPosition });
         }
     }
     findCurrentTracks() {
@@ -185,7 +240,7 @@ class MultiTrack {
                 return pos;
             }, this.currentTime);
             if (position > this.currentTime) {
-                this.updatePosition(position);
+                this.updatePosition(position, true);
             }
             this.frameRequest = requestAnimationFrame(onFrame);
         };
@@ -204,6 +259,9 @@ class MultiTrack {
     isPlaying() {
         return this.audios.some((audio) => !audio.paused);
     }
+    getCurrentTime() {
+        return this.currentTime;
+    }
     seekTo(time) {
         const wasPlaying = this.isPlaying();
         this.updatePosition(time);
@@ -216,6 +274,25 @@ class MultiTrack {
         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);
@@ -228,10 +305,18 @@ class MultiTrack {
             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;');
@@ -247,16 +332,35 @@ function initRendering(tracks, options) {
     wrapper.appendChild(cursor);
     const { clientWidth } = wrapper;
     // Create containers for each track
-    const containers = tracks.map((_, index) => {
+    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) {
+        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;
     });
@@ -264,10 +368,10 @@ function initRendering(tracks, options) {
     const setContainerOffsets = () => {
         containers.forEach((container, i) => {
             const offset = tracks[i].startPosition * pxPerSec;
-            container.style.width = `${durations[i] * pxPerSec}px`;
+            if (durations[i]) {
+                container.style.width = `${durations[i] * pxPerSec}px`;
+            }
             container.style.transform = `translateX(${offset}px)`;
-            if (tracks[i].draggable)
-                container.style.cursor = 'move';
         });
     };
     return {
@@ -278,13 +382,21 @@ function initRendering(tracks, options) {
         setMainWidth: (trackDurations, maxDuration) => {
             durations = trackDurations;
             pxPerSec = Math.max(options.minPxPerSec || 0, clientWidth / maxDuration);
-            const width = pxPerSec * maxDuration;
-            wrapper.style.width = `${width}px`;
+            mainWidth = pxPerSec * maxDuration;
+            wrapper.style.width = `${mainWidth}px`;
             setContainerOffsets();
         },
         // Update cursor position
-        updateCursor: (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) => {
@@ -299,6 +411,18 @@ function initRendering(tracks, options) {
         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) {
@@ -316,12 +440,14 @@ function initDragging(container, onDrag, rightButtonDrag = false) {
             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

package/dist/plugins/regions.js

@@ -163,6 +163,21 @@ class RegionsPlugin extends BasePlugin {
             }
         });
         this.regionsContainer.appendChild(div);
+        // Check that the label doesn't overlap with other labels
+        // If it does, push it down
+        const labelLeft = div.getBoundingClientRect().left;
+        const labelWidth = div.scrollWidth;
+        const overlap = this.regions
+            .filter((reg) => {
+            const { left } = reg.element.getBoundingClientRect();
+            const width = reg.element.scrollWidth;
+            return labelLeft < left + width && left < labelLeft + labelWidth;
+        })
+            .map((reg) => parseFloat(reg.element.style.paddingTop))
+            .reduce((sum, val) => sum + val, 0);
+        if (overlap > 0) {
+            div.style.paddingTop = `${overlap + 1}em`;
+        }
         return div;
     }
     createRegion(start, end, title = '') {

package/dist/renderer.d.ts

@@ -26,6 +26,7 @@ declare class Renderer extends EventEmitter<RendererEvents> {
     private canvasWrapper;
     private progressWrapper;
     private timeout;
+    private isScrolling;
     constructor(options: RendererOptions);
     getContainer(): HTMLElement;
     getWrapper(): HTMLElement;

package/dist/renderer.js

@@ -7,6 +7,7 @@ class Renderer extends EventEmitter {
     canvasWrapper;
     progressWrapper;
     timeout = null;
+    isScrolling = false;
     constructor(options) {
         super();
         this.options = options;
@@ -201,12 +202,12 @@ class Renderer extends EventEmitter {
         const pixelRatio = window.devicePixelRatio || 1;
         const parentWidth = this.options.fillParent ? this.scrollContainer.clientWidth * pixelRatio : 0;
         const scrollWidth = audioData.duration * this.options.minPxPerSec;
-        const isScrolling = scrollWidth > parentWidth;
-        const width = Math.max(1, isScrolling ? scrollWidth : parentWidth);
+        this.isScrolling = scrollWidth > parentWidth;
+        const width = Math.max(1, this.isScrolling ? scrollWidth : parentWidth);
         const { height } = this.options;
         // Remember the current cursor position
         const oldCursorPosition = this.progressWrapper.clientWidth;
-        this.scrollContainer.style.overflowX = isScrolling ? 'auto' : 'hidden';
+        this.scrollContainer.style.overflowX = this.isScrolling ? 'auto' : 'hidden';
         this.wrapper.style.width = `${Math.floor(width / pixelRatio)}px`;
         // Adjust the scroll position so that the cursor stays in the same place
         const newCursortPosition = this.progressWrapper.clientWidth;
@@ -224,12 +225,14 @@ class Renderer extends EventEmitter {
     }
     renderProgress(progress, autoCenter = false) {
         this.progressWrapper.style.width = `${progress * 100}%`;
-        const containerWidth = this.scrollContainer.clientWidth;
-        const center = containerWidth / 2;
-        const progressWidth = this.progressWrapper.clientWidth;
-        const minScroll = autoCenter ? center : containerWidth;
-        if (progressWidth > this.scrollContainer.scrollLeft + minScroll) {
-            this.scrollContainer.scrollLeft = progressWidth - center;
+        if (this.isScrolling) {
+            const containerWidth = this.scrollContainer.clientWidth;
+            const center = containerWidth / 2;
+            const progressWidth = this.progressWrapper.clientWidth;
+            const minScroll = autoCenter ? center : containerWidth;
+            if (progressWidth > this.scrollContainer.scrollLeft + minScroll) {
+                this.scrollContainer.scrollLeft = progressWidth - center;
+            }
         }
     }
 }

package/dist/wavesurfer.Minimap.min.js

@@ -1 +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:()=>d});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,e){super(),this.wavesurfer=t.wavesurfer,this.container=t.container,this.wrapper=t.wrapper,this.options=e}destroy(){this.subscriptions.forEach((t=>t()))}},r=class extends i{options;container;scrollContainer;wrapper;canvasWrapper;progressWrapper;timeout=null;constructor(t){super(),this.options=t;let e=null;if("string"==typeof this.options.container?e=document.querySelector(this.options.container):this.options.container instanceof HTMLElement&&(e=this.options.container),!e)throw new Error("Container not found");const i=document.createElement("div"),s=i.attachShadow({mode:"open"});s.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          ${this.options.noScrollbar?"scrollbar-color: transparent;":""}\n        }\n        :host ::-webkit-scrollbar {\n          display: ${this.options.noScrollbar?"none":"auto"};\n        }\n        :host .wrapper {\n          position: relative;\n          min-width: 100%;\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          height: ${this.options.height}px;\n          image-rendering: pixelated;\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: ${this.options.height}px;\n          overflow: hidden;\n          box-sizing: border-box;\n          border-right-style: solid;\n          border-right-width: ${this.options.cursorWidth}px;\n          border-right-color: ${this.options.cursorColor||this.options.progressColor};\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    `,this.container=i,this.scrollContainer=s.querySelector(".scroll"),this.wrapper=s.querySelector(".wrapper"),this.canvasWrapper=s.querySelector(".canvases"),this.progressWrapper=s.querySelector(".progress"),e.appendChild(i),this.wrapper.addEventListener("click",(t=>{const e=this.wrapper.getBoundingClientRect(),i=(t.clientX-e.left)/e.width;this.emit("click",{relativeX:i})}))}getContainer(){return this.scrollContainer}getWrapper(){return this.wrapper}destroy(){this.container.remove()}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,p=1===t.length,c=p?a:t[1],u=p&&c.some((t=>t<0)),m=(t,i)=>{let p=0,m=0,y=0;const g=document.createElement("canvas");g.width=Math.round(e*(i-t)/h),g.height=this.options.height,g.style.width=`${Math.floor(g.width/s)}px`,g.style.left=`${Math.floor(t*e/s/h)}px`,this.canvasWrapper.appendChild(g);const v=g.getContext("2d",{desynchronized:!0});v.beginPath(),v.fillStyle=this.options.waveColor,v.roundRect||(v.roundRect=v.fillRect);for(let e=t;e<i;e++){const i=Math.round((e-t)*l);if(i>p){const t=Math.round(m*d),e=Math.round(y*d);v.roundRect(p*(r+n),d-t,r,t+e||1,o),p=i,m=0,y=0}const s=u?a[e]:Math.abs(a[e]),h=u?c[e]:Math.abs(c[e]);s>m&&(m=s),(u?h<-y:h>y)&&(y=h<0?-h:h)}v.fill(),v.closePath();const f=g.cloneNode();this.progressWrapper.appendChild(f);const b=f.getContext("2d",{desynchronized:!0});b.drawImage(g,0,0),b.globalCompositeOperation="source-in",b.fillStyle=this.options.progressColor,b.fillRect(0,0,g.width,g.height)};this.canvasWrapper.innerHTML="",this.progressWrapper.innerHTML="";const{scrollLeft:y,scrollWidth:g,clientWidth:v}=this.scrollContainer,f=h/g,b=Math.floor(y*f),w=Math.ceil(Math.min(g,y+v)*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){const e=window.devicePixelRatio||1,i=this.options.fillParent?this.scrollContainer.clientWidth*e:0,s=t.duration*this.options.minPxPerSec,r=s>i,n=Math.max(1,r?s:i),{height:o}=this.options,a=this.progressWrapper.clientWidth;this.scrollContainer.style.overflowX=r?"auto":"hidden",this.wrapper.style.width=`${Math.floor(n/e)}px`;const h=this.progressWrapper.clientWidth;this.scrollContainer.scrollLeft+=h-a;const l=[t.getChannelData(0)];t.numberOfChannels>1&&l.push(t.getChannelData(1)),this.renderPeaks(l,n,o,e)}zoom(t,e){this.options.minPxPerSec=e,this.render(t)}renderProgress(t,e=!1){this.progressWrapper.style.width=100*t+"%";const i=this.scrollContainer.clientWidth,s=i/2,r=this.progressWrapper.clientWidth,n=e?s:i;r>this.scrollContainer.scrollLeft+n&&(this.scrollContainer.scrollLeft=r-s)}},n=class extends i{unsubscribe=()=>{};start(){this.unsubscribe=this.on("tick",(()=>{requestAnimationFrame((()=>{this.emit("tick")}))})),this.emit("tick")}stop(){this.unsubscribe()}destroy(){this.unsubscribe()}},o={height:128,waveColor:"#999",progressColor:"#555",cursorWidth:1,minPxPerSec:0,fillParent:!0,interactive:!0};class a extends i{options;fetcher;decoder;renderer;player;timer;plugins=[];subscriptions=[];decodedData=null;static create(t){return new a(t)}constructor(t){super(),this.options=Object.assign({},o,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 n,this.player=new class{media;isExternalMedia=!1;hasPlayedOnce=!1;subscriptions=[];constructor({media:t,autoplay:e}){t?(this.media=t,this.isExternalMedia=!0):this.media=document.createElement("audio"),this.subscriptions.push(this.on("play",(()=>{this.hasPlayedOnce=!0}),{once:!0})),e&&(this.media.autoplay=!0)}on(t,e,i){return this.media.addEventListener(t,e,i),()=>this.media.removeEventListener(t,e)}destroy(){this.subscriptions.forEach((t=>{t()})),this.media.pause(),this.isExternalMedia||this.media.remove()}loadUrl(t){this.media.src=t}getCurrentTime(){return this.media.currentTime}play(){this.media.play()}pause(){this.media.pause()}isPlaying(){return this.media.currentTime>0&&!this.media.paused&&!this.media.ended}seekTo(t){!this.hasPlayedOnce&&navigator.userAgent.match(/(iPad|iPhone|iPod)/g)&&this.media.play()?.then?.((()=>{setTimeout((()=>this.media.pause()),10)})),this.media.currentTime=t}getDuration(){return this.media.duration}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}}({media:this.options.media,autoplay:this.options.autoplay}),this.renderer=new r({container:this.options.container,height:this.options.height,waveColor:this.options.waveColor,progressColor:this.options.progressColor,cursorColor:this.options.cursorColor,cursorWidth:this.options.cursorWidth,minPxPerSec:this.options.minPxPerSec,fillParent:this.options.fillParent,barWidth:this.options.barWidth,barGap:this.options.barGap,barRadius:this.options.barRadius,noScrollbar:this.options.noScrollbar}),this.initPlayerEvents(),this.initRendererEvents(),this.initTimerEvents(),this.initReadyEvent();const e=this.options.url||this.options.media?.src;e&&this.load(e,this.options.peaks,this.options.duration)}initPlayerEvents(){this.subscriptions.push(this.player.on("timeupdate",(()=>{const t=this.getCurrentTime();this.renderer.renderProgress(t/this.getDuration(),this.isPlaying()),this.emit("timeupdate",{currentTime:t})})),this.player.on("play",(()=>{this.emit("play"),this.timer.start()})),this.player.on("pause",(()=>{this.emit("pause"),this.timer.stop()})),this.player.on("canplay",(()=>{this.emit("canplay",{duration:this.getDuration()})})),this.player.on("seeking",(()=>{this.emit("seeking",{currentTime:this.getCurrentTime()})})))}initRendererEvents(){this.subscriptions.push(this.renderer.on("click",(({relativeX:t})=>{if(this.options.interactive){const e=this.getDuration()*t;this.seekTo(e),this.emit("seekClick",{currentTime:this.getCurrentTime()})}})))}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(){let t=!1,e=!1;const i=()=>{t&&e&&this.emit("ready",{duration:this.getDuration()})};this.subscriptions.push(this.on("decode",(()=>{t=!0,i()})),this.on("canplay",(()=>{e=!0,i()})),this.player.on("waiting",(()=>{e=!1,t=!1})))}async load(t,e,i){if(this.player.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.player.on("canplay",(()=>t(this.getDuration())),{once:!0})}))||0),this.decodedData={duration:i,numberOfChannels:e.length,sampleRate:e[0].length/i,getChannelData:t=>e[t]};this.renderer.render(this.decodedData),this.emit("decode",{duration:this.decodedData.duration})}zoom(t){if(!this.decodedData)throw new Error("No audio loaded");this.renderer.zoom(this.decodedData,t)}play(){this.player.play()}pause(){this.player.pause()}seekTo(t){this.player.seekTo(t)}isPlaying(){return this.player.isPlaying()}getDuration(){return this.player.getDuration()||this.decodedData?.duration||0}getCurrentTime(){return this.player.getCurrentTime()}getVolume(){return this.player.getVolume()}setVolume(t){this.player.setVolume(t)}getMuted(){return this.player.getMuted()}setMuted(t){this.player.setMuted(t)}getPlaybackRate(){return this.player.getPlaybackRate()}setPlaybackRate(t,e){this.player.setPlaybackRate(t,e)}registerPlugin(t,e){const i=new t({wavesurfer:this,container:this.renderer.getContainer(),wrapper:this.renderer.getWrapper()},e);return this.plugins.push(i),i}getDecodedData(){return this.decodedData}getMediaElement(){return this.player.getMediaElement()}destroy(){this.emit("destroy"),this.subscriptions.forEach((t=>t())),this.plugins.forEach((t=>t.destroy())),this.timer.destroy(),this.player.destroy(),this.decoder.destroy(),this.renderer.destroy()}}const h=a,l={height:50,overlayColor:"rgba(100, 100, 100, 0.1)"},d=class extends s{options;minimapWrapper;miniWavesurfer=null;overlay;constructor(t,e){super(t,e),this.options=Object.assign({},l,e),this.minimapWrapper=this.initMinimapWrapper(),this.overlay=this.initOverlay(),this.subscriptions.push(this.wavesurfer.on("decode",(()=>{this.initMinimap()})))}initMinimapWrapper(){const t=document.createElement("div");return t.style.position="relative",this.container.insertAdjacentElement("afterend",t),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(){const t=this.wavesurfer.getDecodedData(),e=this.wavesurfer.getMediaElement();if(!t||!e)return;this.miniWavesurfer=h.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.wavesurfer.on("timeupdate",(({currentTime:t})=>{const e=Math.max(0,Math.min(t/this.wavesurfer.getDuration()*100-i/2,100-i)).toFixed(2);this.overlay.style.left=`${e}%`}))}destroy(){this.miniWavesurfer?.destroy(),this.minimapWrapper.remove(),super.destroy()}};return e.default})()));
+!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:()=>d});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,e){super(),this.wavesurfer=t.wavesurfer,this.container=t.container,this.wrapper=t.wrapper,this.options=e}destroy(){this.subscriptions.forEach((t=>t()))}},r=class extends i{options;container;scrollContainer;wrapper;canvasWrapper;progressWrapper;timeout=null;isScrolling=!1;constructor(t){super(),this.options=t;let e=null;if("string"==typeof this.options.container?e=document.querySelector(this.options.container):this.options.container instanceof HTMLElement&&(e=this.options.container),!e)throw new Error("Container not found");const i=document.createElement("div"),s=i.attachShadow({mode:"open"});s.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          ${this.options.noScrollbar?"scrollbar-color: transparent;":""}\n        }\n        :host ::-webkit-scrollbar {\n          display: ${this.options.noScrollbar?"none":"auto"};\n        }\n        :host .wrapper {\n          position: relative;\n          min-width: 100%;\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          height: ${this.options.height}px;\n          image-rendering: pixelated;\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: ${this.options.height}px;\n          overflow: hidden;\n          box-sizing: border-box;\n          border-right-style: solid;\n          border-right-width: ${this.options.cursorWidth}px;\n          border-right-color: ${this.options.cursorColor||this.options.progressColor};\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    `,this.container=i,this.scrollContainer=s.querySelector(".scroll"),this.wrapper=s.querySelector(".wrapper"),this.canvasWrapper=s.querySelector(".canvases"),this.progressWrapper=s.querySelector(".progress"),e.appendChild(i),this.wrapper.addEventListener("click",(t=>{const e=this.wrapper.getBoundingClientRect(),i=(t.clientX-e.left)/e.width;this.emit("click",{relativeX:i})}))}getContainer(){return this.scrollContainer}getWrapper(){return this.wrapper}destroy(){this.container.remove()}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,p=1===t.length,c=p?a:t[1],u=p&&c.some((t=>t<0)),m=(t,i)=>{let p=0,m=0,g=0;const y=document.createElement("canvas");y.width=Math.round(e*(i-t)/h),y.height=this.options.height,y.style.width=`${Math.floor(y.width/s)}px`,y.style.left=`${Math.floor(t*e/s/h)}px`,this.canvasWrapper.appendChild(y);const v=y.getContext("2d",{desynchronized:!0});v.beginPath(),v.fillStyle=this.options.waveColor,v.roundRect||(v.roundRect=v.fillRect);for(let e=t;e<i;e++){const i=Math.round((e-t)*l);if(i>p){const t=Math.round(m*d),e=Math.round(g*d);v.roundRect(p*(r+n),d-t,r,t+e||1,o),p=i,m=0,g=0}const s=u?a[e]:Math.abs(a[e]),h=u?c[e]:Math.abs(c[e]);s>m&&(m=s),(u?h<-g:h>g)&&(g=h<0?-h:h)}v.fill(),v.closePath();const f=y.cloneNode();this.progressWrapper.appendChild(f);const b=f.getContext("2d",{desynchronized:!0});b.drawImage(y,0,0),b.globalCompositeOperation="source-in",b.fillStyle=this.options.progressColor,b.fillRect(0,0,y.width,y.height)};this.canvasWrapper.innerHTML="",this.progressWrapper.innerHTML="";const{scrollLeft:g,scrollWidth:y,clientWidth:v}=this.scrollContainer,f=h/y,b=Math.floor(g*f),w=Math.ceil(Math.min(y,g+v)*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){const e=window.devicePixelRatio||1,i=this.options.fillParent?this.scrollContainer.clientWidth*e:0,s=t.duration*this.options.minPxPerSec;this.isScrolling=s>i;const r=Math.max(1,this.isScrolling?s:i),{height:n}=this.options,o=this.progressWrapper.clientWidth;this.scrollContainer.style.overflowX=this.isScrolling?"auto":"hidden",this.wrapper.style.width=`${Math.floor(r/e)}px`;const a=this.progressWrapper.clientWidth;this.scrollContainer.scrollLeft+=a-o;const h=[t.getChannelData(0)];t.numberOfChannels>1&&h.push(t.getChannelData(1)),this.renderPeaks(h,r,n,e)}zoom(t,e){this.options.minPxPerSec=e,this.render(t)}renderProgress(t,e=!1){if(this.progressWrapper.style.width=100*t+"%",this.isScrolling){const t=this.scrollContainer.clientWidth,i=t/2,s=this.progressWrapper.clientWidth,r=e?i:t;s>this.scrollContainer.scrollLeft+r&&(this.scrollContainer.scrollLeft=s-i)}}},n=class extends i{unsubscribe=()=>{};start(){this.unsubscribe=this.on("tick",(()=>{requestAnimationFrame((()=>{this.emit("tick")}))})),this.emit("tick")}stop(){this.unsubscribe()}destroy(){this.unsubscribe()}},o={height:128,waveColor:"#999",progressColor:"#555",cursorWidth:1,minPxPerSec:0,fillParent:!0,interactive:!0};class a extends i{options;fetcher;decoder;renderer;player;timer;plugins=[];subscriptions=[];decodedData=null;static create(t){return new a(t)}constructor(t){super(),this.options=Object.assign({},o,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 n,this.player=new class{media;isExternalMedia=!1;hasPlayedOnce=!1;subscriptions=[];constructor({media:t,autoplay:e}){t?(this.media=t,this.isExternalMedia=!0):this.media=document.createElement("audio"),this.subscriptions.push(this.on("play",(()=>{this.hasPlayedOnce=!0}),{once:!0})),e&&(this.media.autoplay=!0)}on(t,e,i){return this.media.addEventListener(t,e,i),()=>this.media.removeEventListener(t,e)}destroy(){this.subscriptions.forEach((t=>{t()})),this.media.pause(),this.isExternalMedia||this.media.remove()}loadUrl(t){this.media.src=t}getCurrentTime(){return this.media.currentTime}play(){this.media.play()}pause(){this.media.pause()}isPlaying(){return this.media.currentTime>0&&!this.media.paused&&!this.media.ended}seekTo(t){!this.hasPlayedOnce&&navigator.userAgent.match(/(iPad|iPhone|iPod)/g)&&this.media.play()?.then?.((()=>{setTimeout((()=>this.media.pause()),10)})),this.media.currentTime=t}getDuration(){return this.media.duration}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}}({media:this.options.media,autoplay:this.options.autoplay}),this.renderer=new r({container:this.options.container,height:this.options.height,waveColor:this.options.waveColor,progressColor:this.options.progressColor,cursorColor:this.options.cursorColor,cursorWidth:this.options.cursorWidth,minPxPerSec:this.options.minPxPerSec,fillParent:this.options.fillParent,barWidth:this.options.barWidth,barGap:this.options.barGap,barRadius:this.options.barRadius,noScrollbar:this.options.noScrollbar}),this.initPlayerEvents(),this.initRendererEvents(),this.initTimerEvents(),this.initReadyEvent();const e=this.options.url||this.options.media?.src;e&&this.load(e,this.options.peaks,this.options.duration)}initPlayerEvents(){this.subscriptions.push(this.player.on("timeupdate",(()=>{const t=this.getCurrentTime();this.renderer.renderProgress(t/this.getDuration(),this.isPlaying()),this.emit("timeupdate",{currentTime:t})})),this.player.on("play",(()=>{this.emit("play"),this.timer.start()})),this.player.on("pause",(()=>{this.emit("pause"),this.timer.stop()})),this.player.on("canplay",(()=>{this.emit("canplay",{duration:this.getDuration()})})),this.player.on("seeking",(()=>{this.emit("seeking",{currentTime:this.getCurrentTime()})})))}initRendererEvents(){this.subscriptions.push(this.renderer.on("click",(({relativeX:t})=>{if(this.options.interactive){const e=this.getDuration()*t;this.seekTo(e),this.emit("seekClick",{currentTime:this.getCurrentTime()})}})))}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(){let t=!1,e=!1;const i=()=>{t&&e&&this.emit("ready",{duration:this.getDuration()})};this.subscriptions.push(this.on("decode",(()=>{t=!0,i()})),this.on("canplay",(()=>{e=!0,i()})),this.player.on("waiting",(()=>{e=!1,t=!1})))}async load(t,e,i){if(this.player.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.player.on("canplay",(()=>t(this.getDuration())),{once:!0})}))||0),this.decodedData={duration:i,numberOfChannels:e.length,sampleRate:e[0].length/i,getChannelData:t=>e[t]};this.renderer.render(this.decodedData),this.emit("decode",{duration:this.decodedData.duration})}zoom(t){if(!this.decodedData)throw new Error("No audio loaded");this.renderer.zoom(this.decodedData,t),this.emit("zoom",{minPxPerSec:t})}play(){this.player.play()}pause(){this.player.pause()}seekTo(t){this.player.seekTo(t)}isPlaying(){return this.player.isPlaying()}getDuration(){return this.player.getDuration()||this.decodedData?.duration||0}getCurrentTime(){return this.player.getCurrentTime()}getVolume(){return this.player.getVolume()}setVolume(t){this.player.setVolume(t)}getMuted(){return this.player.getMuted()}setMuted(t){this.player.setMuted(t)}getPlaybackRate(){return this.player.getPlaybackRate()}setPlaybackRate(t,e){this.player.setPlaybackRate(t,e)}registerPlugin(t,e){const i=new t({wavesurfer:this,container:this.renderer.getContainer(),wrapper:this.renderer.getWrapper()},e);return this.plugins.push(i),i.once("destroy",(()=>{this.plugins=this.plugins.filter((t=>t!==i))})),i}getDecodedData(){return this.decodedData}getMediaElement(){return this.player.getMediaElement()}toggleInteractive(t){this.options.interactive=t}destroy(){this.emit("destroy"),this.subscriptions.forEach((t=>t())),this.plugins.forEach((t=>t.destroy())),this.timer.destroy(),this.player.destroy(),this.decoder.destroy(),this.renderer.destroy()}}const h=a,l={height:50,overlayColor:"rgba(100, 100, 100, 0.1)"},d=class extends s{options;minimapWrapper;miniWavesurfer=null;overlay;constructor(t,e){super(t,e),this.options=Object.assign({},l,e),this.minimapWrapper=this.initMinimapWrapper(),this.overlay=this.initOverlay(),this.subscriptions.push(this.wavesurfer.on("decode",(()=>{this.initMinimap()})))}initMinimapWrapper(){const t=document.createElement("div");return t.style.position="relative",this.container.insertAdjacentElement("afterend",t),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(){const t=this.wavesurfer.getDecodedData(),e=this.wavesurfer.getMediaElement();if(!t||!e)return;this.miniWavesurfer=h.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.wavesurfer.on("timeupdate",(({currentTime:t})=>{const e=Math.max(0,Math.min(t/this.wavesurfer.getDuration()*100-i/2,100-i)).toFixed(2);this.overlay.style.left=`${e}%`}))}destroy(){this.miniWavesurfer?.destroy(),this.minimapWrapper.remove(),super.destroy()}};return e.default})()));