wavesurfer.js 7.0.0-alpha.22 → 7.0.0-alpha.24

package/dist/base-plugin.d.ts

@@ -1,12 +1,13 @@
 import EventEmitter, { type GeneralEventTypes } from './event-emitter.js';
-import WaveSurfer, { type WaveSurferPluginParams } from './index.js';
+import WaveSurfer, { type WaveSurferPluginParams } from './wavesurfer.js';
 export declare class BasePlugin<EventTypes extends GeneralEventTypes, Options> extends EventEmitter<EventTypes> {
-    protected wavesurfer: WaveSurfer;
-    protected container: HTMLElement;
-    protected wrapper: HTMLElement;
+    protected wavesurfer?: WaveSurfer;
+    protected container?: HTMLElement;
+    protected wrapper?: HTMLElement;
     protected subscriptions: (() => void)[];
     protected options: Options;
-    constructor(params: WaveSurferPluginParams, options: Options);
+    constructor(options: Options);
+    init(params: WaveSurferPluginParams): void;
     destroy(): void;
 }
 export default BasePlugin;

package/dist/base-plugin.js

@@ -5,12 +5,14 @@ export class BasePlugin extends EventEmitter {
     wrapper;
     subscriptions = [];
     options;
-    constructor(params, options) {
+    constructor(options) {
         super();
+        this.options = options;
+    }
+    init(params) {
         this.wavesurfer = params.wavesurfer;
         this.container = params.container;
         this.wrapper = params.wrapper;
-        this.options = options;
     }
     destroy() {
         this.subscriptions.forEach((unsubscribe) => unsubscribe());

package/dist/player.d.ts

@@ -1,27 +1,44 @@
-declare class Player {
+import EventEmitter, { type GeneralEventTypes } from './event-emitter.js';
+type PlayerOptions = {
+    media?: HTMLMediaElement;
+    autoplay?: boolean;
+    playbackRate?: number;
+};
+declare class Player<T extends GeneralEventTypes> extends EventEmitter<T> {
     protected media: HTMLMediaElement;
+    protected subscriptions: Array<() => void>;
     private isExternalMedia;
     private hasPlayedOnce;
-    private subscriptions;
-    constructor({ media, autoplay }: {
-        media?: HTMLMediaElement;
-        autoplay?: boolean;
-    });
-    on(event: keyof HTMLMediaElementEventMap, callback: () => void, options?: AddEventListenerOptions): () => void;
+    constructor(options: PlayerOptions);
+    protected onMediaEvent(event: keyof HTMLMediaElementEventMap, callback: () => void, options?: AddEventListenerOptions): () => void;
+    protected onceMediaEvent(event: keyof HTMLMediaElementEventMap, callback: () => void): () => void;
+    protected loadUrl(src: string): void;
     destroy(): void;
-    loadUrl(src: string): void;
-    getCurrentTime(): number;
+    /** Start playing the audio */
     play(): void;
+    /** Pause the audio */
     pause(): void;
+    /** Check if the audio is playing */
     isPlaying(): boolean;
+    /** Skip to a time position in seconds */
     seekTo(time: number): void;
+    /** Get the duration of the audio in seconds */
     getDuration(): number;
+    /** Get the current audio position in seconds */
+    getCurrentTime(): number;
+    /** Get the audio volume */
     getVolume(): number;
+    /** Set the audio volume */
     setVolume(volume: number): void;
+    /** Get the audio muted state */
     getMuted(): boolean;
+    /** Mute or unmute the audio */
     setMuted(muted: boolean): void;
+    /** Get the playback speed */
     getPlaybackRate(): number;
+    /** Set the playback speed, pass an optional false to NOT preserve the pitch */
     setPlaybackRate(rate: number, preservePitch?: boolean): void;
+    /** Get the HTML media element */
     getMediaElement(): HTMLMediaElement;
 }
 export default Player;

package/dist/player.js

@@ -1,11 +1,13 @@
-class Player {
+import EventEmitter from './event-emitter.js';
+class Player extends EventEmitter {
     media;
+    subscriptions = [];
     isExternalMedia = false;
     hasPlayedOnce = false;
-    subscriptions = [];
-    constructor({ media, autoplay }) {
-        if (media) {
-            this.media = media;
+    constructor(options) {
+        super();
+        if (options.media) {
+            this.media = options.media;
             this.isExternalMedia = true;
         }
         else {
@@ -13,42 +15,48 @@ class Player {
         }
         this.subscriptions.push(
         // Track the first play() call
-        this.on('play', () => {
+        this.onceMediaEvent('play', () => {
             this.hasPlayedOnce = true;
-        }, { once: true }));
+        }));
         // Autoplay
-        if (autoplay) {
+        if (options.autoplay) {
             this.media.autoplay = true;
         }
+        // Speed
+        if (options.playbackRate != null) {
+            this.media.playbackRate = options.playbackRate;
+        }
     }
-    on(event, callback, options) {
+    onMediaEvent(event, callback, options) {
         this.media.addEventListener(event, callback, options);
         return () => this.media.removeEventListener(event, callback);
     }
+    onceMediaEvent(event, callback) {
+        return this.onMediaEvent(event, callback, { once: true });
+    }
+    loadUrl(src) {
+        this.media.src = src;
+    }
     destroy() {
-        this.subscriptions.forEach((unsubscribe) => {
-            unsubscribe();
-        });
         this.media.pause();
+        this.subscriptions.forEach((unsubscribe) => unsubscribe());
         if (!this.isExternalMedia) {
             this.media.remove();
         }
     }
-    loadUrl(src) {
-        this.media.src = src;
-    }
-    getCurrentTime() {
-        return this.media.currentTime;
-    }
+    /** Start playing the audio */
     play() {
         this.media.play();
     }
+    /** Pause the audio */
     pause() {
         this.media.pause();
     }
+    /** Check if the audio is playing */
     isPlaying() {
         return this.media.currentTime > 0 && !this.media.paused && !this.media.ended;
     }
+    /** Skip to a time position in seconds */
     seekTo(time) {
         // iOS Safari requires a play() call before seeking
         if (!this.hasPlayedOnce && navigator.userAgent.match(/(iPad|iPhone|iPod)/g)) {
@@ -58,24 +66,35 @@ class Player {
         }
         this.media.currentTime = time;
     }
+    /** Get the duration of the audio in seconds */
     getDuration() {
         return this.media.duration;
     }
+    /** Get the current audio position in seconds */
+    getCurrentTime() {
+        return this.media.currentTime;
+    }
+    /** Get the audio volume */
     getVolume() {
         return this.media.volume;
     }
+    /** Set the audio volume */
     setVolume(volume) {
         this.media.volume = volume;
     }
+    /** Get the audio muted state */
     getMuted() {
         return this.media.muted;
     }
+    /** Mute or unmute the audio */
     setMuted(muted) {
         this.media.muted = muted;
     }
+    /** Get the playback speed */
     getPlaybackRate() {
         return this.media.playbackRate;
     }
+    /** Set the playback speed, pass an optional false to NOT preserve the pitch */
     setPlaybackRate(rate, preservePitch) {
         // preservePitch is true by default in most browsers
         if (preservePitch != null) {
@@ -83,6 +102,7 @@ class Player {
         }
         this.media.playbackRate = rate;
     }
+    /** Get the HTML media element */
     getMediaElement() {
         return this.media;
     }

package/dist/plugins/envelope.d.ts

@@ -1,5 +1,5 @@
 import BasePlugin from '../base-plugin.js';
-import type { WaveSurferPluginParams } from '../index.js';
+import type { WaveSurferPluginParams } from '../wavesurfer.js';
 export type EnvelopePluginOptions = {
     startTime?: number;
     endTime?: number;
@@ -42,7 +42,9 @@ declare class EnvelopePlugin extends BasePlugin<EnvelopePluginEvents, EnvelopePl
     private volume;
     private isFadingIn;
     private isFadingOut;
-    constructor(params: WaveSurferPluginParams, options: EnvelopePluginOptions);
+    constructor(options: EnvelopePluginOptions);
+    static create(options: EnvelopePluginOptions): EnvelopePlugin;
+    init(params: WaveSurferPluginParams): void;
     private makeDraggable;
     private renderPolyline;
     private initSvg;

package/dist/plugins/envelope.js

@@ -18,13 +18,22 @@ class EnvelopePlugin extends BasePlugin {
     volume = 1;
     isFadingIn = false;
     isFadingOut = false;
-    constructor(params, options) {
-        super(params, options);
+    constructor(options) {
+        super(options);
         this.options = Object.assign({}, defaultOptions, options);
         this.options.lineColor = this.options.lineColor || defaultOptions.lineColor;
         this.options.dragPointFill = this.options.dragPointFill || defaultOptions.dragPointFill;
         this.options.dragPointStroke = this.options.dragPointStroke || defaultOptions.dragPointStroke;
         this.volume = this.options.volume ?? 1;
+    }
+    static create(options) {
+        return new EnvelopePlugin(options);
+    }
+    init(params) {
+        super.init(params);
+        if (!this.wavesurfer) {
+            throw Error('WaveSurfer is not initialized');
+        }
         this.subscriptions.push(this.wavesurfer.once('decode', ({ duration }) => {
             this.options.startTime = this.options.startTime || 0;
             this.options.endTime = this.options.endTime || duration;
@@ -48,10 +57,10 @@ class EnvelopePlugin extends BasePlugin {
         draggable.addEventListener('mousedown', (e) => {
             let x = e.clientX;
             let y = e.clientY;
-            const wasInteractive = this.wavesurfer.options.interactive;
+            const wasInteractive = this.wavesurfer?.options.interact || true;
             let delay;
             // Make the wavesurfer ignore clicks when we're dragging
-            this.wavesurfer.toggleInteractive(false);
+            this.wavesurfer?.toggleInteractive(false);
             const move = (e) => {
                 const dx = e.clientX - x;
                 const dy = e.clientY - y;
@@ -66,7 +75,7 @@ class EnvelopePlugin extends BasePlugin {
                 if (delay)
                     clearTimeout(delay);
                 delay = setTimeout(() => {
-                    this.wavesurfer.toggleInteractive(wasInteractive);
+                    this.wavesurfer?.toggleInteractive(wasInteractive);
                 }, 100);
             };
             document.addEventListener('mousemove', move);
@@ -76,7 +85,7 @@ class EnvelopePlugin extends BasePlugin {
         });
     }
     renderPolyline() {
-        if (!this.svg)
+        if (!this.svg || !this.wrapper || !this.wavesurfer)
             return;
         const polyline = this.svg.querySelector('polyline');
         const points = polyline.points;
@@ -99,6 +108,8 @@ class EnvelopePlugin extends BasePlugin {
         }
     }
     initSvg() {
+        if (!this.wrapper || !this.wavesurfer)
+            return;
         const width = this.wrapper.clientWidth;
         const height = this.wrapper.clientHeight;
         const duration = this.wavesurfer.getDuration();
@@ -180,7 +191,7 @@ class EnvelopePlugin extends BasePlugin {
                 this.emit('fade-out-change', { time: newTime });
             }
             // Also allow dragging points vertically
-            if (dy > 1) {
+            if (dy > 1 || dy < -1) {
                 onDragY(dy);
             }
             else {
@@ -201,7 +212,7 @@ class EnvelopePlugin extends BasePlugin {
         super.destroy();
     }
     initWebAudio() {
-        const audio = this.wavesurfer.getMediaElement();
+        const audio = this.wavesurfer?.getMediaElement();
         if (!audio)
             return null;
         this.volume = this.options.volume ?? audio.volume;
@@ -233,12 +244,12 @@ class EnvelopePlugin extends BasePlugin {
         this.gainNode.gain.value = volume;
     }
     initFadeEffects() {
-        if (!this.audioContext)
+        if (!this.audioContext || !this.wavesurfer)
             return;
         const unsub = this.wavesurfer.on('timeupdate', ({ currentTime }) => {
             if (!this.audioContext || !this.gainNode)
                 return;
-            if (!this.wavesurfer.isPlaying())
+            if (!this.wavesurfer?.isPlaying())
                 return;
             if (this.audioContext.state === 'suspended') {
                 this.audioContext.resume();
@@ -281,7 +292,6 @@ class EnvelopePlugin extends BasePlugin {
     }
     setStartTime(time) {
         this.options.startTime = time;
-        console.log(time);
         this.renderPolyline();
     }
     setEndTime(time) {

package/dist/plugins/envelope.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.Envelope=e():t.Envelope=e()}(WaveSurfer,(()=>(()=>{"use strict";var t={284:(t,e,i)=>{i.d(e,{Z:()=>o});var s=i(139);class n extends s.Z{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()))}}const o=n},139:(t,e,i)=>{i.d(e,{Z:()=>s});const s=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)},n=String(t);return this.eventTarget.addEventListener(n,s,{once:i}),()=>this.eventTarget.removeEventListener(n,s)}once(t,e){return this.on(t,e,!0)}}}},e={};function i(s){var n=e[s];if(void 0!==n)return n.exports;var o=e[s]={exports:{}};return t[s](o,o.exports,i),o.exports}i.d=(t,e)=>{for(var s in e)i.o(e,s)&&!i.o(t,s)&&Object.defineProperty(t,s,{enumerable:!0,get:e[s]})},i.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e);var s={};return(()=>{i.d(s,{default:()=>o});var t=i(284);const e={startTime:0,endTime:0,fadeInEnd:0,fadeOutStart:0,lineWidth:4,lineColor:"rgba(0, 0, 255, 0.5)",dragPointSize:10,dragPointFill:"rgba(255, 255, 255, 0.8)",dragPointStroke:"rgba(255, 255, 255, 0.8)"};class n extends t.Z{options;svg=null;audioContext=null;gainNode=null;volume=1;isFadingIn=!1;isFadingOut=!1;constructor(t){super(t),this.options=Object.assign({},e,t),this.options.lineColor=this.options.lineColor||e.lineColor,this.options.dragPointFill=this.options.dragPointFill||e.dragPointFill,this.options.dragPointStroke=this.options.dragPointStroke||e.dragPointStroke,this.volume=this.options.volume??1}static create(t){return new n(t)}init(t){if(super.init(t),!this.wavesurfer)throw Error("WaveSurfer is not initialized");let e;this.subscriptions.push(this.wavesurfer.once("decode",(({duration:t})=>{this.options.startTime=this.options.startTime||0,this.options.endTime=this.options.endTime||t,this.options.fadeInEnd=this.options.fadeInEnd||this.options.startTime,this.options.fadeOutStart=this.options.fadeOutStart||this.options.endTime,this.initWebAudio(),this.initSvg(),this.initFadeEffects()}))),this.subscriptions.push(this.wavesurfer.on("zoom",(()=>{e&&clearTimeout(e),e=setTimeout((()=>{this.svg?.remove(),this.initSvg()}),100)})))}makeDraggable(t,e){t.addEventListener("mousedown",(t=>{let i=t.clientX,s=t.clientY;const n=this.wavesurfer?.options.interact||!0;let o;this.wavesurfer?.toggleInteractive(!1);const r=t=>{const n=t.clientX-i,o=t.clientY-s;i=t.clientX,s=t.clientY,e(n,o)},a=()=>{document.removeEventListener("mousemove",r),document.removeEventListener("mouseup",a),o&&clearTimeout(o),o=setTimeout((()=>{this.wavesurfer?.toggleInteractive(n)}),100)};document.addEventListener("mousemove",r),document.addEventListener("mouseup",a),t.preventDefault(),t.stopPropagation()}))}renderPolyline(){if(!this.svg||!this.wrapper||!this.wavesurfer)return;const t=this.svg.querySelector("polyline"),e=t.points,i=e.getItem(1).y,s=this.wrapper.clientWidth,n=this.wavesurfer.getDuration();e.getItem(0).x=this.options.startTime/n*s,e.getItem(3).x=this.options.endTime/n*s;const o=this.svg.querySelector("line");o.setAttribute("x1",e.getItem(1).x.toString()),o.setAttribute("x2",e.getItem(2).x.toString()),o.setAttribute("y1",i.toString()),o.setAttribute("y2",i.toString());const r=this.svg.querySelectorAll("circle");for(let e=0;e<r.length;e++){const s=r[e],n=t.points.getItem(e+1);s.setAttribute("cx",n.x.toString()),s.setAttribute("cy",i.toString())}}initSvg(){if(!this.wrapper||!this.wavesurfer)return;const t=this.wrapper.clientWidth,e=this.wrapper.clientHeight,i=this.wavesurfer.getDuration(),s=document.createElementNS("http://www.w3.org/2000/svg","svg");s.setAttribute("width","100%"),s.setAttribute("height","100%"),s.setAttribute("viewBox",`0 0 ${t} ${e}`),s.setAttribute("preserveAspectRatio","none"),s.setAttribute("style","position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none;"),this.svg=s;const n=document.createElementNS("http://www.w3.org/2000/svg","polyline");n.setAttribute("points","0,0 0,0 0,0 0,0"),n.setAttribute("stroke",this.options.lineColor),n.setAttribute("stroke-width",this.options.lineWidth),n.setAttribute("fill","none"),n.setAttribute("style","pointer-events: none"),s.appendChild(n);const o=document.createElementNS("http://www.w3.org/2000/svg","line");o.setAttribute("stroke","none"),o.setAttribute("stroke-width",(3*this.options.lineWidth).toString()),o.setAttribute("style","cursor: ns-resize; pointer-events: all;"),s.appendChild(o);const r=n.points,a=this.options.dragPointSize/2,u=e-this.volume*e+a;r.getItem(0).x=this.options.startTime/i*t,r.getItem(0).y=e,r.getItem(1).x=this.options.fadeInEnd/i*t,r.getItem(1).y=u,r.getItem(2).x=this.options.fadeOutStart/i*t,r.getItem(2).y=u,r.getItem(3).x=this.options.endTime/i*t,r.getItem(3).y=e,[1,2].forEach((()=>{const t=document.createElementNS("http://www.w3.org/2000/svg","circle");t.setAttribute("r",(this.options.dragPointSize/2).toString()),t.setAttribute("fill",this.options.dragPointFill),t.setAttribute("stroke",this.options.dragPointStroke||this.options.dragPointFill),t.setAttribute("stroke-width","2"),t.setAttribute("style","cursor: ew-resize; pointer-events: all;"),s.appendChild(t)})),this.wrapper.appendChild(s),this.renderPolyline();const h=t=>{const i=r.getItem(1).y+t-a;if(i<-.5||i>e)return;r.getItem(1).y=i+a,r.getItem(2).y=i+a,this.renderPolyline();const s=Math.min(1,Math.max(0,(e-i)/e));this.onVolumeChange(s),this.renderPolyline()},d=(e,s,o)=>{const r=n.points.getItem(o),a=r.x+e,u=a/t*i;1===o&&u>this.options.fadeOutStart||u<this.options.startTime||2===o&&u<this.options.fadeInEnd||u>this.options.endTime||(r.x=a,1===o?(this.options.fadeInEnd=u,this.emit("fade-in-change",{time:u})):2===o&&(this.options.fadeOutStart=u,this.emit("fade-out-change",{time:u})),s>1||s<-1?h(s):this.renderPolyline())};this.makeDraggable(o,((t,e)=>h(e)));const l=s.querySelectorAll("circle");for(let t=0;t<l.length;t++){const e=t+1;this.makeDraggable(l[t],((t,i)=>d(t,i,e)))}}destroy(){this.svg?.remove(),super.destroy()}initWebAudio(){const t=this.wavesurfer?.getMediaElement();if(!t)return null;this.volume=this.options.volume??t.volume;const e=new window.AudioContext;this.gainNode=e.createGain(),this.gainNode.gain.value=this.volume,e.createMediaElementSource(t).connect(this.gainNode),this.gainNode.connect(e.destination),this.audioContext=e}naturalVolume(t){return 1e-4+.9999*Math.pow(t,3)}onVolumeChange(t){t=this.naturalVolume(t),this.volume=t,this.emit("volume-change",{volume:t}),this.gainNode&&(this.gainNode.gain.value=t)}initFadeEffects(){if(!this.audioContext||!this.wavesurfer)return;const t=this.wavesurfer.on("timeupdate",(({currentTime:t})=>{if(!this.audioContext||!this.gainNode)return;if(!this.wavesurfer?.isPlaying())return;if("suspended"===this.audioContext.state&&this.audioContext.resume(),!this.isFadingIn&&t>=this.options.startTime&&t<=this.options.fadeInEnd)return this.isFadingIn=!0,this.gainNode.gain.setValueAtTime(0,this.audioContext.currentTime),void this.gainNode.gain.linearRampToValueAtTime(this.volume,this.audioContext.currentTime+(this.options.fadeInEnd-t));if(!this.isFadingOut&&t>=this.options.fadeOutStart&&t<=this.options.endTime)return this.isFadingOut=!0,void this.gainNode.gain.linearRampToValueAtTime(0,this.audioContext.currentTime+(this.options.endTime-t));let e=!1;this.isFadingIn&&(t<this.options.startTime||t>this.options.fadeInEnd)&&(this.isFadingIn=!1,e=!0),this.isFadingOut&&(t<this.options.fadeOutStart||t>=this.options.endTime)&&(this.isFadingOut=!1,e=!0),e&&(this.gainNode.gain.cancelScheduledValues(this.audioContext.currentTime),this.gainNode.gain.value=this.volume)}));this.subscriptions.push(t)}getCurrentVolume(){return this.gainNode?this.gainNode.gain.value:this.volume}setStartTime(t){this.options.startTime=t,this.renderPolyline()}setEndTime(t){this.options.endTime=t,this.renderPolyline()}}const o=n})(),s.default})()));

package/dist/plugins/minimap.d.ts

@@ -1,5 +1,5 @@
 import BasePlugin from '../base-plugin.js';
-import { type WaveSurferPluginParams, type WaveSurferOptions } from '../index.js';
+import { type WaveSurferPluginParams, type WaveSurferOptions } from '../wavesurfer.js';
 export type MinimapPluginOptions = {
     overlayColor?: string;
 } & WaveSurferOptions;
@@ -10,16 +10,18 @@ declare const defaultOptions: {
 export type MinimapPluginEvents = {
     ready: void;
 };
-declare class TimelinePlugin extends BasePlugin<MinimapPluginEvents, MinimapPluginOptions> {
+declare class MinimapPlugin extends BasePlugin<MinimapPluginEvents, MinimapPluginOptions> {
     protected options: MinimapPluginOptions & typeof defaultOptions;
     private minimapWrapper;
     private miniWavesurfer;
     private overlay;
-    constructor(params: WaveSurferPluginParams, options: MinimapPluginOptions);
+    constructor(options: MinimapPluginOptions);
+    static create(options: MinimapPluginOptions): MinimapPlugin;
+    init(params: WaveSurferPluginParams): void;
     private initMinimapWrapper;
     private initOverlay;
     private initMinimap;
     /** Unmount */
     destroy(): void;
 }
-export default TimelinePlugin;
+export default MinimapPlugin;

package/dist/plugins/minimap.js

@@ -1,19 +1,29 @@
 import BasePlugin from '../base-plugin.js';
-import WaveSurfer from '../index.js';
+import WaveSurfer from '../wavesurfer.js';
 const defaultOptions = {
     height: 50,
     overlayColor: 'rgba(100, 100, 100, 0.1)',
 };
-class TimelinePlugin extends BasePlugin {
+class MinimapPlugin extends BasePlugin {
     options;
     minimapWrapper;
     miniWavesurfer = null;
     overlay;
-    constructor(params, options) {
-        super(params, options);
+    constructor(options) {
+        super(options);
         this.options = Object.assign({}, defaultOptions, options);
         this.minimapWrapper = this.initMinimapWrapper();
         this.overlay = this.initOverlay();
+    }
+    static create(options) {
+        return new MinimapPlugin(options);
+    }
+    init(params) {
+        super.init(params);
+        if (!this.wavesurfer) {
+            throw Error('WaveSurfer is not initialized');
+        }
+        this.container?.insertAdjacentElement('afterend', this.minimapWrapper);
         this.subscriptions.push(this.wavesurfer.on('decode', () => {
             this.initMinimap();
         }));
@@ -21,7 +31,6 @@ class TimelinePlugin extends BasePlugin {
     initMinimapWrapper() {
         const div = document.createElement('div');
         div.style.position = 'relative';
-        this.container.insertAdjacentElement('afterend', div);
         return div;
     }
     initOverlay() {
@@ -32,6 +41,8 @@ class TimelinePlugin extends BasePlugin {
         return div;
     }
     initMinimap() {
+        if (!this.wavesurfer || !this.wrapper)
+            return;
         const data = this.wavesurfer.getDecodedData();
         const media = this.wavesurfer.getMediaElement();
         if (!data || !media)
@@ -49,7 +60,7 @@ class TimelinePlugin extends BasePlugin {
         const overlayWidth = Math.round((this.minimapWrapper.clientWidth / this.wrapper.clientWidth) * 100);
         this.overlay.style.width = `${overlayWidth}%`;
         this.wavesurfer.on('timeupdate', ({ currentTime }) => {
-            const offset = Math.max(0, Math.min((currentTime / this.wavesurfer.getDuration()) * 100 - overlayWidth / 2, 100 - overlayWidth)).toFixed(2);
+            const offset = Math.max(0, Math.min((currentTime / data.duration) * 100 - overlayWidth / 2, 100 - overlayWidth)).toFixed(2);
             this.overlay.style.left = `${offset}%`;
         });
     }
@@ -60,4 +71,4 @@ class TimelinePlugin extends BasePlugin {
         super.destroy();
     }
 }
-export default TimelinePlugin;
+export default MinimapPlugin;

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;container;scrollContainer;wrapper;canvasWrapper;progressWrapper;timeout=null;isScrolling=!1;audioData=null;resizeObserver=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.hideScrollbar?"scrollbar-color: transparent;":""}\n        }\n        :host ::-webkit-scrollbar {\n          display: ${this.options.hideScrollbar?"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})})),this.resizeObserver=new ResizeObserver((()=>{this.delay((()=>this.audioData&&this.zoom(this.audioData,this.options.minPxPerSec)),100)})),this.resizeObserver.observe(this.scrollContainer)}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,d=Math.floor(e/(r+n))/h,l=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.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)*d);if(i>c){const t=Math.round(m*l),e=Math.round(g*l);y.roundRect(c*(r+n),l-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});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){const e=window.devicePixelRatio||1,i=this.options.fillParent?this.scrollContainer.clientWidth*e:0,s=Math.max(1,t.duration*this.options.minPxPerSec),r=s>i?s:i,{height:n}=this.options;this.isScrolling=r>i,this.scrollContainer.style.overflowX=this.isScrolling?"auto":"hidden",this.wrapper.style.width=`${Math.floor(r/e)}px`;const o=[t.getChannelData(0)];t.numberOfChannels>1&&o.push(t.getChannelData(1)),this.renderPeaks(o,r,n,e),this.audioData=t}zoom(t,e){const i=this.progressWrapper.clientWidth;this.options.minPxPerSec=e,this.render(t);const s=this.progressWrapper.clientWidth;this.scrollContainer.scrollLeft+=s-i}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{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(){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}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}},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,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,hideScrollbar:this.options.hideScrollbar}),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)}initPlayerEvents(){this.subscriptions.push(this.onMediaEvent("timeupdate",(()=>{const t=this.getCurrentTime();this.renderer.renderProgress(t/this.getDuration(),this.options.autoCenter&&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.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})=>{if(this.options.interact){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(){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.once("destroy",(()=>{this.plugins=this.plugins.filter((e=>e!==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),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})}getDecodedData(){return this.decodedData}getDuration(){return this.decodedData?.duration||this.getMediaElement()?.duration||0}toggleInteractive(t){this.options.interact=t}destroy(){this.emit("destroy"),this.plugins.forEach((t=>t.destroy())),this.timer.destroy(),this.decoder.destroy(),this.renderer.destroy(),super.destroy()}}const d=h,l={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({},l,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=d.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:e})=>{const s=Math.max(0,Math.min(e/t.duration*100-i/2,100-i)).toFixed(2);this.overlay.style.left=`${s}%`}))}destroy(){this.miniWavesurfer?.destroy(),this.minimapWrapper.remove(),super.destroy()}}const p=c;return e.default})()));

package/dist/plugins/multitrack.d.ts

@@ -1,4 +1,4 @@
-import { type WaveSurferOptions } from '../index.js';
+import { type WaveSurferOptions } from '../wavesurfer.js';
 import { type EnvelopePluginOptions } from './envelope.js';
 import EventEmitter from '../event-emitter.js';
 export type TrackId = string | number;
@@ -95,7 +95,6 @@ declare class MultiTrack extends EventEmitter<MultitrackEvents> {
     private updatePosition;
     private setIsDragging;
     private onDrag;
-    private onMove;
     private findCurrentTracks;
     private startSync;
     play(): void;

package/dist/plugins/multitrack.js

@@ -1,4 +1,4 @@
-import WaveSurfer from '../index.js';
+import WaveSurfer from '../wavesurfer.js';
 import RegionsPlugin from './regions.js';
 import TimelinePlugin from './timeline.js';
 import EnvelopePlugin from './envelope.js';
@@ -39,6 +39,11 @@ class MultiTrack extends EventEmitter {
                 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.maxDuration);
+            });
             this.emit('canplay');
         });
     }
@@ -48,11 +53,6 @@ class MultiTrack extends EventEmitter {
             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);
@@ -77,14 +77,14 @@ class MultiTrack extends EventEmitter {
             peaks: track.peaks,
             cursorColor: 'transparent',
             cursorWidth: 0,
-            interactive: false,
+            interact: false,
         });
         // Regions and markers
-        const wsRegions = ws.registerPlugin(RegionsPlugin, {
+        const wsRegions = ws.registerPlugin(RegionsPlugin.create({
             draggable: false,
             resizable: true,
             dragSelection: false,
-        });
+        }));
         this.subscriptions.push(ws.once('decode', () => {
             // Start and end cues
             if (track.startCue != null || track.endCue != null) {
@@ -133,14 +133,14 @@ class MultiTrack extends EventEmitter {
             }
         }));
         // Envelope
-        const envelope = ws.registerPlugin(EnvelopePlugin, {
+        const envelope = ws.registerPlugin(EnvelopePlugin.create({
             ...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 });
@@ -171,10 +171,10 @@ class MultiTrack extends EventEmitter {
     initTimeline() {
         if (this.timeline)
             this.timeline.destroy();
-        this.timeline = this.wavesurfers[0].registerPlugin(TimelinePlugin, {
+        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;
@@ -214,19 +214,17 @@ class MultiTrack extends EventEmitter {
     }
     onDrag(index, delta) {
         this.setIsDragging();
-        const newTime = this.tracks[index].startPosition + delta * this.maxDuration;
-        this.onMove(index, newTime);
-    }
-    onMove(index, newStartPosition) {
         const track = this.tracks[index];
         if (!track.draggable)
             return;
+        const 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 });