wavesurfer.js 7.0.0-alpha.3 → 7.0.0-alpha.30

package/dist/plugins/regions.js

@@ -1,147 +1,210 @@
 import BasePlugin from '../base-plugin.js';
 const MIN_WIDTH = 10;
+const defaultOptions = {
+    dragSelection: true,
+    draggable: true,
+    resizable: true,
+};
+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 {
+    dragStart = NaN;
+    regionsContainer;
+    regions = [];
+    createdRegion = null;
+    modifiedRegion = null;
+    isResizingLeft = false;
+    isMoving = false;
+    wasInteractive = true;
     /** 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.container.getBoundingClientRect().left;
-                if (dragEnd - this.dragStart >= MIN_WIDTH) {
-                    if (!this.createdRegion) {
-                        this.renderer.getContainer().style.pointerEvents = 'none';
-                        this.createdRegion = this.createRegion(this.dragStart, dragEnd);
-                    }
-                    else {
-                        this.updateRegion(this.createdRegion, this.dragStart, dragEnd);
-                    }
-                }
-            }
-        };
-        this.handleMouseUp = () => {
-            if (this.createdRegion) {
-                this.addRegion(this.createdRegion);
-                this.createdRegion = null;
-            }
-            this.modifiedRegion = null;
-            this.isMoving = false;
-            this.dragStart = NaN;
-            this.renderer.getContainer().style.pointerEvents = '';
-        };
-        this.container = this.initContainer();
-        const unsubscribeReady = this.wavesurfer.on('ready', () => {
-            const wrapper = this.renderer.getContainer();
-            wrapper.appendChild(this.container);
-            unsubscribeReady();
-        });
-        this.subscriptions.push(unsubscribeReady);
-        const wsContainer = this.renderer.getContainer();
-        wsContainer.addEventListener('mousedown', this.handleMouseDown);
+    constructor(options) {
+        super(options || {});
+        this.options = Object.assign({}, defaultOptions, options);
+        this.regionsContainer = this.initRegionsContainer();
+    }
+    static create(options) {
+        return new RegionsPlugin(options);
+    }
+    init(params) {
+        super.init(params);
+        if (!this.wavesurfer || !this.wrapper) {
+            throw Error('WaveSurfer is not initialized');
+        }
+        this.wrapper?.appendChild(this.regionsContainer);
+        this.wrapper.addEventListener('mousedown', this.handleMouseDown);
         document.addEventListener('mousemove', this.handleMouseMove);
         document.addEventListener('mouseup', this.handleMouseUp);
     }
-    /** Unmounts the regions */
+    /** Set options */
+    setOptions(options) {
+        this.options = { ...this.options, ...options };
+    }
+    /** Unmount */
     destroy() {
-        var _a;
-        this.renderer.getContainer().removeEventListener('mousedown', this.handleMouseDown);
+        this.wrapper?.removeEventListener('mousedown', this.handleMouseDown);
         document.removeEventListener('mousemove', this.handleMouseMove);
         document.removeEventListener('mouseup', this.handleMouseUp, true);
-        (_a = this.container) === null || _a === void 0 ? void 0 : _a.remove();
+        this.regionsContainer.remove();
         super.destroy();
     }
-    initContainer() {
-        const div = document.createElement('div');
-        div.style.position = 'absolute';
-        div.style.top = '0';
-        div.style.left = '0';
-        div.style.width = '100%';
-        div.style.height = '100%';
-        div.style.zIndex = '3';
-        div.style.pointerEvents = 'none';
-        return div;
+    initRegionsContainer() {
+        return el('div', {
+            position: 'absolute',
+            top: '0',
+            left: '0',
+            width: '100%',
+            height: '100%',
+            zIndex: '3',
+            pointerEvents: 'none',
+        });
     }
+    handleMouseDown = (e) => {
+        if (this.options.draggable || this.options.resizable || this.options.dragSelection) {
+            if (!this.wrapper)
+                return;
+            this.dragStart = e.clientX - this.wrapper.getBoundingClientRect().left;
+        }
+    };
+    handleMouseMove = (e) => {
+        if (!this.wrapper)
+            return;
+        const box = this.wrapper.getBoundingClientRect();
+        const { width } = box;
+        const dragEnd = e.clientX - box.left;
+        if (this.options.draggable && this.modifiedRegion && this.isMoving) {
+            this.moveRegion(this.modifiedRegion, (dragEnd - this.dragStart) / width);
+            this.dragStart = dragEnd;
+            return;
+        }
+        if (this.options.resizable && this.modifiedRegion) {
+            this.updateRegion(this.modifiedRegion, this.isResizingLeft ? dragEnd / width : undefined, this.isResizingLeft ? undefined : dragEnd / width);
+            return;
+        }
+        if (this.options.dragSelection && !isNaN(this.dragStart)) {
+            const dragEnd = e.clientX - this.regionsContainer.getBoundingClientRect().left;
+            if (dragEnd - this.dragStart >= MIN_WIDTH) {
+                if (!this.createdRegion) {
+                    this.wasInteractive = this.wavesurfer?.options.interact || true;
+                    this.wavesurfer?.toggleInteraction(false);
+                    this.createdRegion = this.createRegion(this.dragStart / width, dragEnd / width);
+                }
+                else {
+                    this.updateRegion(this.createdRegion, this.dragStart / width, dragEnd / width);
+                }
+            }
+        }
+    };
+    handleMouseUp = () => {
+        if (this.createdRegion) {
+            this.addRegion(this.createdRegion);
+            this.createdRegion = null;
+        }
+        this.modifiedRegion = null;
+        this.isMoving = false;
+        this.dragStart = NaN;
+        this.wavesurfer?.toggleInteraction(this.wasInteractive);
+    };
     createRegionElement(start, end, title = '') {
-        const el = document.createElement('div');
-        el.style.position = 'absolute';
-        el.style.left = `${start}px`;
-        el.style.width = `${end - start}px`;
-        el.style.height = '100%';
-        el.style.backgroundColor = 'rgba(0, 0, 0, 0.1)';
-        el.style.transition = 'background-color 0.2s ease';
-        el.style.cursor = 'move';
-        el.style.pointerEvents = 'all';
-        el.title = title;
-        const leftHandle = document.createElement('div');
-        leftHandle.style.position = 'absolute';
-        leftHandle.style.left = '0';
-        leftHandle.style.width = '6px';
-        leftHandle.style.height = '100%';
-        leftHandle.style.borderLeft = '2px solid rgba(0, 0, 0, 0.5)';
-        leftHandle.style.cursor = 'ew-resize';
-        leftHandle.style.pointerEvents = 'all';
-        el.appendChild(leftHandle);
-        const rightHandle = document.createElement('div');
-        rightHandle.style.position = 'absolute';
-        rightHandle.style.right = '0';
-        rightHandle.style.width = '6px';
-        rightHandle.style.height = '100%';
-        rightHandle.style.borderRight = '2px solid rgba(0, 0, 0, 0.5)';
-        rightHandle.style.cursor = 'ew-resize';
-        rightHandle.style.pointerEvents = 'all';
-        el.appendChild(rightHandle);
+        const noWidth = start === end;
+        const div = el('div', {
+            position: 'absolute',
+            left: `${start * 100}%`,
+            width: `${(end - start) * 100}%`,
+            height: '100%',
+            backgroundColor: noWidth ? '' : 'rgba(0, 0, 0, 0.1)',
+            borderRadius: '2px',
+            boxSizing: 'border-box',
+            borderLeft: noWidth ? '2px solid rgba(0, 0, 0, 0.5)' : '',
+            transition: 'background-color 0.2s ease',
+            cursor: this.options.draggable ? 'move' : '',
+            pointerEvents: 'all',
+            whiteSpace: noWidth ? 'nowrap' : '',
+            padding: '0.2em',
+        });
+        div.textContent = title;
+        const leftHandle = el('div', {
+            position: 'absolute',
+            left: '0',
+            top: '0',
+            width: '6px',
+            height: '100%',
+            cursor: this.options.resizable ? 'ew-resize' : '',
+            pointerEvents: 'all',
+            borderLeft: noWidth ? '' : '2px solid rgba(0, 0, 0, 0.5)',
+            borderRadius: '2px 0 0 2px',
+        });
+        div.appendChild(leftHandle);
+        const rightHandle = leftHandle.cloneNode();
+        style(rightHandle, {
+            left: '',
+            right: '0',
+            borderLeft: '',
+            borderRight: noWidth ? '' : '2px solid rgba(0, 0, 0, 0.5)',
+            borderRadius: '0 2px 2px 0',
+        });
+        div.appendChild(rightHandle);
         leftHandle.addEventListener('mousedown', (e) => {
+            if (!this.options.resizable)
+                return;
             e.stopPropagation();
-            this.modifiedRegion = this.regions.find((r) => r.element === el) || null;
+            this.modifiedRegion = this.regions.find((r) => r.element === div) || null;
             this.isResizingLeft = true;
             this.isMoving = false;
         });
         rightHandle.addEventListener('mousedown', (e) => {
+            if (!this.options.resizable)
+                return;
             e.stopPropagation();
-            this.modifiedRegion = this.regions.find((r) => r.element === el) || null;
+            this.modifiedRegion = this.regions.find((r) => r.element === div) || null;
             this.isResizingLeft = false;
             this.isMoving = false;
         });
-        el.addEventListener('mousedown', () => {
-            this.modifiedRegion = this.regions.find((r) => r.element === el) || null;
-            this.isMoving = true;
+        div.addEventListener('mousedown', () => {
+            if (!this.options.draggable)
+                return;
+            this.modifiedRegion = this.regions.find((r) => r.element === div) || null;
+            this.isMoving = this.modifiedRegion !== null;
         });
-        el.addEventListener('click', () => {
-            const region = this.regions.find((r) => r.element === el);
+        div.addEventListener('click', () => {
+            const region = this.regions.find((r) => r.element === div);
             if (region) {
                 this.emit('region-clicked', { region });
             }
         });
-        this.container.appendChild(el);
-        return el;
+        this.regionsContainer.appendChild(div);
+        // Check that the label doesn't overlap with other labels
+        // If it does, push it down
+        const labelLeft = div.getBoundingClientRect().left;
+        const labelWidth = div.scrollWidth;
+        const overlap = this.regions
+            .filter((reg) => {
+            const { left } = reg.element.getBoundingClientRect();
+            const width = reg.element.scrollWidth;
+            return labelLeft < left + width && left < labelLeft + labelWidth;
+        })
+            .map((reg) => parseFloat(reg.element.style.paddingTop))
+            .reduce((sum, val) => sum + val, 0);
+        if (overlap > 0) {
+            div.style.paddingTop = `${overlap + 1}em`;
+        }
+        return div;
     }
     createRegion(start, end, title = '') {
-        const duration = this.wavesurfer.getDuration();
-        const width = this.container.clientWidth;
+        const duration = this.wavesurfer?.getDuration() || 0;
         return {
             element: this.createRegionElement(start, end, title),
             start,
             end,
-            startTime: (start / width) * duration,
-            endTime: (end / width) * duration,
+            startTime: start * duration,
+            endTime: end * duration,
             title,
         };
     }
@@ -150,15 +213,17 @@ class RegionsPlugin extends BasePlugin {
         this.emit('region-created', { region });
     }
     updateRegion(region, start, end) {
+        const duration = this.wavesurfer?.getDuration() || 0;
         if (start != null) {
-            region.start = start !== null && start !== void 0 ? start : region.start;
-            region.element.style.left = `${region.start}px`;
-            region.startTime = (start / this.container.clientWidth) * this.wavesurfer.getDuration();
+            region.start = start;
+            region.element.style.left = `${region.start * 100}%`;
+            region.element.style.width = `${(region.end - region.start) * 100}%`;
+            region.startTime = start * duration;
         }
         if (end != null) {
             region.end = end;
-            region.element.style.width = `${region.end - region.start}px`;
-            region.endTime = (end / this.container.clientWidth) * this.wavesurfer.getDuration();
+            region.element.style.width = `${(region.end - region.start) * 100}%`;
+            region.endTime = end * duration;
         }
         this.emit('region-updated', { region });
     }
@@ -166,18 +231,29 @@ class RegionsPlugin extends BasePlugin {
         this.updateRegion(region, region.start + delta, region.end + delta);
     }
     /** Create a region at a given start and end time, with an optional title */
-    addRegionAtTime(startTime, endTime, title = '') {
-        const duration = this.wavesurfer.getDuration();
-        const width = this.container.clientWidth;
-        const start = (startTime / duration) * width;
-        const end = (endTime / duration) * width;
+    add(startTime, endTime, title = '', color = '') {
+        const duration = this.wavesurfer?.getDuration() || 0;
+        const start = startTime / duration;
+        const end = endTime / duration;
         const region = this.createRegion(start, end, title);
         this.addRegion(region);
+        if (color)
+            this.setRegionColor(region, color);
         return region;
     }
+    /** Remove a region */
+    remove(region) {
+        region.element.remove();
+        region.element = null;
+        this.regions = this.regions.filter((r) => r !== region);
+    }
     /** Set the background color of a region */
     setRegionColor(region, color) {
-        region.element.style.backgroundColor = color;
+        region.element.style[region.startTime === region.endTime ? 'borderColor' : 'backgroundColor'] = color;
+    }
+    /** Disable or enable mouse events for this region */
+    setRegionInteractive(region, isInteractive) {
+        region.element.style.pointerEvents = isInteractive ? 'all' : 'none';
     }
 }
 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:()=>o});var n=i(139);class s extends n.Z{wavesurfer;container;wrapper;subscriptions=[];options;constructor(e){super(),this.options=e}init(e){this.wavesurfer=e.wavesurfer,this.container=e.container,this.wrapper=e.wrapper}destroy(){this.subscriptions.forEach((e=>e()))}}const o=s},139:(e,t,i)=>{i.d(t,{Z:()=>n});const n=class{eventTarget;constructor(){this.eventTarget=new EventTarget}emit(e,t){const i=new CustomEvent(String(e),{detail:t});this.eventTarget.dispatchEvent(i)}on(e,t,i){const n=e=>{e instanceof CustomEvent&&t(e.detail)},s=String(e);return this.eventTarget.addEventListener(s,n,{once:i}),()=>this.eventTarget.removeEventListener(s,n)}once(e,t){return this.on(e,t,!0)}}}},t={};function i(n){var s=t[n];if(void 0!==s)return s.exports;var o=t[n]={exports:{}};return e[n](o,o.exports,i),o.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);const t={dragSelection:!0,draggable:!0,resizable:!0},s=(e,t)=>{for(const i in t)e.style[i]=t[i]||""},o=(e,t)=>{const i=document.createElement(e);return s(i,t),i};class r extends e.Z{dragStart=NaN;regionsContainer;regions=[];createdRegion=null;modifiedRegion=null;isResizingLeft=!1;isMoving=!1;wasInteractive=!0;constructor(e){super(e||{}),this.options=Object.assign({},t,e),this.regionsContainer=this.initRegionsContainer()}static create(e){return new r(e)}init(e){if(super.init(e),!this.wavesurfer||!this.wrapper)throw Error("WaveSurfer is not initialized");this.wrapper?.appendChild(this.regionsContainer),this.wrapper.addEventListener("mousedown",this.handleMouseDown),document.addEventListener("mousemove",this.handleMouseMove),document.addEventListener("mouseup",this.handleMouseUp)}setOptions(e){this.options={...this.options,...e}}destroy(){this.wrapper?.removeEventListener("mousedown",this.handleMouseDown),document.removeEventListener("mousemove",this.handleMouseMove),document.removeEventListener("mouseup",this.handleMouseUp,!0),this.regionsContainer.remove(),super.destroy()}initRegionsContainer(){return o("div",{position:"absolute",top:"0",left:"0",width:"100%",height:"100%",zIndex:"3",pointerEvents:"none"})}handleMouseDown=e=>{if(this.options.draggable||this.options.resizable||this.options.dragSelection){if(!this.wrapper)return;this.dragStart=e.clientX-this.wrapper.getBoundingClientRect().left}};handleMouseMove=e=>{if(!this.wrapper)return;const t=this.wrapper.getBoundingClientRect(),{width:i}=t,n=e.clientX-t.left;if(this.options.draggable&&this.modifiedRegion&&this.isMoving)return this.moveRegion(this.modifiedRegion,(n-this.dragStart)/i),void(this.dragStart=n);if(this.options.resizable&&this.modifiedRegion)this.updateRegion(this.modifiedRegion,this.isResizingLeft?n/i:void 0,this.isResizingLeft?void 0:n/i);else if(this.options.dragSelection&&!isNaN(this.dragStart)){const t=e.clientX-this.regionsContainer.getBoundingClientRect().left;t-this.dragStart>=10&&(this.createdRegion?this.updateRegion(this.createdRegion,this.dragStart/i,t/i):(this.wasInteractive=this.wavesurfer?.options.interact||!0,this.wavesurfer?.toggleInteraction(!1),this.createdRegion=this.createRegion(this.dragStart/i,t/i)))}};handleMouseUp=()=>{this.createdRegion&&(this.addRegion(this.createdRegion),this.createdRegion=null),this.modifiedRegion=null,this.isMoving=!1,this.dragStart=NaN,this.wavesurfer?.toggleInteraction(this.wasInteractive)};createRegionElement(e,t,i=""){const n=e===t,r=o("div",{position:"absolute",left:100*e+"%",width:100*(t-e)+"%",height:"100%",backgroundColor:n?"":"rgba(0, 0, 0, 0.1)",borderRadius:"2px",boxSizing:"border-box",borderLeft:n?"2px solid rgba(0, 0, 0, 0.5)":"",transition:"background-color 0.2s ease",cursor:this.options.draggable?"move":"",pointerEvents:"all",whiteSpace:n?"nowrap":"",padding:"0.2em"});r.textContent=i;const a=o("div",{position:"absolute",left:"0",top:"0",width:"6px",height:"100%",cursor:this.options.resizable?"ew-resize":"",pointerEvents:"all",borderLeft:n?"":"2px solid rgba(0, 0, 0, 0.5)",borderRadius:"2px 0 0 2px"});r.appendChild(a);const d=a.cloneNode();s(d,{left:"",right:"0",borderLeft:"",borderRight:n?"":"2px solid rgba(0, 0, 0, 0.5)",borderRadius:"0 2px 2px 0"}),r.appendChild(d),a.addEventListener("mousedown",(e=>{this.options.resizable&&(e.stopPropagation(),this.modifiedRegion=this.regions.find((e=>e.element===r))||null,this.isResizingLeft=!0,this.isMoving=!1)})),d.addEventListener("mousedown",(e=>{this.options.resizable&&(e.stopPropagation(),this.modifiedRegion=this.regions.find((e=>e.element===r))||null,this.isResizingLeft=!1,this.isMoving=!1)})),r.addEventListener("mousedown",(()=>{this.options.draggable&&(this.modifiedRegion=this.regions.find((e=>e.element===r))||null,this.isMoving=null!==this.modifiedRegion)})),r.addEventListener("click",(()=>{const e=this.regions.find((e=>e.element===r));e&&this.emit("region-clicked",{region:e})})),this.regionsContainer.appendChild(r);const h=r.getBoundingClientRect().left,l=r.scrollWidth,g=this.regions.filter((e=>{const{left:t}=e.element.getBoundingClientRect(),i=e.element.scrollWidth;return h<t+i&&t<h+l})).map((e=>parseFloat(e.element.style.paddingTop))).reduce(((e,t)=>e+t),0);return g>0&&(r.style.paddingTop=`${g+1}em`),r}createRegion(e,t,i=""){const n=this.wavesurfer?.getDuration()||0;return{element:this.createRegionElement(e,t,i),start:e,end:t,startTime:e*n,endTime:t*n,title:i}}addRegion(e){this.regions.push(e),this.emit("region-created",{region:e})}updateRegion(e,t,i){const n=this.wavesurfer?.getDuration()||0;null!=t&&(e.start=t,e.element.style.left=100*e.start+"%",e.element.style.width=100*(e.end-e.start)+"%",e.startTime=t*n),null!=i&&(e.end=i,e.element.style.width=100*(e.end-e.start)+"%",e.endTime=i*n),this.emit("region-updated",{region:e})}moveRegion(e,t){this.updateRegion(e,e.start+t,e.end+t)}add(e,t,i="",n=""){const s=this.wavesurfer?.getDuration()||0,o=e/s,r=t/s,a=this.createRegion(o,r,i);return this.addRegion(a),n&&this.setRegionColor(a,n),a}remove(e){e.element.remove(),e.element=null,this.regions=this.regions.filter((t=>t!==e))}setRegionColor(e,t){e.element.style[e.startTime===e.endTime?"borderColor":"backgroundColor"]=t}setRegionInteractive(e,t){e.element.style.pointerEvents=t?"all":"none"}}const a=r})(),n.default})()));

package/dist/plugins/timeline.d.ts

@@ -0,0 +1,38 @@
+import BasePlugin from '../base-plugin.js';
+import type { WaveSurferPluginParams } from '../wavesurfer.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;
+    /** 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;
+};
+declare const defaultOptions: {
+    height: number;
+};
+export type TimelinePluginEvents = {
+    ready: void;
+};
+declare class TimelinePlugin extends BasePlugin<TimelinePluginEvents, TimelinePluginOptions> {
+    private timelineWrapper;
+    protected options: TimelinePluginOptions & typeof defaultOptions;
+    constructor(options: TimelinePluginOptions);
+    static create(options: TimelinePluginOptions): TimelinePlugin;
+    init(params: WaveSurferPluginParams): void;
+    /** Unmount */
+    destroy(): void;
+    private initTimelineWrapper;
+    private formatTime;
+    private defaultTimeInterval;
+    defaultPrimaryLabelInterval(pxPerSec: number): number;
+    defaultSecondaryLabelInterval(pxPerSec: number): number;
+    private initTimeline;
+}
+export default TimelinePlugin;

package/dist/plugins/timeline.js

@@ -0,0 +1,134 @@
+import BasePlugin from '../base-plugin.js';
+const defaultOptions = {
+    height: 20,
+};
+class TimelinePlugin extends BasePlugin {
+    timelineWrapper;
+    options;
+    constructor(options) {
+        super(options);
+        this.options = Object.assign({}, defaultOptions, options);
+        this.timelineWrapper = this.initTimelineWrapper();
+    }
+    static create(options) {
+        return new TimelinePlugin(options);
+    }
+    init(params) {
+        super.init(params);
+        if (!this.wavesurfer || !this.wrapper) {
+            throw Error('WaveSurfer is not initialized');
+        }
+        const container = this.options.container ?? this.wrapper;
+        container.appendChild(this.timelineWrapper);
+        if (this.options.duration) {
+            this.initTimeline(this.options.duration);
+        }
+        else {
+            this.subscriptions.push(this.wavesurfer.on('decode', ({ duration }) => {
+                this.initTimeline(duration);
+            }));
+        }
+    }
+    /** Unmount */
+    destroy() {
+        this.timelineWrapper.remove();
+        super.destroy();
+    }
+    initTimelineWrapper() {
+        return document.createElement('div');
+    }
+    formatTime(seconds) {
+        if (seconds / 60 > 1) {
+            // calculate minutes and seconds from seconds count
+            const minutes = Math.round(seconds / 60);
+            seconds = Math.round(seconds % 60);
+            const paddedSeconds = `${seconds < 10 ? '0' : ''}${seconds}`;
+            return `${minutes}:${paddedSeconds}`;
+        }
+        const rounded = Math.round(seconds * 1000) / 1000;
+        return `${rounded}`;
+    }
+    // Return how many seconds should be between each notch
+    defaultTimeInterval(pxPerSec) {
+        if (pxPerSec >= 25) {
+            return 1;
+        }
+        else if (pxPerSec * 5 >= 25) {
+            return 5;
+        }
+        else if (pxPerSec * 15 >= 25) {
+            return 15;
+        }
+        return Math.ceil(0.5 / pxPerSec) * 60;
+    }
+    // Return the cadence of notches that get labels in the primary color.
+    defaultPrimaryLabelInterval(pxPerSec) {
+        if (pxPerSec >= 25) {
+            return 10;
+        }
+        else if (pxPerSec * 5 >= 25) {
+            return 6;
+        }
+        else if (pxPerSec * 15 >= 25) {
+            return 4;
+        }
+        return 4;
+    }
+    // Return the cadence of notches that get labels in the secondary color.
+    defaultSecondaryLabelInterval(pxPerSec) {
+        if (pxPerSec >= 25) {
+            return 5;
+        }
+        else if (pxPerSec * 5 >= 25) {
+            return 2;
+        }
+        else if (pxPerSec * 15 >= 25) {
+            return 2;
+        }
+        return 2;
+    }
+    initTimeline(duration) {
+        const width = Math.round(this.timelineWrapper.scrollWidth * devicePixelRatio);
+        const pxPerSec = width / duration;
+        const timeInterval = this.options.timeInterval ?? this.defaultTimeInterval(pxPerSec);
+        const primaryLabelInterval = this.options.primaryLabelInterval ?? this.defaultPrimaryLabelInterval(pxPerSec);
+        const secondaryLabelInterval = this.options.secondaryLabelInterval ?? this.defaultSecondaryLabelInterval(pxPerSec);
+        const timeline = document.createElement('div');
+        timeline.setAttribute('style', `
+      height: ${this.options.height}px;
+      overflow: hidden;
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-end;
+      font-size: ${this.options.height / 2}px;
+      white-space: nowrap;
+    `);
+        const notchEl = document.createElement('div');
+        notchEl.setAttribute('style', `
+      width: 1px;
+      height: 50%;
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-end;
+      overflow: visible;
+      border-left: 1px solid currentColor;
+      opacity: 0.25;
+    `);
+        for (let i = 0; i < duration; i += timeInterval) {
+            const notch = notchEl.cloneNode();
+            const isPrimary = i % primaryLabelInterval === 0;
+            const isSecondary = i % secondaryLabelInterval === 0;
+            if (isPrimary || isSecondary) {
+                notch.style.height = '100%';
+                notch.style.textIndent = '3px';
+                notch.textContent = this.formatTime(i);
+                if (isPrimary)
+                    notch.style.opacity = '1';
+            }
+            timeline.appendChild(notch);
+        }
+        this.timelineWrapper.appendChild(timeline);
+        this.emit('ready');
+    }
+}
+export default TimelinePlugin;

package/dist/plugins/timeline.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.Timeline=t():e.Timeline=t()}(WaveSurfer,(()=>(()=>{"use strict";var e={284:(e,t,i)=>{i.d(t,{Z:()=>s});var n=i(139);class r extends n.Z{wavesurfer;container;wrapper;subscriptions=[];options;constructor(e){super(),this.options=e}init(e){this.wavesurfer=e.wavesurfer,this.container=e.container,this.wrapper=e.wrapper}destroy(){this.subscriptions.forEach((e=>e()))}}const s=r},139:(e,t,i)=>{i.d(t,{Z:()=>n});const n=class{eventTarget;constructor(){this.eventTarget=new EventTarget}emit(e,t){const i=new CustomEvent(String(e),{detail:t});this.eventTarget.dispatchEvent(i)}on(e,t,i){const n=e=>{e instanceof CustomEvent&&t(e.detail)},r=String(e);return this.eventTarget.addEventListener(r,n,{once:i}),()=>this.eventTarget.removeEventListener(r,n)}once(e,t){return this.on(e,t,!0)}}}},t={};function i(n){var r=t[n];if(void 0!==r)return r.exports;var s=t[n]={exports:{}};return e[n](s,s.exports,i),s.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:()=>s});var e=i(284);const t={height:20};class r extends e.Z{timelineWrapper;options;constructor(e){super(e),this.options=Object.assign({},t,e),this.timelineWrapper=this.initTimelineWrapper()}static create(e){return new r(e)}init(e){if(super.init(e),!this.wavesurfer||!this.wrapper)throw Error("WaveSurfer is not initialized");(this.options.container??this.wrapper).appendChild(this.timelineWrapper),this.options.duration?this.initTimeline(this.options.duration):this.subscriptions.push(this.wavesurfer.on("decode",(({duration:e})=>{this.initTimeline(e)})))}destroy(){this.timelineWrapper.remove(),super.destroy()}initTimelineWrapper(){return document.createElement("div")}formatTime(e){return e/60>1?`${Math.round(e/60)}:${(e=Math.round(e%60))<10?"0":""}${e}`:""+Math.round(1e3*e)/1e3}defaultTimeInterval(e){return e>=25?1:5*e>=25?5:15*e>=25?15:60*Math.ceil(.5/e)}defaultPrimaryLabelInterval(e){return e>=25?10:5*e>=25?6:4}defaultSecondaryLabelInterval(e){return e>=25?5:2}initTimeline(e){const t=Math.round(this.timelineWrapper.scrollWidth*devicePixelRatio)/e,i=this.options.timeInterval??this.defaultTimeInterval(t),n=this.options.primaryLabelInterval??this.defaultPrimaryLabelInterval(t),r=this.options.secondaryLabelInterval??this.defaultSecondaryLabelInterval(t),s=document.createElement("div");s.setAttribute("style",`\n      height: ${this.options.height}px;\n      overflow: hidden;\n      display: flex;\n      justify-content: space-between;\n      align-items: flex-end;\n      font-size: ${this.options.height/2}px;\n      white-space: nowrap;\n    `);const o=document.createElement("div");o.setAttribute("style","\n      width: 1px;\n      height: 50%;\n      display: flex;\n      flex-direction: column;\n      justify-content: flex-end;\n      overflow: visible;\n      border-left: 1px solid currentColor;\n      opacity: 0.25;\n    ");for(let t=0;t<e;t+=i){const e=o.cloneNode(),i=t%n==0;(i||t%r==0)&&(e.style.height="100%",e.style.textIndent="3px",e.textContent=this.formatTime(t),i&&(e.style.opacity="1")),s.appendChild(e)}this.timelineWrapper.appendChild(s),this.emit("ready")}}const s=r})(),n.default})()));

package/dist/renderer.d.ts

@@ -1,13 +1,20 @@
 import EventEmitter from './event-emitter.js';
-type RendererOptions = {
+type RendererRequiredParams = {
     container: HTMLElement | string | null;
+};
+export type RendererStyleOptions = {
     height: number;
     waveColor: string;
     progressColor: string;
+    cursorColor?: string;
+    cursorWidth: number;
     minPxPerSec: number;
+    fillParent: boolean;
     barWidth?: number;
     barGap?: number;
     barRadius?: number;
+    hideScrollbar?: boolean;
+    autoCenter?: boolean;
 };
 type RendererEvents = {
     click: {
@@ -18,18 +25,24 @@ declare class Renderer extends EventEmitter<RendererEvents> {
     private options;
     private container;
     private scrollContainer;
-    private mainCanvas;
-    private progressCanvas;
-    private cursor;
-    private ctx;
-    constructor(options: RendererOptions);
+    private wrapper;
+    private canvasWrapper;
+    private progressWrapper;
+    private timeout;
+    private isScrolling;
+    private audioData;
+    private resizeObserver;
+    constructor(params: RendererRequiredParams, options: RendererStyleOptions);
+    private initHtml;
+    setOptions(options: RendererStyleOptions): void;
+    getContainer(): HTMLElement;
+    getWrapper(): HTMLElement;
     destroy(): void;
-    private renderLinePeaks;
-    private renderBarPeaks;
-    private createProgressMask;
-    render(channelData: Float32Array[], duration: number): void;
-    zoom(channelData: Float32Array[], duration: number, minPxPerSec: number): void;
+    private delay;
+    private renderPeaks;
+    render(audioData: AudioBuffer): void;
+    reRender(): void;
+    zoom(minPxPerSec: number): void;
     renderProgress(progress: number, autoCenter?: boolean): void;
-    getContainer(): HTMLElement;
 }
 export default Renderer;