wavesurfer.js 7.0.0-alpha.4 → 7.0.0-alpha.40

package/dist/plugins/regions.js

@@ -1,193 +1,388 @@
+/**
+ * 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 from '../base-plugin.js';
-const MIN_WIDTH = 10;
-const style = (element, styles) => {
-    for (const key in styles) {
-        element.style[key] = styles[key] || '';
-    }
-};
-const el = (tagName, css) => {
-    const element = document.createElement(tagName);
-    style(element, css);
-    return element;
-};
-class RegionsPlugin extends BasePlugin {
-    /** Create an instance of RegionsPlugin */
-    constructor(params) {
-        super(params);
-        this.dragStart = NaN;
-        this.regions = [];
-        this.createdRegion = null;
-        this.modifiedRegion = null;
-        this.isResizingLeft = false;
-        this.isMoving = false;
-        this.handleMouseDown = (e) => {
-            this.dragStart = e.clientX - this.container.getBoundingClientRect().left;
-        };
-        this.handleMouseMove = (e) => {
-            const dragEnd = e.clientX - this.container.getBoundingClientRect().left;
-            if (this.modifiedRegion && this.isMoving) {
-                this.moveRegion(this.modifiedRegion, dragEnd - this.dragStart);
-                this.dragStart = dragEnd;
-                return;
-            }
-            if (this.modifiedRegion) {
-                this.updateRegion(this.modifiedRegion, this.isResizingLeft ? dragEnd : undefined, this.isResizingLeft ? undefined : dragEnd);
-                return;
-            }
-            if (!isNaN(this.dragStart)) {
-                const dragEnd = e.clientX - this.wrapper.getBoundingClientRect().left;
-                if (dragEnd - this.dragStart >= MIN_WIDTH) {
-                    if (!this.createdRegion) {
-                        this.container.style.pointerEvents = 'none';
-                        this.createdRegion = this.createRegion(this.dragStart, dragEnd);
-                    }
-                    else {
-                        this.updateRegion(this.createdRegion, this.dragStart, dragEnd);
-                    }
+import EventEmitter from '../event-emitter.js';
+function makeDraggable(element, onStart, onMove, onEnd) {
+    if (!element)
+        return () => undefined;
+    const minDx = 5;
+    let sumDx = 0;
+    let preventClickPropagation = false;
+    const onClick = (e) => {
+        preventClickPropagation && e.stopPropagation();
+    };
+    const onMouseDown = (e) => {
+        e.stopPropagation();
+        let x = e.clientX;
+        onStart(x);
+        const onMouseMove = (e) => {
+            const newX = e.clientX;
+            const dx = newX - x;
+            sumDx += dx;
+            x = newX;
+            if (Math.abs(sumDx) >= minDx) {
+                if (!preventClickPropagation) {
+                    preventClickPropagation = true;
+                    onMove(sumDx);
+                }
+                else {
+                    onMove(dx);
                 }
             }
         };
-        this.handleMouseUp = () => {
-            if (this.createdRegion) {
-                this.addRegion(this.createdRegion);
-                this.createdRegion = null;
-            }
-            this.modifiedRegion = null;
-            this.isMoving = false;
-            this.dragStart = NaN;
-            this.container.style.pointerEvents = '';
+        const onMouseUp = () => {
+            sumDx = 0;
+            onEnd();
+            setTimeout(() => (preventClickPropagation = false), 10);
+            document.removeEventListener('mousemove', onMouseMove);
+            document.removeEventListener('mouseup', onMouseUp);
         };
-        this.wrapper = this.initWrapper();
-        const unsubscribe = this.wavesurfer.on('decode', () => {
-            this.container.appendChild(this.wrapper);
-            unsubscribe();
-        });
-        this.subscriptions.push(unsubscribe);
-        this.container.addEventListener('mousedown', this.handleMouseDown);
-        document.addEventListener('mousemove', this.handleMouseMove);
-        document.addEventListener('mouseup', this.handleMouseUp);
+        document.addEventListener('mousemove', onMouseMove);
+        document.addEventListener('mouseup', onMouseUp);
+    };
+    element.addEventListener('click', onClick);
+    element.addEventListener('mousedown', onMouseDown);
+    return () => {
+        element.removeEventListener('click', onClick);
+        element.removeEventListener('mousedown', onMouseDown);
+    };
+}
+class Region extends EventEmitter {
+    constructor(params, totalDuration) {
+        super();
+        this.totalDuration = totalDuration;
+        this.id = params.id || Math.random().toString(32).slice(2);
+        this.start = params.start;
+        this.end = params.end ?? params.start;
+        this.drag = params.drag ?? true;
+        this.resize = params.resize ?? true;
+        this.color = params.color ?? 'rgba(0, 0, 0, 0.1)';
+        this.element = this.initElement(params.content);
+        this.renderPosition();
+        this.initMouseEvents();
     }
-    /** Unmounts the regions */
-    destroy() {
-        this.container.removeEventListener('mousedown', this.handleMouseDown);
-        document.removeEventListener('mousemove', this.handleMouseMove);
-        document.removeEventListener('mouseup', this.handleMouseUp, true);
-        this.wrapper.remove();
-        super.destroy();
+    initElement(content) {
+        const element = document.createElement('div');
+        const isMarker = this.start === this.end;
+        element.id = this.id;
+        element.setAttribute('style', `
+      position: absolute;
+      height: 100%;
+      background-color: ${isMarker ? 'none' : this.color};
+      border-left: ${isMarker ? '2px solid ' + this.color : 'none'};
+      border-radius: 2px;
+      box-sizing: border-box;
+      transition: background-color 0.2s ease;
+      cursor: ${this.drag ? 'grab' : 'default'};
+      pointer-events: all;
+      padding: 0.2em ${isMarker ? 0.2 : 0.4}em;
+      pointer-events: all;
+    `);
+        // Init content
+        if (content) {
+            if (typeof content === 'string') {
+                this.content = document.createElement('div');
+                this.content.textContent = content;
+            }
+            else {
+                this.content = content;
+            }
+            element.appendChild(this.content);
+        }
+        // Add resize handles
+        if (!isMarker) {
+            const leftHandle = document.createElement('div');
+            leftHandle.setAttribute('data-resize', 'left');
+            leftHandle.setAttribute('style', `
+        position: absolute;
+        z-index: 2;
+        width: 6px;
+        height: 100%;
+        top: 0;
+        left: 0;
+        border-left: 2px solid rgba(0, 0, 0, 0.5);
+        border-radius: 2px 0 0 2px;
+        cursor: ${this.resize ? 'ew-resize' : 'default'};
+        word-break: keep-all;
+      `);
+            const rightHandle = leftHandle.cloneNode();
+            rightHandle.setAttribute('data-resize', 'right');
+            rightHandle.style.left = '';
+            rightHandle.style.right = '0';
+            rightHandle.style.borderRight = rightHandle.style.borderLeft;
+            rightHandle.style.borderLeft = '';
+            rightHandle.style.borderRadius = '0 2px 2px 0';
+            element.appendChild(leftHandle);
+            element.appendChild(rightHandle);
+        }
+        return element;
     }
-    initWrapper() {
-        return el('div', {
-            position: 'absolute',
-            top: '0',
-            left: '0',
-            width: '100%',
-            height: '100%',
-            zIndex: '3',
-            pointerEvents: 'none',
-        });
+    renderPosition() {
+        const start = this.start / this.totalDuration;
+        const end = this.end / this.totalDuration;
+        this.element.style.left = `${start * 100}%`;
+        this.element.style.width = `${(end - start) * 100}%`;
     }
-    createRegionElement(start, end, title = '') {
-        const div = el('div', {
-            position: 'absolute',
-            left: `${start}px`,
-            width: `${end - start}px`,
-            height: '100%',
-            backgroundColor: 'rgba(0, 0, 0, 0.1)',
-            transition: 'background-color 0.2s ease',
-            cursor: 'move',
-            pointerEvents: 'all',
-        });
-        div.title = title;
-        const leftHandle = el('div', {
-            position: 'absolute',
-            left: '0',
-            width: '6px',
-            height: '100%',
-            borderLeft: '2px solid rgba(0, 0, 0, 0.5)',
-            borderRadius: '2px 0 0 2px',
-            cursor: 'ew-resize',
-            pointerEvents: 'all',
-        });
-        div.appendChild(leftHandle);
-        const rightHandle = leftHandle.cloneNode();
-        style(rightHandle, {
-            left: '',
-            right: '0',
-            borderLeft: '',
-            borderRight: '2px solid rgba(0, 0, 0, 0.5)',
-            borderRadius: '0 2px 2px 0',
-        });
-        div.appendChild(rightHandle);
-        leftHandle.addEventListener('mousedown', (e) => {
-            e.stopPropagation();
-            this.modifiedRegion = this.regions.find((r) => r.element === div) || null;
-            this.isResizingLeft = true;
-            this.isMoving = false;
-        });
-        rightHandle.addEventListener('mousedown', (e) => {
-            e.stopPropagation();
-            this.modifiedRegion = this.regions.find((r) => r.element === div) || null;
-            this.isResizingLeft = false;
-            this.isMoving = false;
-        });
-        div.addEventListener('mousedown', () => {
-            this.modifiedRegion = this.regions.find((r) => r.element === div) || null;
-            this.isMoving = true;
-        });
-        div.addEventListener('click', () => {
-            const region = this.regions.find((r) => r.element === div);
-            if (region) {
-                this.emit('region-clicked', { region });
+    initMouseEvents() {
+        const { element } = this;
+        element.addEventListener('click', (e) => this.emit('click', e));
+        element.addEventListener('mouseenter', (e) => this.emit('over', e));
+        element.addEventListener('mouseleave', (e) => this.emit('leave', e));
+        element.addEventListener('dblclick', (e) => this.emit('dblclick', e));
+        // Drag
+        makeDraggable(element, () => this.onStartMoving(), (dx) => this.onMove(dx), () => this.onEndMoving());
+        // Resize
+        makeDraggable(element.querySelector('[data-resize="left"]'), () => null, (dx) => this.onResize(dx, 'start'), () => this.onEndResizing());
+        makeDraggable(element.querySelector('[data-resize="right"]'), () => null, (dx) => this.onResize(dx, 'end'), () => this.onEndResizing());
+    }
+    onStartMoving() {
+        if (!this.drag)
+            return;
+        this.element.style.cursor = 'grabbing';
+    }
+    onEndMoving() {
+        if (!this.drag)
+            return;
+        this.element.style.cursor = 'grab';
+        this.emit('update-end');
+    }
+    onUpdate(dx, sides) {
+        if (!this.element.parentElement)
+            return;
+        const deltaSeconds = (dx / this.element.parentElement.clientWidth) * this.totalDuration;
+        sides.forEach((side) => {
+            this[side] += deltaSeconds;
+            if (side === 'start') {
+                this.start = Math.max(0, Math.min(this.start, this.end));
+            }
+            else {
+                this.end = Math.max(this.start, Math.min(this.end, this.totalDuration));
             }
         });
-        this.wrapper.appendChild(div);
-        return div;
+        this.renderPosition();
+        this.emit('update');
     }
-    createRegion(start, end, title = '') {
-        const duration = this.wavesurfer.getDuration();
-        const width = this.wrapper.clientWidth;
-        return {
-            element: this.createRegionElement(start, end, title),
-            start,
-            end,
-            startTime: (start / width) * duration,
-            endTime: (end / width) * duration,
-            title,
-        };
+    onMove(dx) {
+        if (!this.drag)
+            return;
+        this.onUpdate(dx, ['start', 'end']);
     }
-    addRegion(region) {
-        this.regions.push(region);
-        this.emit('region-created', { region });
+    onResize(dx, side) {
+        if (!this.resize)
+            return;
+        this.onUpdate(dx, [side]);
+    }
+    onEndResizing() {
+        if (!this.resize)
+            return;
+        this.emit('update-end');
     }
-    updateRegion(region, start, end) {
-        if (start != null) {
-            region.start = start !== null && start !== void 0 ? start : region.start;
-            region.element.style.left = `${region.start}px`;
-            region.startTime = (start / this.wrapper.clientWidth) * this.wavesurfer.getDuration();
+    _setTotalDuration(totalDuration) {
+        this.totalDuration = totalDuration;
+        this.renderPosition();
+    }
+    /** Play the region from start to end */
+    play() {
+        this.emit('play');
+    }
+    /** Update the region's options */
+    setOptions(options) {
+        if (options.color) {
+            this.color = options.color;
+            this.element.style.backgroundColor = this.color;
+        }
+        if (options.drag !== undefined) {
+            this.drag = options.drag;
+            this.element.style.cursor = this.drag ? 'grab' : 'default';
+        }
+        if (options.resize !== undefined) {
+            this.resize = options.resize;
+            this.element.querySelectorAll('[data-resize]').forEach((handle) => {
+                ;
+                handle.style.cursor = this.resize ? 'ew-resize' : 'default';
+            });
+        }
+        if (options.start !== undefined || options.end !== undefined) {
+            this.start = options.start ?? this.start;
+            this.end = options.end ?? this.end;
+            this.renderPosition();
         }
-        if (end != null) {
-            region.end = end;
-            region.element.style.width = `${region.end - region.start}px`;
-            region.endTime = (end / this.wrapper.clientWidth) * this.wavesurfer.getDuration();
+    }
+    /** Remove the region */
+    remove() {
+        this.emit('remove');
+        this.element.remove();
+        // This violates the type but we want to clean up the DOM reference
+        // w/o having to have a nullable type of the element
+        this.element = null;
+    }
+}
+class RegionsPlugin extends BasePlugin {
+    /** Create an instance of RegionsPlugin */
+    constructor(options) {
+        super(options);
+        this.regions = [];
+        this.regionsContainer = this.initRegionsContainer();
+    }
+    /** Create an instance of RegionsPlugin */
+    static create(options) {
+        return new RegionsPlugin(options);
+    }
+    /** Called by wavesurfer, don't call manually */
+    init(params) {
+        super.init(params);
+        if (!this.wavesurfer || !this.wrapper) {
+            throw Error('WaveSurfer is not initialized');
         }
-        this.emit('region-updated', { region });
+        this.wrapper.appendChild(this.regionsContainer);
+    }
+    initRegionsContainer() {
+        const div = document.createElement('div');
+        div.setAttribute('style', `
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 3;
+      pointer-events: none;
+    `);
+        return div;
+    }
+    /** Get all created regions */
+    getRegions() {
+        return this.regions;
+    }
+    avoidOverlapping(region) {
+        if (!region.content)
+            return;
+        // Check that the label doesn't overlap with other labels
+        // If it does, push it down until it doesn't
+        const div = region.content;
+        const labelLeft = div.getBoundingClientRect().left;
+        const labelWidth = region.element.scrollWidth;
+        const overlap = this.regions
+            .filter((reg) => {
+            if (reg === region || !reg.content)
+                return false;
+            const left = reg.content.getBoundingClientRect().left;
+            const width = reg.element.scrollWidth;
+            return labelLeft < left + width && left < labelLeft + labelWidth;
+        })
+            .map((reg) => reg.content?.getBoundingClientRect().height || 0)
+            .reduce((sum, val) => sum + val, 0);
+        div.style.marginTop = `${overlap}px`;
     }
-    moveRegion(region, delta) {
-        this.updateRegion(region, region.start + delta, region.end + delta);
+    saveRegion(region) {
+        this.regionsContainer.appendChild(region.element);
+        this.avoidOverlapping(region);
+        this.regions.push(region);
+        this.emit('region-created', region);
+        const regionSubscriptions = [
+            region.on('update-end', () => {
+                this.avoidOverlapping(region);
+                this.emit('region-updated', region);
+            }),
+            region.on('play', () => {
+                this.wavesurfer?.play();
+                this.wavesurfer?.setTime(region.start);
+            }),
+            region.on('click', (e) => {
+                this.emit('region-clicked', region, e);
+            }),
+            // Remove the region from the list when it's removed
+            region.once('remove', () => {
+                regionSubscriptions.forEach((unsubscribe) => unsubscribe());
+                this.regions = this.regions.filter((reg) => reg !== region);
+            }),
+        ];
+        this.subscriptions.push(...regionSubscriptions);
     }
-    /** Create a region at a given start and end time, with an optional title */
-    add(startTime, endTime, title = '') {
+    /** Create a region with given parameters */
+    addRegion(options) {
+        if (!this.wavesurfer) {
+            throw Error('WaveSurfer is not initialized');
+        }
         const duration = this.wavesurfer.getDuration();
-        const width = this.wrapper.clientWidth;
-        const start = (startTime / duration) * width;
-        const end = (endTime / duration) * width;
-        const region = this.createRegion(start, end, title);
-        this.addRegion(region);
+        const region = new Region(options, duration);
+        if (!duration) {
+            this.subscriptions.push(this.wavesurfer.once('canplay', (duration) => {
+                region._setTotalDuration(duration);
+                this.saveRegion(region);
+            }));
+        }
+        else {
+            this.saveRegion(region);
+        }
         return region;
     }
-    /** Set the background color of a region */
-    setRegionColor(region, color) {
-        region.element.style.backgroundColor = color;
+    /** The same as addRegion but with spread params */
+    add(start, end, content, color) {
+        return this.addRegion({ start, end, content, color });
+    }
+    /**
+     * Enable creation of regions by dragging on an empty space on the waveform.
+     * Returns a function to disable the drag selection.
+     */
+    enableDragSelection(options) {
+        let region = null;
+        let startX = 0;
+        let sumDx = 0;
+        return makeDraggable(this.wrapper, 
+        // On mousedown
+        (x) => (startX = x), 
+        // On mousemove
+        (dx) => {
+            if (!this.wavesurfer || !this.wrapper)
+                return;
+            if (!region) {
+                const duration = this.wavesurfer.getDuration();
+                const box = this.wrapper.getBoundingClientRect();
+                let start = ((startX - box.left) / box.width) * duration;
+                let end = ((startX + dx - box.left) / box.width) * duration;
+                if (start > end)
+                    [start, end] = [end, start];
+                region = new Region({
+                    ...options,
+                    start,
+                    end,
+                }, duration);
+                this.regionsContainer.appendChild(region.element);
+            }
+            sumDx += dx;
+            if (region) {
+                const privateRegion = region;
+                privateRegion.onUpdate(dx, [sumDx > 0 ? 'end' : 'start']);
+            }
+        }, 
+        // On mouseup
+        () => {
+            if (region) {
+                this.saveRegion(region);
+                region = null;
+                sumDx = 0;
+                // Prevent a click event on the waveform
+                if (this.wavesurfer) {
+                    const { interact } = this.wavesurfer.options;
+                    if (interact) {
+                        this.wavesurfer.toggleInteraction(false);
+                        setTimeout(() => this.wavesurfer?.toggleInteraction(interact), 10);
+                    }
+                }
+            }
+        });
+    }
+    /** Remove all regions */
+    clearRegions() {
+        this.regions.forEach((region) => region.remove());
+    }
+    /** Destroy the plugin and clean up */
+    destroy() {
+        this.clearRegions();
+        super.destroy();
     }
 }
 export default RegionsPlugin;

package/dist/plugins/regions.min.js

@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.Regions=t():e.Regions=t()}(WaveSurfer,(()=>(()=>{"use strict";var e={284:(e,t,i)=>{i.d(t,{Z:()=>r});var n=i(139);class s extends n.Z{constructor(e){super(),this.subscriptions=[],this.options=e}init(e){this.wavesurfer=e.wavesurfer,this.container=e.container,this.wrapper=e.wrapper}destroy(){this.subscriptions.forEach((e=>e()))}}const r=s},139:(e,t,i)=>{i.d(t,{Z:()=>n});const n=class{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 i=this.on(e,t),n=this.on(e,(()=>{i(),n()}));return i}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)))}}}},t={};function i(n){var s=t[n];if(void 0!==s)return s.exports;var r=t[n]={exports:{}};return e[n](r,r.exports,i),r.exports}i.d=(e,t)=>{for(var n in t)i.o(t,n)&&!i.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:t[n]})},i.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t);var n={};return(()=>{i.d(n,{default:()=>a});var e=i(284),t=i(139);function s(e,t,i,n){if(!e)return()=>{};let s=0,r=!1;const o=e=>{r&&e.stopPropagation()},a=e=>{e.stopPropagation();let o=e.clientX;t(o);const a=e=>{const t=e.clientX,n=t-o;s+=n,o=t,Math.abs(s)>=5&&(r?i(n):(r=!0,i(s)))},h=()=>{s=0,n(),setTimeout((()=>r=!1),10),document.removeEventListener("mousemove",a),document.removeEventListener("mouseup",h)};document.addEventListener("mousemove",a),document.addEventListener("mouseup",h)};return e.addEventListener("click",o),e.addEventListener("mousedown",a),()=>{e.removeEventListener("click",o),e.removeEventListener("mousedown",a)}}class r extends t.Z{constructor(e,t){super(),this.totalDuration=t,this.id=e.id||Math.random().toString(32).slice(2),this.start=e.start,this.end=e.end??e.start,this.drag=e.drag??!0,this.resize=e.resize??!0,this.color=e.color??"rgba(0, 0, 0, 0.1)",this.element=this.initElement(e.content),this.renderPosition(),this.initMouseEvents()}initElement(e){const t=document.createElement("div"),i=this.start===this.end;if(t.id=this.id,t.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      padding: 0.2em ${i?.2:.4}em;\n      pointer-events: all;\n    `),e&&("string"==typeof e?(this.content=document.createElement("div"),this.content.textContent=e):this.content=e,t.appendChild(this.content)),!i){const e=document.createElement("div");e.setAttribute("data-resize","left"),e.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      `);const i=e.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",t.appendChild(e),t.appendChild(i)}return t}renderPosition(){const e=this.start/this.totalDuration,t=this.end/this.totalDuration;this.element.style.left=100*e+"%",this.element.style.width=100*(t-e)+"%"}initMouseEvents(){const{element:e}=this;e.addEventListener("click",(e=>this.emit("click",e))),e.addEventListener("mouseenter",(e=>this.emit("over",e))),e.addEventListener("mouseleave",(e=>this.emit("leave",e))),e.addEventListener("dblclick",(e=>this.emit("dblclick",e))),s(e,(()=>this.onStartMoving()),(e=>this.onMove(e)),(()=>this.onEndMoving())),s(e.querySelector('[data-resize="left"]'),(()=>null),(e=>this.onResize(e,"start")),(()=>this.onEndResizing())),s(e.querySelector('[data-resize="right"]'),(()=>null),(e=>this.onResize(e,"end")),(()=>this.onEndResizing()))}onStartMoving(){this.drag&&(this.element.style.cursor="grabbing")}onEndMoving(){this.drag&&(this.element.style.cursor="grab",this.emit("update-end"))}onUpdate(e,t){if(!this.element.parentElement)return;const i=e/this.element.parentElement.clientWidth*this.totalDuration;t.forEach((e=>{this[e]+=i,"start"===e?this.start=Math.max(0,Math.min(this.start,this.end)):this.end=Math.max(this.start,Math.min(this.end,this.totalDuration))})),this.renderPosition(),this.emit("update")}onMove(e){this.drag&&this.onUpdate(e,["start","end"])}onResize(e,t){this.resize&&this.onUpdate(e,[t])}onEndResizing(){this.resize&&this.emit("update-end")}_setTotalDuration(e){this.totalDuration=e,this.renderPosition()}play(){this.emit("play")}setOptions(e){e.color&&(this.color=e.color,this.element.style.backgroundColor=this.color),void 0!==e.drag&&(this.drag=e.drag,this.element.style.cursor=this.drag?"grab":"default"),void 0!==e.resize&&(this.resize=e.resize,this.element.querySelectorAll("[data-resize]").forEach((e=>{e.style.cursor=this.resize?"ew-resize":"default"}))),void 0===e.start&&void 0===e.end||(this.start=e.start??this.start,this.end=e.end??this.end,this.renderPosition())}remove(){this.emit("remove"),this.element.remove(),this.element=null}}class o extends e.Z{constructor(e){super(e),this.regions=[],this.regionsContainer=this.initRegionsContainer()}static create(e){return new o(e)}init(e){if(super.init(e),!this.wavesurfer||!this.wrapper)throw Error("WaveSurfer is not initialized");this.wrapper.appendChild(this.regionsContainer)}initRegionsContainer(){const e=document.createElement("div");return e.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    "),e}getRegions(){return this.regions}avoidOverlapping(e){if(!e.content)return;const t=e.content,i=t.getBoundingClientRect().left,n=e.element.scrollWidth,s=this.regions.filter((t=>{if(t===e||!t.content)return!1;const s=t.content.getBoundingClientRect().left,r=t.element.scrollWidth;return i<s+r&&s<i+n})).map((e=>e.content?.getBoundingClientRect().height||0)).reduce(((e,t)=>e+t),0);t.style.marginTop=`${s}px`}saveRegion(e){this.regionsContainer.appendChild(e.element),this.avoidOverlapping(e),this.regions.push(e),this.emit("region-created",e);const t=[e.on("update-end",(()=>{this.avoidOverlapping(e),this.emit("region-updated",e)})),e.on("play",(()=>{this.wavesurfer?.play(),this.wavesurfer?.setTime(e.start)})),e.on("click",(t=>{this.emit("region-clicked",e,t)})),e.once("remove",(()=>{t.forEach((e=>e())),this.regions=this.regions.filter((t=>t!==e))}))];this.subscriptions.push(...t)}addRegion(e){if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");const t=this.wavesurfer.getDuration(),i=new r(e,t);return t?this.saveRegion(i):this.subscriptions.push(this.wavesurfer.once("canplay",(e=>{i._setTotalDuration(e),this.saveRegion(i)}))),i}add(e,t,i,n){return this.addRegion({start:e,end:t,content:i,color:n})}enableDragSelection(e){let t=null,i=0,n=0;return s(this.wrapper,(e=>i=e),(s=>{if(this.wavesurfer&&this.wrapper){if(!t){const n=this.wavesurfer.getDuration(),o=this.wrapper.getBoundingClientRect();let a=(i-o.left)/o.width*n,h=(i+s-o.left)/o.width*n;a>h&&([a,h]=[h,a]),t=new r({...e,start:a,end:h},n),this.regionsContainer.appendChild(t.element)}n+=s,t&&t.onUpdate(s,[n>0?"end":"start"])}}),(()=>{if(t&&(this.saveRegion(t),t=null,n=0,this.wavesurfer)){const{interact:e}=this.wavesurfer.options;e&&(this.wavesurfer.toggleInteraction(!1),setTimeout((()=>this.wavesurfer?.toggleInteraction(e)),10))}}))}clearRegions(){this.regions.forEach((e=>e.remove()))}destroy(){this.clearRegions(),super.destroy()}}const a=o})(),n.default})()));

package/dist/plugins/spectrogram.d.ts

@@ -0,0 +1,24 @@
+import BasePlugin from '../base-plugin.js';
+export type SpectrogramPluginOptions = {
+    waveColor?: string;
+    lineWidth?: number;
+};
+export type SpectrogramPluginEvents = {
+    startRecording: void;
+    stopRecording: void;
+};
+declare class SpectrogramPlugin extends BasePlugin<SpectrogramPluginEvents, SpectrogramPluginOptions> {
+    private mediaSpectrogramer;
+    private recordedUrl;
+    static create(options?: SpectrogramPluginOptions): SpectrogramPlugin;
+    private loadBlob;
+    private processFrequencyData;
+    render(stream: MediaStream): () => void;
+    private cleanUp;
+    startSpectrograming(): Promise<void>;
+    isSpectrograming(): boolean;
+    stopSpectrograming(): void;
+    getSpectrogramedUrl(): string;
+    destroy(): void;
+}
+export default SpectrogramPlugin;