wavesurfer.js 7.0.0-beta.9 → 7.0.0

package/dist/plugins/plugins/record.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Record audio from the microphone, render a waveform and download the audio.
+ */
+import BasePlugin, { type BasePluginEvents } from '../base-plugin.js';
+export type RecordPluginOptions = {
+    mimeType?: MediaRecorderOptions['mimeType'];
+    audioBitsPerSecond?: MediaRecorderOptions['audioBitsPerSecond'];
+};
+export type RecordPluginEvents = BasePluginEvents & {
+    startRecording: [];
+    stopRecording: [];
+};
+declare class RecordPlugin extends BasePlugin<RecordPluginEvents, RecordPluginOptions> {
+    private mediaRecorder;
+    private recordedUrl;
+    private savedCursorWidth;
+    private savedInteractive;
+    static create(options?: RecordPluginOptions): RecordPlugin;
+    private preventInteraction;
+    private restoreInteraction;
+    onInit(): void;
+    private loadBlob;
+    render(stream: MediaStream): () => void;
+    private cleanUp;
+    startRecording(): Promise<void>;
+    isRecording(): boolean;
+    stopRecording(): void;
+    getRecordedUrl(): string;
+    destroy(): void;
+}
+export default RecordPlugin;

package/dist/plugins/plugins/regions.d.ts

@@ -0,0 +1,115 @@
+/**
+ * Regions are visual overlays on the waveform that can be used to mark segments of audio.
+ * Regions can be clicked on, dragged and resized.
+ * You can set the color and content of each region, as well as their HTML content.
+ */
+import BasePlugin, { type BasePluginEvents } from '../base-plugin.js';
+import EventEmitter from '../event-emitter.js';
+export type RegionsPluginOptions = undefined;
+export type RegionsPluginEvents = BasePluginEvents & {
+    'region-created': [region: Region];
+    'region-updated': [region: Region];
+    'region-clicked': [region: Region, e: MouseEvent];
+    'region-double-clicked': [region: Region, e: MouseEvent];
+};
+export type RegionEvents = {
+    /** Before the region is removed */
+    remove: [];
+    /** When the region's parameters are being updated */
+    update: [];
+    /** When dragging or resizing is finished */
+    'update-end': [];
+    /** On play */
+    play: [];
+    /** On mouse click */
+    click: [event: MouseEvent];
+    /** Double click */
+    dblclick: [event: MouseEvent];
+    /** Mouse over */
+    over: [event: MouseEvent];
+    /** Mouse leave */
+    leave: [event: MouseEvent];
+};
+export type RegionParams = {
+    /** The id of the region, any string */
+    id?: string;
+    /** The start position of the region (in seconds) */
+    start: number;
+    /** The end position of the region (in seconds) */
+    end?: number;
+    /** Allow/dissallow dragging the region */
+    drag?: boolean;
+    /** Allow/dissallow resizing the region */
+    resize?: boolean;
+    /** The color of the region (CSS color) */
+    color?: string;
+    /** Content string or HTML element */
+    content?: string | HTMLElement;
+    /** Min length when resizing (in seconds) */
+    minLength?: number;
+    /** Max length when resizing (in seconds) */
+    maxLength?: number;
+};
+declare class Region extends EventEmitter<RegionEvents> {
+    private totalDuration;
+    element: HTMLElement;
+    id: string;
+    start: number;
+    end: number;
+    drag: boolean;
+    resize: boolean;
+    color: string;
+    content?: HTMLElement;
+    minLength: number;
+    maxLength: number;
+    constructor(params: RegionParams, totalDuration: number);
+    private initElement;
+    private renderPosition;
+    private initMouseEvents;
+    private onStartMoving;
+    private onEndMoving;
+    _onUpdate(dx: number, side?: 'start' | 'end'): void;
+    private onMove;
+    private onResize;
+    private onEndResizing;
+    _setTotalDuration(totalDuration: number): void;
+    /** Play the region from start to end */
+    play(): void;
+    /** Update the region's options */
+    setOptions(options: {
+        color?: string;
+        drag?: boolean;
+        resize?: boolean;
+        start?: number;
+        end?: number;
+    }): void;
+    /** Remove the region */
+    remove(): void;
+}
+declare class RegionsPlugin extends BasePlugin<RegionsPluginEvents, RegionsPluginOptions> {
+    private regions;
+    private regionsContainer;
+    /** Create an instance of RegionsPlugin */
+    constructor(options?: RegionsPluginOptions);
+    /** Create an instance of RegionsPlugin */
+    static create(options?: RegionsPluginOptions): RegionsPlugin;
+    /** Called by wavesurfer, don't call manually */
+    onInit(): void;
+    private initRegionsContainer;
+    /** Get all created regions */
+    getRegions(): Region[];
+    private avoidOverlapping;
+    private saveRegion;
+    /** Create a region with given parameters */
+    addRegion(options: RegionParams): Region;
+    /**
+     * Enable creation of regions by dragging on an empty space on the waveform.
+     * Returns a function to disable the drag selection.
+     */
+    enableDragSelection(options: Omit<RegionParams, 'start' | 'end'>): () => void;
+    /** Remove all regions */
+    clearRegions(): void;
+    /** Destroy the plugin and clean up */
+    destroy(): void;
+}
+export default RegionsPlugin;

package/dist/plugins/plugins/spectrogram.d.ts

@@ -0,0 +1,76 @@
+/**
+ * Spectrogram plugin
+ *
+ * Render a spectrogram visualisation of the audio.
+ *
+ * @author Pavel Denisov (https://github.com/akreal)
+ * @see https://github.com/wavesurfer-js/wavesurfer.js/pull/337
+ *
+ * @example
+ * // ... initialising wavesurfer with the plugin
+ * var wavesurfer = WaveSurfer.create({
+ *   // wavesurfer options ...
+ *   plugins: [
+ *     SpectrogramPlugin.create({
+ *       // plugin options ...
+ *     })
+ *   ]
+ * });
+ */
+/**
+ * Spectrogram plugin for wavesurfer.
+ */
+import BasePlugin, { type BasePluginEvents } from '../base-plugin.js';
+export type SpectrogramPluginOptions = {
+    /** Selector of element or element in which to render */
+    container: string | HTMLElement;
+    /** Number of samples to fetch to FFT. Must be a power of 2. */
+    fftSamples?: number;
+    /** Height of the spectrogram view in CSS pixels */
+    height?: number;
+    /** Set to true to display frequency labels. */
+    labels?: boolean;
+    labelsBackground?: string;
+    labelsColor?: string;
+    labelsHzColor?: string;
+    /** Size of the overlapping window. Must be < fftSamples. Auto deduced from canvas size by default. */
+    noverlap?: number;
+    /** The window function to be used. */
+    windowFunc?: 'bartlett' | 'bartlettHann' | 'blackman' | 'cosine' | 'gauss' | 'hamming' | 'hann' | 'lanczoz' | 'rectangular' | 'triangular';
+    /** Some window functions have this extra value. (Between 0 and 1) */
+    alpha?: number;
+    /** Min frequency to scale spectrogram. */
+    frequencyMin?: number;
+    /** Max frequency to scale spectrogram. Set this to samplerate/2 to draw whole range of spectrogram. */
+    frequencyMax?: number;
+    /**
+     * A 256 long array of 4-element arrays. Each entry should contain a float between 0 and 1 and specify r, g, b, and alpha.
+     * Each entry should contain a float between 0 and 1 and specify r, g, b, and alpha.
+     */
+    colorMap?: number[][];
+};
+export type SpectrogramPluginEvents = BasePluginEvents & {
+    ready: [];
+    click: [relativeX: number];
+};
+declare class SpectrogramPlugin extends BasePlugin<SpectrogramPluginEvents, SpectrogramPluginOptions> {
+    static create(options?: SpectrogramPluginOptions): SpectrogramPlugin;
+    utils: {
+        style: (el: HTMLElement, styles: Record<string, string>) => CSSStyleDeclaration & Record<string, string>;
+    };
+    constructor(options: SpectrogramPluginOptions);
+    onInit(): void;
+    destroy(): void;
+    createWrapper(): void;
+    _wrapperClickHandler(event: any): void;
+    createCanvas(): void;
+    render(): void;
+    drawSpectrogram: (frequenciesData: any) => void;
+    getFrequencies(callback: any): void;
+    loadFrequenciesData(url: any): Promise<void>;
+    freqType(freq: any): string | number;
+    unitType(freq: any): "KHz" | "Hz";
+    loadLabels(bgFill: any, fontSizeFreq: any, fontSizeUnit: any, fontType: any, textColorFreq: any, textColorUnit: any, textAlign: any, container: any): void;
+    resample(oldMatrix: any): Uint8Array[];
+}
+export default SpectrogramPlugin;

package/dist/plugins/plugins/timeline.d.ts

@@ -0,0 +1,47 @@
+/**
+ * The Timeline plugin adds timestamps and notches under the waveform.
+ */
+import BasePlugin, { type BasePluginEvents } from '../base-plugin.js';
+export type TimelinePluginOptions = {
+    /** The height of the timeline in pixels, defaults to 20 */
+    height?: number;
+    /** HTML container for the timeline, defaults to wavesufer's container */
+    container?: HTMLElement;
+    /** Pass 'beforebegin' to insert the timeline on top of the waveform */
+    insertPosition?: InsertPosition;
+    /** The duration of the timeline in seconds, defaults to wavesurfer's duration */
+    duration?: number;
+    /** Interval between ticks in seconds */
+    timeInterval?: number;
+    /** Interval between numeric labels */
+    primaryLabelInterval?: number;
+    /** Interval between secondary numeric labels */
+    secondaryLabelInterval?: number;
+    /** Custom inline style to apply to the container */
+    style?: Partial<CSSStyleDeclaration> | string;
+    /** Turn the time into a suitable label for the time. */
+    formatTimeCallback?: (seconds: number) => string;
+};
+declare const defaultOptions: {
+    height: number;
+    formatTimeCallback: (seconds: number) => string;
+};
+export type TimelinePluginEvents = BasePluginEvents & {
+    ready: [];
+};
+declare class TimelinePlugin extends BasePlugin<TimelinePluginEvents, TimelinePluginOptions> {
+    private timelineWrapper;
+    protected options: TimelinePluginOptions & typeof defaultOptions;
+    constructor(options?: TimelinePluginOptions);
+    static create(options?: TimelinePluginOptions): TimelinePlugin;
+    /** Called by wavesurfer, don't call manually */
+    onInit(): void;
+    /** Unmount */
+    destroy(): void;
+    private initTimelineWrapper;
+    private defaultTimeInterval;
+    private defaultPrimaryLabelInterval;
+    private defaultSecondaryLabelInterval;
+    private initTimeline;
+}
+export default TimelinePlugin;

package/dist/plugins/record.cjs

@@ -0,0 +1 @@
+"use strict";function e(e,t,r,s){return new(r||(r=Promise))((function(i,o){function n(e){try{d(s.next(e))}catch(e){o(e)}}function a(e){try{d(s.throw(e))}catch(e){o(e)}}function d(e){var t;e.done?i(e.value):(t=e.value,t instanceof r?t:new r((function(e){e(t)}))).then(n,a)}d((s=s.apply(e,t||[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;class t{constructor(){this.listeners={}}on(e,t){return this.listeners[e]||(this.listeners[e]=new Set),this.listeners[e].add(t),()=>this.un(e,t)}once(e,t){const r=this.on(e,t),s=this.on(e,(()=>{r(),s()}));return r}un(e,t){this.listeners[e]&&(t?this.listeners[e].delete(t):delete this.listeners[e])}unAll(){this.listeners={}}emit(e,...t){this.listeners[e]&&this.listeners[e].forEach((e=>e(...t)))}}class r extends t{constructor(e){super(),this.subscriptions=[],this.options=e}onInit(){}init(e){this.wavesurfer=e,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((e=>e()))}}const s=["audio/webm","audio/wav","audio/mpeg","audio/mp4","audio/mp3"];class i extends r{constructor(){super(...arguments),this.mediaRecorder=null,this.recordedUrl="",this.savedCursorWidth=1,this.savedInteractive=!0}static create(e){return new i(e||{})}preventInteraction(){this.wavesurfer&&(this.savedCursorWidth=this.wavesurfer.options.cursorWidth||1,this.savedInteractive=this.wavesurfer.options.interact||!0,this.wavesurfer.options.cursorWidth=0,this.wavesurfer.options.interact=!1)}restoreInteraction(){this.wavesurfer&&(this.wavesurfer.options.cursorWidth=this.savedCursorWidth,this.wavesurfer.options.interact=this.savedInteractive)}onInit(){this.preventInteraction()}loadBlob(e,t){var r;const s=new Blob(e,{type:t});this.recordedUrl=URL.createObjectURL(s),this.restoreInteraction(),null===(r=this.wavesurfer)||void 0===r||r.load(this.recordedUrl)}render(e){const t=new AudioContext({sampleRate:8e3}),r=t.createMediaStreamSource(e),s=t.createAnalyser();r.connect(s);const i=s.frequencyBinCount,o=new Float32Array(i),n=i/t.sampleRate;let a;const d=()=>{var e;s.getFloatTimeDomainData(o),null===(e=this.wavesurfer)||void 0===e||e.load("",[o],n),a=requestAnimationFrame(d)};return d(),()=>{a&&cancelAnimationFrame(a),r&&(r.disconnect(),r.mediaStream.getTracks().forEach((e=>e.stop()))),t&&t.close()}}cleanUp(){var e;this.stopRecording(),null===(e=this.wavesurfer)||void 0===e||e.empty(),this.recordedUrl&&(URL.revokeObjectURL(this.recordedUrl),this.recordedUrl="")}startRecording(){return e(this,void 0,void 0,(function*(){let e;this.preventInteraction(),this.cleanUp();try{e=yield navigator.mediaDevices.getUserMedia({audio:!0})}catch(e){throw new Error("Error accessing the microphone: "+e.message)}const t=this.render(e),r=new MediaRecorder(e,{mimeType:this.options.mimeType||s.find((e=>MediaRecorder.isTypeSupported(e))),audioBitsPerSecond:this.options.audioBitsPerSecond}),i=[];r.addEventListener("dataavailable",(e=>{e.data.size>0&&i.push(e.data)})),r.addEventListener("stop",(()=>{t(),this.loadBlob(i,r.mimeType),this.emit("stopRecording")})),r.start(),this.emit("startRecording"),this.mediaRecorder=r}))}isRecording(){var e;return"recording"===(null===(e=this.mediaRecorder)||void 0===e?void 0:e.state)}stopRecording(){var e;this.isRecording()&&(null===(e=this.mediaRecorder)||void 0===e||e.stop())}getRecordedUrl(){return this.recordedUrl}destroy(){super.destroy(),this.cleanUp()}}module.exports=i;

package/dist/plugins/record.d.ts

@@ -1,21 +1,24 @@
 /**
  * Record audio from the microphone, render a waveform and download the audio.
  */
-import BasePlugin from '../base-plugin.js';
+import BasePlugin, { type BasePluginEvents } from '../base-plugin.js';
 export type RecordPluginOptions = {
-    realtimeWaveColor?: string;
-    lineWidth?: number;
     mimeType?: MediaRecorderOptions['mimeType'];
     audioBitsPerSecond?: MediaRecorderOptions['audioBitsPerSecond'];
 };
-export type RecordPluginEvents = {
+export type RecordPluginEvents = BasePluginEvents & {
     startRecording: [];
     stopRecording: [];
 };
 declare class RecordPlugin extends BasePlugin<RecordPluginEvents, RecordPluginOptions> {
     private mediaRecorder;
     private recordedUrl;
+    private savedCursorWidth;
+    private savedInteractive;
     static create(options?: RecordPluginOptions): RecordPlugin;
+    private preventInteraction;
+    private restoreInteraction;
+    onInit(): void;
     private loadBlob;
     render(stream: MediaStream): () => void;
     private cleanUp;

package/dist/plugins/record.esm.js

@@ -0,0 +1 @@
+function e(e,t,r,s){return new(r||(r=Promise))((function(i,n){function o(e){try{d(s.next(e))}catch(e){n(e)}}function a(e){try{d(s.throw(e))}catch(e){n(e)}}function d(e){var t;e.done?i(e.value):(t=e.value,t instanceof r?t:new r((function(e){e(t)}))).then(o,a)}d((s=s.apply(e,t||[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;class t{constructor(){this.listeners={}}on(e,t){return this.listeners[e]||(this.listeners[e]=new Set),this.listeners[e].add(t),()=>this.un(e,t)}once(e,t){const r=this.on(e,t),s=this.on(e,(()=>{r(),s()}));return r}un(e,t){this.listeners[e]&&(t?this.listeners[e].delete(t):delete this.listeners[e])}unAll(){this.listeners={}}emit(e,...t){this.listeners[e]&&this.listeners[e].forEach((e=>e(...t)))}}class r extends t{constructor(e){super(),this.subscriptions=[],this.options=e}onInit(){}init(e){this.wavesurfer=e,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((e=>e()))}}const s=["audio/webm","audio/wav","audio/mpeg","audio/mp4","audio/mp3"];class i extends r{constructor(){super(...arguments),this.mediaRecorder=null,this.recordedUrl="",this.savedCursorWidth=1,this.savedInteractive=!0}static create(e){return new i(e||{})}preventInteraction(){this.wavesurfer&&(this.savedCursorWidth=this.wavesurfer.options.cursorWidth||1,this.savedInteractive=this.wavesurfer.options.interact||!0,this.wavesurfer.options.cursorWidth=0,this.wavesurfer.options.interact=!1)}restoreInteraction(){this.wavesurfer&&(this.wavesurfer.options.cursorWidth=this.savedCursorWidth,this.wavesurfer.options.interact=this.savedInteractive)}onInit(){this.preventInteraction()}loadBlob(e,t){var r;const s=new Blob(e,{type:t});this.recordedUrl=URL.createObjectURL(s),this.restoreInteraction(),null===(r=this.wavesurfer)||void 0===r||r.load(this.recordedUrl)}render(e){const t=new AudioContext({sampleRate:8e3}),r=t.createMediaStreamSource(e),s=t.createAnalyser();r.connect(s);const i=s.frequencyBinCount,n=new Float32Array(i),o=i/t.sampleRate;let a;const d=()=>{var e;s.getFloatTimeDomainData(n),null===(e=this.wavesurfer)||void 0===e||e.load("",[n],o),a=requestAnimationFrame(d)};return d(),()=>{a&&cancelAnimationFrame(a),r&&(r.disconnect(),r.mediaStream.getTracks().forEach((e=>e.stop()))),t&&t.close()}}cleanUp(){var e;this.stopRecording(),null===(e=this.wavesurfer)||void 0===e||e.empty(),this.recordedUrl&&(URL.revokeObjectURL(this.recordedUrl),this.recordedUrl="")}startRecording(){return e(this,void 0,void 0,(function*(){let e;this.preventInteraction(),this.cleanUp();try{e=yield navigator.mediaDevices.getUserMedia({audio:!0})}catch(e){throw new Error("Error accessing the microphone: "+e.message)}const t=this.render(e),r=new MediaRecorder(e,{mimeType:this.options.mimeType||s.find((e=>MediaRecorder.isTypeSupported(e))),audioBitsPerSecond:this.options.audioBitsPerSecond}),i=[];r.addEventListener("dataavailable",(e=>{e.data.size>0&&i.push(e.data)})),r.addEventListener("stop",(()=>{t(),this.loadBlob(i,r.mimeType),this.emit("stopRecording")})),r.start(),this.emit("startRecording"),this.mediaRecorder=r}))}isRecording(){var e;return"recording"===(null===(e=this.mediaRecorder)||void 0===e?void 0:e.state)}stopRecording(){var e;this.isRecording()&&(null===(e=this.mediaRecorder)||void 0===e||e.stop())}getRecordedUrl(){return this.recordedUrl}destroy(){super.destroy(),this.cleanUp()}}export{i as default};

package/dist/plugins/record.js

@@ -1,6 +1,15 @@
 /**
  * Record audio from the microphone, render a waveform and download the audio.
  */
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
 import BasePlugin from '../base-plugin.js';
 const MIME_TYPES = ['audio/webm', 'audio/wav', 'audio/mpeg', 'audio/mp4', 'audio/mp3'];
 const findSupportedMimeType = () => MIME_TYPES.find((mimeType) => MediaRecorder.isTypeSupported(mimeType));
@@ -9,56 +18,49 @@ class RecordPlugin extends BasePlugin {
         super(...arguments);
         this.mediaRecorder = null;
         this.recordedUrl = '';
+        this.savedCursorWidth = 1;
+        this.savedInteractive = true;
     }
     static create(options) {
         return new RecordPlugin(options || {});
     }
+    preventInteraction() {
+        if (this.wavesurfer) {
+            this.savedCursorWidth = this.wavesurfer.options.cursorWidth || 1;
+            this.savedInteractive = this.wavesurfer.options.interact || true;
+            this.wavesurfer.options.cursorWidth = 0;
+            this.wavesurfer.options.interact = false;
+        }
+    }
+    restoreInteraction() {
+        if (this.wavesurfer) {
+            this.wavesurfer.options.cursorWidth = this.savedCursorWidth;
+            this.wavesurfer.options.interact = this.savedInteractive;
+        }
+    }
+    onInit() {
+        this.preventInteraction();
+    }
     loadBlob(data, type) {
+        var _a;
         const blob = new Blob(data, { type });
         this.recordedUrl = URL.createObjectURL(blob);
-        this.wavesurfer?.load(this.recordedUrl);
+        this.restoreInteraction();
+        (_a = this.wavesurfer) === null || _a === void 0 ? void 0 : _a.load(this.recordedUrl);
     }
     render(stream) {
-        if (!this.wavesurfer)
-            return () => undefined;
-        const container = this.wavesurfer.getWrapper();
-        const canvas = document.createElement('canvas');
-        canvas.width = container.clientWidth;
-        canvas.height = container.clientHeight;
-        canvas.style.zIndex = '10';
-        container.appendChild(canvas);
-        const canvasCtx = canvas.getContext('2d');
-        const audioContext = new AudioContext();
+        const audioContext = new AudioContext({ sampleRate: 8000 });
         const source = audioContext.createMediaStreamSource(stream);
         const analyser = audioContext.createAnalyser();
         source.connect(analyser);
+        const bufferLength = analyser.frequencyBinCount;
+        const dataArray = new Float32Array(bufferLength);
+        const sampleDuration = bufferLength / audioContext.sampleRate;
         let animationId;
         const drawWaveform = () => {
-            if (!canvasCtx)
-                return;
-            canvasCtx.clearRect(0, 0, canvas.width, canvas.height);
-            const bufferLength = analyser.frequencyBinCount;
-            const dataArray = new Uint8Array(bufferLength);
-            analyser.getByteTimeDomainData(dataArray);
-            canvasCtx.lineWidth = this.options.lineWidth || 2;
-            const color = this.options.realtimeWaveColor || this.wavesurfer?.options.waveColor || '';
-            canvasCtx.strokeStyle = Array.isArray(color) ? color[0] : color;
-            canvasCtx.beginPath();
-            const sliceWidth = (canvas.width * 1.0) / bufferLength;
-            let x = 0;
-            for (let i = 0; i < bufferLength; i++) {
-                const v = dataArray[i] / 128.0;
-                const y = (v * canvas.height) / 2;
-                if (i === 0) {
-                    canvasCtx.moveTo(x, y);
-                }
-                else {
-                    canvasCtx.lineTo(x, y);
-                }
-                x += sliceWidth;
-            }
-            canvasCtx.lineTo(canvas.width, canvas.height / 2);
-            canvasCtx.stroke();
+            var _a;
+            analyser.getFloatTimeDomainData(dataArray);
+            (_a = this.wavesurfer) === null || _a === void 0 ? void 0 : _a.load('', [dataArray], sampleDuration);
             animationId = requestAnimationFrame(drawWaveform);
         };
         drawWaveform();
@@ -73,52 +75,57 @@ class RecordPlugin extends BasePlugin {
             if (audioContext) {
                 audioContext.close();
             }
-            canvas?.remove();
         };
     }
     cleanUp() {
+        var _a;
         this.stopRecording();
-        this.wavesurfer?.empty();
+        (_a = this.wavesurfer) === null || _a === void 0 ? void 0 : _a.empty();
         if (this.recordedUrl) {
             URL.revokeObjectURL(this.recordedUrl);
             this.recordedUrl = '';
         }
     }
-    async startRecording() {
-        this.cleanUp();
-        let stream;
-        try {
-            stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-        }
-        catch (err) {
-            throw new Error('Error accessing the microphone: ' + err.message);
-        }
-        const onStop = this.render(stream);
-        const mediaRecorder = new MediaRecorder(stream, {
-            mimeType: this.options.mimeType || findSupportedMimeType(),
-            audioBitsPerSecond: this.options.audioBitsPerSecond,
-        });
-        const recordedChunks = [];
-        mediaRecorder.addEventListener('dataavailable', (event) => {
-            if (event.data.size > 0) {
-                recordedChunks.push(event.data);
+    startRecording() {
+        return __awaiter(this, void 0, void 0, function* () {
+            this.preventInteraction();
+            this.cleanUp();
+            let stream;
+            try {
+                stream = yield navigator.mediaDevices.getUserMedia({ audio: true });
             }
+            catch (err) {
+                throw new Error('Error accessing the microphone: ' + err.message);
+            }
+            const onStop = this.render(stream);
+            const mediaRecorder = new MediaRecorder(stream, {
+                mimeType: this.options.mimeType || findSupportedMimeType(),
+                audioBitsPerSecond: this.options.audioBitsPerSecond,
+            });
+            const recordedChunks = [];
+            mediaRecorder.addEventListener('dataavailable', (event) => {
+                if (event.data.size > 0) {
+                    recordedChunks.push(event.data);
+                }
+            });
+            mediaRecorder.addEventListener('stop', () => {
+                onStop();
+                this.loadBlob(recordedChunks, mediaRecorder.mimeType);
+                this.emit('stopRecording');
+            });
+            mediaRecorder.start();
+            this.emit('startRecording');
+            this.mediaRecorder = mediaRecorder;
         });
-        mediaRecorder.addEventListener('stop', () => {
-            onStop();
-            this.loadBlob(recordedChunks, mediaRecorder.mimeType);
-            this.emit('stopRecording');
-        });
-        mediaRecorder.start();
-        this.emit('startRecording');
-        this.mediaRecorder = mediaRecorder;
     }
     isRecording() {
-        return this.mediaRecorder?.state === 'recording';
+        var _a;
+        return ((_a = this.mediaRecorder) === null || _a === void 0 ? void 0 : _a.state) === 'recording';
     }
     stopRecording() {
+        var _a;
         if (this.isRecording()) {
-            this.mediaRecorder?.stop();
+            (_a = this.mediaRecorder) === null || _a === void 0 ? void 0 : _a.stop();
         }
     }
     getRecordedUrl() {

package/dist/plugins/record.min.js

@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):((e="undefined"!=typeof globalThis?globalThis:e||self).WaveSurfer=e.WaveSurfer||{},e.WaveSurfer.Record=t())}(this,(function(){"use strict";function e(e,t,r,i){return new(r||(r=Promise))((function(s,n){function o(e){try{d(i.next(e))}catch(e){n(e)}}function a(e){try{d(i.throw(e))}catch(e){n(e)}}function d(e){var t;e.done?s(e.value):(t=e.value,t instanceof r?t:new r((function(e){e(t)}))).then(o,a)}d((i=i.apply(e,t||[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;class t{constructor(){this.listeners={}}on(e,t){return this.listeners[e]||(this.listeners[e]=new Set),this.listeners[e].add(t),()=>this.un(e,t)}once(e,t){const r=this.on(e,t),i=this.on(e,(()=>{r(),i()}));return r}un(e,t){this.listeners[e]&&(t?this.listeners[e].delete(t):delete this.listeners[e])}unAll(){this.listeners={}}emit(e,...t){this.listeners[e]&&this.listeners[e].forEach((e=>e(...t)))}}class r extends t{constructor(e){super(),this.subscriptions=[],this.options=e}onInit(){}init(e){this.wavesurfer=e,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((e=>e()))}}const i=["audio/webm","audio/wav","audio/mpeg","audio/mp4","audio/mp3"];class s extends r{constructor(){super(...arguments),this.mediaRecorder=null,this.recordedUrl="",this.savedCursorWidth=1,this.savedInteractive=!0}static create(e){return new s(e||{})}preventInteraction(){this.wavesurfer&&(this.savedCursorWidth=this.wavesurfer.options.cursorWidth||1,this.savedInteractive=this.wavesurfer.options.interact||!0,this.wavesurfer.options.cursorWidth=0,this.wavesurfer.options.interact=!1)}restoreInteraction(){this.wavesurfer&&(this.wavesurfer.options.cursorWidth=this.savedCursorWidth,this.wavesurfer.options.interact=this.savedInteractive)}onInit(){this.preventInteraction()}loadBlob(e,t){var r;const i=new Blob(e,{type:t});this.recordedUrl=URL.createObjectURL(i),this.restoreInteraction(),null===(r=this.wavesurfer)||void 0===r||r.load(this.recordedUrl)}render(e){const t=new AudioContext({sampleRate:8e3}),r=t.createMediaStreamSource(e),i=t.createAnalyser();r.connect(i);const s=i.frequencyBinCount,n=new Float32Array(s),o=s/t.sampleRate;let a;const d=()=>{var e;i.getFloatTimeDomainData(n),null===(e=this.wavesurfer)||void 0===e||e.load("",[n],o),a=requestAnimationFrame(d)};return d(),()=>{a&&cancelAnimationFrame(a),r&&(r.disconnect(),r.mediaStream.getTracks().forEach((e=>e.stop()))),t&&t.close()}}cleanUp(){var e;this.stopRecording(),null===(e=this.wavesurfer)||void 0===e||e.empty(),this.recordedUrl&&(URL.revokeObjectURL(this.recordedUrl),this.recordedUrl="")}startRecording(){return e(this,void 0,void 0,(function*(){let e;this.preventInteraction(),this.cleanUp();try{e=yield navigator.mediaDevices.getUserMedia({audio:!0})}catch(e){throw new Error("Error accessing the microphone: "+e.message)}const t=this.render(e),r=new MediaRecorder(e,{mimeType:this.options.mimeType||i.find((e=>MediaRecorder.isTypeSupported(e))),audioBitsPerSecond:this.options.audioBitsPerSecond}),s=[];r.addEventListener("dataavailable",(e=>{e.data.size>0&&s.push(e.data)})),r.addEventListener("stop",(()=>{t(),this.loadBlob(s,r.mimeType),this.emit("stopRecording")})),r.start(),this.emit("startRecording"),this.mediaRecorder=r}))}isRecording(){var e;return"recording"===(null===(e=this.mediaRecorder)||void 0===e?void 0:e.state)}stopRecording(){var e;this.isRecording()&&(null===(e=this.mediaRecorder)||void 0===e||e.stop())}getRecordedUrl(){return this.recordedUrl}destroy(){super.destroy(),this.cleanUp()}}return s}));

package/dist/plugins/regions.cjs

@@ -0,0 +1 @@
+"use strict";class t{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),n=this.on(t,(()=>{i(),n()}));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)))}}class e extends t{constructor(t){super(),this.subscriptions=[],this.options=t}onInit(){}init(t){this.wavesurfer=t,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((t=>t()))}}function i(t,e,i,n,s=5){let r=()=>{};if(!t)return r;const o=o=>{if(2===o.button)return;o.preventDefault(),o.stopPropagation();let l=o.clientX,a=o.clientY,h=!1;const d=n=>{n.preventDefault(),n.stopPropagation();const r=n.clientX,o=n.clientY;if(h||Math.abs(r-l)>=s||Math.abs(o-a)>=s){const{left:n,top:s}=t.getBoundingClientRect();h||(h=!0,null==i||i(l-n,a-s)),e(r-l,o-a,r-n,o-s),l=r,a=o}},u=t=>{h&&(t.preventDefault(),t.stopPropagation())},c=()=>{h&&(null==n||n()),r()};document.addEventListener("pointermove",d),document.addEventListener("pointerup",c),document.addEventListener("pointerleave",c),document.addEventListener("click",u,!0),r=()=>{document.removeEventListener("pointermove",d),document.removeEventListener("pointerup",c),document.removeEventListener("pointerleave",c),setTimeout((()=>{document.removeEventListener("click",u,!0)}),10)}};return t.addEventListener("pointerdown",o),()=>{r(),t.removeEventListener("pointerdown",o)}}class n extends t{constructor(t,e){var i,n,s,r,o,l;super(),this.totalDuration=e,this.minLength=0,this.maxLength=1/0,this.id=t.id||`region-${Math.random().toString(32).slice(2)}`,this.start=t.start,this.end=null!==(i=t.end)&&void 0!==i?i:t.start,this.drag=null===(n=t.drag)||void 0===n||n,this.resize=null===(s=t.resize)||void 0===s||s,this.color=null!==(r=t.color)&&void 0!==r?r:"rgba(0, 0, 0, 0.1)",this.minLength=null!==(o=t.minLength)&&void 0!==o?o:this.minLength,this.maxLength=null!==(l=t.maxLength)&&void 0!==l?l:this.maxLength,this.element=this.initElement(t.content),this.renderPosition(),this.initMouseEvents()}initElement(t){const e=document.createElement("div"),i=this.start===this.end;if(e.setAttribute("part",`${i?"marker":"region"} ${this.id}`),e.setAttribute("style",`\n      position: absolute;\n      height: 100%;\n      background-color: ${i?"none":this.color};\n      border-left: ${i?"2px solid "+this.color:"none"};\n      border-radius: 2px;\n      box-sizing: border-box;\n      transition: background-color 0.2s ease;\n      cursor: ${this.drag?"grab":"default"};\n      pointer-events: all;\n    `),t&&("string"==typeof t?(this.content=document.createElement("div"),this.content.style.padding=`0.2em ${i?.2:.4}em`,this.content.textContent=t):this.content=t,this.content.setAttribute("part","region-content"),e.appendChild(this.content)),!i){const t=document.createElement("div");t.setAttribute("data-resize","left"),t.setAttribute("style",`\n        position: absolute;\n        z-index: 2;\n        width: 6px;\n        height: 100%;\n        top: 0;\n        left: 0;\n        border-left: 2px solid rgba(0, 0, 0, 0.5);\n        border-radius: 2px 0 0 2px;\n        cursor: ${this.resize?"ew-resize":"default"};\n        word-break: keep-all;\n      `),t.setAttribute("part","region-handle region-handle-left");const i=t.cloneNode();i.setAttribute("data-resize","right"),i.style.left="",i.style.right="0",i.style.borderRight=i.style.borderLeft,i.style.borderLeft="",i.style.borderRadius="0 2px 2px 0",i.setAttribute("part","region-handle region-handle-right"),e.appendChild(t),e.appendChild(i)}return e}renderPosition(){const t=this.start/this.totalDuration,e=(this.totalDuration-this.end)/this.totalDuration;this.element.style.left=100*t+"%",this.element.style.right=100*e+"%"}initMouseEvents(){const{element:t}=this;if(!t)return;t.addEventListener("click",(t=>this.emit("click",t))),t.addEventListener("mouseenter",(t=>this.emit("over",t))),t.addEventListener("mouseleave",(t=>this.emit("leave",t))),t.addEventListener("dblclick",(t=>this.emit("dblclick",t))),i(t,(t=>this.onMove(t)),(()=>this.onStartMoving()),(()=>this.onEndMoving()));i(t.querySelector('[data-resize="left"]'),(t=>this.onResize(t,"start")),(()=>null),(()=>this.onEndResizing()),1),i(t.querySelector('[data-resize="right"]'),(t=>this.onResize(t,"end")),(()=>null),(()=>this.onEndResizing()),1)}onStartMoving(){this.drag&&(this.element.style.cursor="grabbing")}onEndMoving(){this.drag&&(this.element.style.cursor="grab",this.emit("update-end"))}_onUpdate(t,e){if(!this.element.parentElement)return;const i=t/this.element.parentElement.clientWidth*this.totalDuration,n=e&&"start"!==e?this.start:this.start+i,s=e&&"end"!==e?this.end:this.end+i,r=s-n;n>0&&s<this.totalDuration&&n<=s&&r>=this.minLength&&r<=this.maxLength&&(this.start=n,this.end=s,this.renderPosition(),this.emit("update"))}onMove(t){this.drag&&this._onUpdate(t)}onResize(t,e){this.resize&&this._onUpdate(t,e)}onEndResizing(){this.resize&&this.emit("update-end")}_setTotalDuration(t){this.totalDuration=t,this.renderPosition()}play(){this.emit("play")}setOptions(t){var e,i;t.color&&(this.color=t.color,this.element.style.backgroundColor=this.color),void 0!==t.drag&&(this.drag=t.drag,this.element.style.cursor=this.drag?"grab":"default"),void 0!==t.resize&&(this.resize=t.resize,this.element.querySelectorAll("[data-resize]").forEach((t=>{t.style.cursor=this.resize?"ew-resize":"default"}))),void 0===t.start&&void 0===t.end||(this.start=null!==(e=t.start)&&void 0!==e?e:this.start,this.end=null!==(i=t.end)&&void 0!==i?i:this.end,this.renderPosition())}remove(){this.emit("remove"),this.element.remove(),this.element=null}}class s extends e{constructor(t){super(t),this.regions=[],this.regionsContainer=this.initRegionsContainer()}static create(t){return new s(t)}onInit(){if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");this.wavesurfer.getWrapper().appendChild(this.regionsContainer)}initRegionsContainer(){const t=document.createElement("div");return t.setAttribute("style","\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      z-index: 3;\n      pointer-events: none;\n    "),t}getRegions(){return this.regions}avoidOverlapping(t){if(!t.content)return;const e=t.content,i=e.getBoundingClientRect().left,n=t.element.scrollWidth,s=this.regions.filter((e=>{if(e===t||!e.content)return!1;const s=e.content.getBoundingClientRect().left,r=e.element.scrollWidth;return i<s+r&&s<i+n})).map((t=>{var e;return(null===(e=t.content)||void 0===e?void 0:e.getBoundingClientRect().height)||0})).reduce(((t,e)=>t+e),0);e.style.marginTop=`${s}px`}saveRegion(t){this.regionsContainer.appendChild(t.element),this.avoidOverlapping(t),this.regions.push(t),this.emit("region-created",t);const e=[t.on("update-end",(()=>{this.avoidOverlapping(t),this.emit("region-updated",t)})),t.on("play",(()=>{var e,i;null===(e=this.wavesurfer)||void 0===e||e.play(),null===(i=this.wavesurfer)||void 0===i||i.setTime(t.start)})),t.on("click",(e=>{this.emit("region-clicked",t,e)})),t.on("dblclick",(e=>{this.emit("region-double-clicked",t,e)})),t.once("remove",(()=>{e.forEach((t=>t())),this.regions=this.regions.filter((e=>e!==t))}))];this.subscriptions.push(...e)}addRegion(t){if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");const e=this.wavesurfer.getDuration(),i=new n(t,e);return e?this.saveRegion(i):this.subscriptions.push(this.wavesurfer.once("ready",(t=>{i._setTotalDuration(t),this.saveRegion(i)}))),i}enableDragSelection(t){var e,s;const r=null===(s=null===(e=this.wavesurfer)||void 0===e?void 0:e.getWrapper())||void 0===s?void 0:s.querySelector("div");if(!r)return()=>{};let o=null,l=0;return i(r,((t,e,i)=>{o&&o._onUpdate(t,i>l?"end":"start")}),(e=>{if(l=e,!this.wavesurfer)return;const i=this.wavesurfer.getDuration(),s=this.wavesurfer.getWrapper().clientWidth,r=e/s*i,a=(e+5)/s*i;o=new n(Object.assign(Object.assign({},t),{start:r,end:a}),i),this.regionsContainer.appendChild(o.element)}),(()=>{o&&(this.saveRegion(o),o=null)}))}clearRegions(){this.regions.forEach((t=>t.remove()))}destroy(){this.clearRegions(),super.destroy()}}module.exports=s;

package/dist/plugins/regions.d.ts

@@ -3,35 +3,54 @@
  * Regions can be clicked on, dragged and resized.
  * You can set the color and content of each region, as well as their HTML content.
  */
-import BasePlugin from '../base-plugin.js';
+import BasePlugin, { type BasePluginEvents } from '../base-plugin.js';
 import EventEmitter from '../event-emitter.js';
 export type RegionsPluginOptions = undefined;
-export type RegionsPluginEvents = {
+export type RegionsPluginEvents = BasePluginEvents & {
     'region-created': [region: Region];
     'region-updated': [region: Region];
     'region-clicked': [region: Region, e: MouseEvent];
     'region-double-clicked': [region: Region, e: MouseEvent];
 };
 export type RegionEvents = {
+    /** Before the region is removed */
     remove: [];
+    /** When the region's parameters are being updated */
     update: [];
+    /** When dragging or resizing is finished */
     'update-end': [];
+    /** On play */
     play: [];
+    /** On mouse click */
     click: [event: MouseEvent];
+    /** Double click */
     dblclick: [event: MouseEvent];
+    /** Mouse over */
     over: [event: MouseEvent];
+    /** Mouse leave */
     leave: [event: MouseEvent];
 };
 export type RegionParams = {
+    /** The id of the region, any string */
     id?: string;
+    /** The start position of the region (in seconds) */
     start: number;
+    /** The end position of the region (in seconds) */
     end?: number;
+    /** Allow/dissallow dragging the region */
     drag?: boolean;
+    /** Allow/dissallow resizing the region */
     resize?: boolean;
+    /** The color of the region (CSS color) */
     color?: string;
+    /** Content string or HTML element */
     content?: string | HTMLElement;
+    /** Min length when resizing (in seconds) */
+    minLength?: number;
+    /** Max length when resizing (in seconds) */
+    maxLength?: number;
 };
-export declare class Region extends EventEmitter<RegionEvents> {
+declare class Region extends EventEmitter<RegionEvents> {
     private totalDuration;
     element: HTMLElement;
     id: string;
@@ -41,13 +60,15 @@ export declare class Region extends EventEmitter<RegionEvents> {
     resize: boolean;
     color: string;
     content?: HTMLElement;
+    minLength: number;
+    maxLength: number;
     constructor(params: RegionParams, totalDuration: number);
     private initElement;
     private renderPosition;
     private initMouseEvents;
     private onStartMoving;
     private onEndMoving;
-    private onUpdate;
+    _onUpdate(dx: number, side?: 'start' | 'end'): void;
     private onMove;
     private onResize;
     private onEndResizing;

package/dist/plugins/regions.esm.js

@@ -0,0 +1 @@
+class t{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),n=this.on(t,(()=>{i(),n()}));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)))}}class e extends t{constructor(t){super(),this.subscriptions=[],this.options=t}onInit(){}init(t){this.wavesurfer=t,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((t=>t()))}}function i(t,e,i,n,s=5){let r=()=>{};if(!t)return r;const o=o=>{if(2===o.button)return;o.preventDefault(),o.stopPropagation();let l=o.clientX,a=o.clientY,h=!1;const d=n=>{n.preventDefault(),n.stopPropagation();const r=n.clientX,o=n.clientY;if(h||Math.abs(r-l)>=s||Math.abs(o-a)>=s){const{left:n,top:s}=t.getBoundingClientRect();h||(h=!0,null==i||i(l-n,a-s)),e(r-l,o-a,r-n,o-s),l=r,a=o}},u=t=>{h&&(t.preventDefault(),t.stopPropagation())},c=()=>{h&&(null==n||n()),r()};document.addEventListener("pointermove",d),document.addEventListener("pointerup",c),document.addEventListener("pointerleave",c),document.addEventListener("click",u,!0),r=()=>{document.removeEventListener("pointermove",d),document.removeEventListener("pointerup",c),document.removeEventListener("pointerleave",c),setTimeout((()=>{document.removeEventListener("click",u,!0)}),10)}};return t.addEventListener("pointerdown",o),()=>{r(),t.removeEventListener("pointerdown",o)}}class n extends t{constructor(t,e){var i,n,s,r,o,l;super(),this.totalDuration=e,this.minLength=0,this.maxLength=1/0,this.id=t.id||`region-${Math.random().toString(32).slice(2)}`,this.start=t.start,this.end=null!==(i=t.end)&&void 0!==i?i:t.start,this.drag=null===(n=t.drag)||void 0===n||n,this.resize=null===(s=t.resize)||void 0===s||s,this.color=null!==(r=t.color)&&void 0!==r?r:"rgba(0, 0, 0, 0.1)",this.minLength=null!==(o=t.minLength)&&void 0!==o?o:this.minLength,this.maxLength=null!==(l=t.maxLength)&&void 0!==l?l:this.maxLength,this.element=this.initElement(t.content),this.renderPosition(),this.initMouseEvents()}initElement(t){const e=document.createElement("div"),i=this.start===this.end;if(e.setAttribute("part",`${i?"marker":"region"} ${this.id}`),e.setAttribute("style",`\n      position: absolute;\n      height: 100%;\n      background-color: ${i?"none":this.color};\n      border-left: ${i?"2px solid "+this.color:"none"};\n      border-radius: 2px;\n      box-sizing: border-box;\n      transition: background-color 0.2s ease;\n      cursor: ${this.drag?"grab":"default"};\n      pointer-events: all;\n    `),t&&("string"==typeof t?(this.content=document.createElement("div"),this.content.style.padding=`0.2em ${i?.2:.4}em`,this.content.textContent=t):this.content=t,this.content.setAttribute("part","region-content"),e.appendChild(this.content)),!i){const t=document.createElement("div");t.setAttribute("data-resize","left"),t.setAttribute("style",`\n        position: absolute;\n        z-index: 2;\n        width: 6px;\n        height: 100%;\n        top: 0;\n        left: 0;\n        border-left: 2px solid rgba(0, 0, 0, 0.5);\n        border-radius: 2px 0 0 2px;\n        cursor: ${this.resize?"ew-resize":"default"};\n        word-break: keep-all;\n      `),t.setAttribute("part","region-handle region-handle-left");const i=t.cloneNode();i.setAttribute("data-resize","right"),i.style.left="",i.style.right="0",i.style.borderRight=i.style.borderLeft,i.style.borderLeft="",i.style.borderRadius="0 2px 2px 0",i.setAttribute("part","region-handle region-handle-right"),e.appendChild(t),e.appendChild(i)}return e}renderPosition(){const t=this.start/this.totalDuration,e=(this.totalDuration-this.end)/this.totalDuration;this.element.style.left=100*t+"%",this.element.style.right=100*e+"%"}initMouseEvents(){const{element:t}=this;if(!t)return;t.addEventListener("click",(t=>this.emit("click",t))),t.addEventListener("mouseenter",(t=>this.emit("over",t))),t.addEventListener("mouseleave",(t=>this.emit("leave",t))),t.addEventListener("dblclick",(t=>this.emit("dblclick",t))),i(t,(t=>this.onMove(t)),(()=>this.onStartMoving()),(()=>this.onEndMoving()));i(t.querySelector('[data-resize="left"]'),(t=>this.onResize(t,"start")),(()=>null),(()=>this.onEndResizing()),1),i(t.querySelector('[data-resize="right"]'),(t=>this.onResize(t,"end")),(()=>null),(()=>this.onEndResizing()),1)}onStartMoving(){this.drag&&(this.element.style.cursor="grabbing")}onEndMoving(){this.drag&&(this.element.style.cursor="grab",this.emit("update-end"))}_onUpdate(t,e){if(!this.element.parentElement)return;const i=t/this.element.parentElement.clientWidth*this.totalDuration,n=e&&"start"!==e?this.start:this.start+i,s=e&&"end"!==e?this.end:this.end+i,r=s-n;n>0&&s<this.totalDuration&&n<=s&&r>=this.minLength&&r<=this.maxLength&&(this.start=n,this.end=s,this.renderPosition(),this.emit("update"))}onMove(t){this.drag&&this._onUpdate(t)}onResize(t,e){this.resize&&this._onUpdate(t,e)}onEndResizing(){this.resize&&this.emit("update-end")}_setTotalDuration(t){this.totalDuration=t,this.renderPosition()}play(){this.emit("play")}setOptions(t){var e,i;t.color&&(this.color=t.color,this.element.style.backgroundColor=this.color),void 0!==t.drag&&(this.drag=t.drag,this.element.style.cursor=this.drag?"grab":"default"),void 0!==t.resize&&(this.resize=t.resize,this.element.querySelectorAll("[data-resize]").forEach((t=>{t.style.cursor=this.resize?"ew-resize":"default"}))),void 0===t.start&&void 0===t.end||(this.start=null!==(e=t.start)&&void 0!==e?e:this.start,this.end=null!==(i=t.end)&&void 0!==i?i:this.end,this.renderPosition())}remove(){this.emit("remove"),this.element.remove(),this.element=null}}class s extends e{constructor(t){super(t),this.regions=[],this.regionsContainer=this.initRegionsContainer()}static create(t){return new s(t)}onInit(){if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");this.wavesurfer.getWrapper().appendChild(this.regionsContainer)}initRegionsContainer(){const t=document.createElement("div");return t.setAttribute("style","\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      z-index: 3;\n      pointer-events: none;\n    "),t}getRegions(){return this.regions}avoidOverlapping(t){if(!t.content)return;const e=t.content,i=e.getBoundingClientRect().left,n=t.element.scrollWidth,s=this.regions.filter((e=>{if(e===t||!e.content)return!1;const s=e.content.getBoundingClientRect().left,r=e.element.scrollWidth;return i<s+r&&s<i+n})).map((t=>{var e;return(null===(e=t.content)||void 0===e?void 0:e.getBoundingClientRect().height)||0})).reduce(((t,e)=>t+e),0);e.style.marginTop=`${s}px`}saveRegion(t){this.regionsContainer.appendChild(t.element),this.avoidOverlapping(t),this.regions.push(t),this.emit("region-created",t);const e=[t.on("update-end",(()=>{this.avoidOverlapping(t),this.emit("region-updated",t)})),t.on("play",(()=>{var e,i;null===(e=this.wavesurfer)||void 0===e||e.play(),null===(i=this.wavesurfer)||void 0===i||i.setTime(t.start)})),t.on("click",(e=>{this.emit("region-clicked",t,e)})),t.on("dblclick",(e=>{this.emit("region-double-clicked",t,e)})),t.once("remove",(()=>{e.forEach((t=>t())),this.regions=this.regions.filter((e=>e!==t))}))];this.subscriptions.push(...e)}addRegion(t){if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");const e=this.wavesurfer.getDuration(),i=new n(t,e);return e?this.saveRegion(i):this.subscriptions.push(this.wavesurfer.once("ready",(t=>{i._setTotalDuration(t),this.saveRegion(i)}))),i}enableDragSelection(t){var e,s;const r=null===(s=null===(e=this.wavesurfer)||void 0===e?void 0:e.getWrapper())||void 0===s?void 0:s.querySelector("div");if(!r)return()=>{};let o=null,l=0;return i(r,((t,e,i)=>{o&&o._onUpdate(t,i>l?"end":"start")}),(e=>{if(l=e,!this.wavesurfer)return;const i=this.wavesurfer.getDuration(),s=this.wavesurfer.getWrapper().clientWidth,r=e/s*i,a=(e+5)/s*i;o=new n(Object.assign(Object.assign({},t),{start:r,end:a}),i),this.regionsContainer.appendChild(o.element)}),(()=>{o&&(this.saveRegion(o),o=null)}))}clearRegions(){this.regions.forEach((t=>t.remove()))}destroy(){this.clearRegions(),super.destroy()}}export{s as default};