wavesurfer.js 7.0.0-beta.12 → 7.0.0-beta.14

package/README.md

@@ -33,7 +33,12 @@ Alternatively, import it from a CDN as a ES6 module:
 <script type="module">
   import WaveSurfer from 'https://unpkg.com/wavesurfer.js@beta'
 
-  const wavesurfer = WaveSurfer.create({ ... })
+  const wavesurfer = WaveSurfer.create({
+    container: '#waveform',
+    waveColor: '#4F4A85',
+    progressColor: '#383351',
+    url: '/audio.mp3',
+  })
 </script>
 ```
 
@@ -73,6 +78,7 @@ The "official" plugins have been completely rewritten and enhanced:
  * [Envelope](https://wavesurfer-js.org/examples/#envelope.js) – a graphical interface to add fade-in and -out effects and control volume
  * [Record](https://wavesurfer-js.org/examples/#record.js) – records audio from the microphone and renders a waveform
  * [Spectrogram](https://wavesurfer-js.org/examples/#spectrogram.js) – visualization of an audio frequency spectrum (written by @akreal)
+  * [Hover](https://wavesurfer-js.org/examples/#hover.js) – shows a vertical line and timestmap on waveform hover
 
 ## CSS styling
 
@@ -99,8 +105,8 @@ Most options, events, and methods are similar to those in previous versions.
 ### Notable differences
  * The `backend` option is removed – [HTML5 audio (or video) is the only playback mechanism](https://github.com/katspaugh/wavesurfer.js/discussions/2762#discussioncomment-5669347). However, you can still connect wavesurfer to Web Audio via `MediaElementSourceNode`. See this [example](https://wavesurfer-js.org/examples/#webaudio.js).
  * The Markers plugin is removed – use the Regions plugin with just a `startTime`.
- * No Microphone plugn – superseded by the new Record plugin with more features.
- * No Cursor and Playhead plugins yet – to be done.
+ * No Microphone plugin – superseded by the new Record plugin with more features.
+ * The Cursor plugin is replaced by the Hover plugin
 
 ### Removed options
  * `backend`, `audioContext`, `closeAudioContext', 'audioScriptProcessor` – there's no Web Audio backend, so no AudioContext

package/dist/base-plugin.d.ts

@@ -1,7 +1,10 @@
 import EventEmitter, { type GeneralEventTypes } from './event-emitter.js';
 import type WaveSurfer from './wavesurfer.js';
-export type GenericPlugin = BasePlugin<GeneralEventTypes, unknown>;
-export declare class BasePlugin<EventTypes extends GeneralEventTypes, Options> extends EventEmitter<EventTypes> {
+export type BasePluginEvents = {
+    destroy: [];
+} & GeneralEventTypes;
+export type GenericPlugin = BasePlugin<BasePluginEvents, unknown>;
+export declare class BasePlugin<EventTypes extends BasePluginEvents, Options> extends EventEmitter<EventTypes> {
     protected wavesurfer?: WaveSurfer;
     protected subscriptions: (() => void)[];
     protected options: Options;

package/dist/base-plugin.js

@@ -14,6 +14,7 @@ export class BasePlugin extends EventEmitter {
         this.onInit();
     }
     destroy() {
+        this.emit('destroy');
         this.subscriptions.forEach((unsubscribe) => unsubscribe());
     }
 }

package/dist/decoder.js

@@ -1,9 +1,20 @@
+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());
+    });
+};
 /** Decode an array buffer into an audio buffer */
-async function decode(audioData, sampleRate) {
-    const audioCtx = new AudioContext({ sampleRate });
-    const decode = audioCtx.decodeAudioData(audioData);
-    decode.finally(() => audioCtx.close());
-    return decode;
+function decode(audioData, sampleRate) {
+    return __awaiter(this, void 0, void 0, function* () {
+        const audioCtx = new AudioContext({ sampleRate });
+        const decode = audioCtx.decodeAudioData(audioData);
+        decode.finally(() => audioCtx.close());
+        return decode;
+    });
 }
 /** Normalize peaks to -1..1 */
 function normalize(channelData) {
@@ -36,7 +47,7 @@ function createBuffer(channelData, duration) {
         length: channelData[0].length,
         sampleRate: channelData[0].length / duration,
         numberOfChannels: channelData.length,
-        getChannelData: (i) => channelData?.[i],
+        getChannelData: (i) => channelData === null || channelData === void 0 ? void 0 : channelData[i],
         copyFromChannel: AudioBuffer.prototype.copyFromChannel,
         copyToChannel: AudioBuffer.prototype.copyToChannel,
     };

package/dist/draggable.js

@@ -19,7 +19,7 @@ export function makeDraggable(element, onDrag, onStart, onEnd, threshold = 5) {
                 const { left, top } = element.getBoundingClientRect();
                 if (!isDragging) {
                     isDragging = true;
-                    onStart?.(startX - left, startY - top);
+                    onStart === null || onStart === void 0 ? void 0 : onStart(startX - left, startY - top);
                 }
                 onDrag(x - startX, y - startY, x - left, y - top);
                 startX = x;
@@ -34,11 +34,20 @@ export function makeDraggable(element, onDrag, onStart, onEnd, threshold = 5) {
         };
         const up = () => {
             if (isDragging) {
-                onEnd?.();
+                onEnd === null || onEnd === void 0 ? void 0 : onEnd();
             }
             unsub();
         };
+        // Prevent scrolling on touch devices
+        const touchMove = (e) => e.preventDefault();
+        const touchOptions = { passive: false };
+        document.addEventListener('touchmove', touchMove, touchOptions);
+        document.addEventListener('pointermove', move);
+        document.addEventListener('pointerup', up);
+        document.addEventListener('pointerleave', up);
+        document.addEventListener('click', click, true);
         unsub = () => {
+            document.removeEventListener('touchmove', touchMove, touchOptions);
             document.removeEventListener('pointermove', move);
             document.removeEventListener('pointerup', up);
             document.removeEventListener('pointerleave', up);
@@ -46,10 +55,6 @@ export function makeDraggable(element, onDrag, onStart, onEnd, threshold = 5) {
                 document.removeEventListener('click', click, true);
             }, 10);
         };
-        document.addEventListener('pointermove', move);
-        document.addEventListener('pointerup', up);
-        document.addEventListener('pointerleave', up);
-        document.addEventListener('click', click, true);
     };
     element.addEventListener('pointerdown', down);
     return () => {

package/dist/fetcher.js

@@ -1,5 +1,16 @@
-async function fetchBlob(url, init) {
-    return fetch(url, init).then((response) => response.blob());
+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());
+    });
+};
+function fetchBlob(url, init) {
+    return __awaiter(this, void 0, void 0, function* () {
+        return fetch(url, init).then((response) => response.blob());
+    });
 }
 const Fetcher = {
     fetchBlob,

package/dist/plugins/envelope.d.ts

@@ -1,7 +1,7 @@
 /**
  * Envelope is a visual UI for controlling the audio volume and add fade-in and fade-out effects.
  */
-import BasePlugin from '../base-plugin.js';
+import BasePlugin, { type BasePluginEvents } from '../base-plugin.js';
 export type EnvelopePluginOptions = {
     fadeInStart?: number;
     fadeInEnd?: number;
@@ -26,7 +26,7 @@ declare const defaultOptions: {
     dragPointStroke: string;
 };
 type Options = EnvelopePluginOptions & typeof defaultOptions;
-export type EnvelopePluginEvents = {
+export type EnvelopePluginEvents = BasePluginEvents & {
     'fade-in-change': [time: number];
     'fade-out-change': [time: number];
     'volume-change': [volume: number];
@@ -60,11 +60,19 @@ export declare class EnvelopePlugin extends BasePlugin<EnvelopePluginEvents, Env
      * @param moveFadeInEnd Whether to move the drag point to the new time (default: false)
      */
     setStartTime(time: number, moveFadeInEnd?: boolean): void;
-    /** Set the fade-in end time.
-     * @param time The time (in seconds) to set the fade-in end time to
+    /** Set the fade-out end time.
+     * @param time The time (in seconds) to set the fade-out end time to
      * @param moveFadeOutStart Whether to move the drag point to the new time (default: false)
      */
     setEndTime(time: number, moveFadeOutStart?: boolean): void;
+    /** Set the fade-in end time.
+     * @param time The time (in seconds) to set the fade-in end time to
+     */
+    setFadeInEnd(time: number): void;
+    /** Set the fade-out start time.
+     * @param time The time (in seconds) to set the fade-out start time to
+     */
+    setFadeOutStart(time: number): void;
     /** Set the volume of the audio */
     setVolume(volume: number): void;
 }

package/dist/plugins/envelope.js

@@ -121,6 +121,7 @@ class Polyline extends EventEmitter {
 }
 export class EnvelopePlugin extends BasePlugin {
     constructor(options) {
+        var _a;
         super(options);
         this.polyline = null;
         this.audioContext = null;
@@ -134,13 +135,14 @@ export class EnvelopePlugin extends BasePlugin {
         this.options.lineColor = this.options.lineColor || defaultOptions.lineColor;
         this.options.dragPointFill = this.options.dragPointFill || defaultOptions.dragPointFill;
         this.options.dragPointStroke = this.options.dragPointStroke || defaultOptions.dragPointStroke;
-        this.volume = this.options.volume ?? 1;
+        this.volume = (_a = this.options.volume) !== null && _a !== void 0 ? _a : 1;
     }
     static create(options) {
         return new EnvelopePlugin(options);
     }
     destroy() {
-        this.polyline?.destroy();
+        var _a;
+        (_a = this.polyline) === null || _a === void 0 ? void 0 : _a.destroy();
         super.destroy();
     }
     /** Called by wavesurfer, don't call manually */
@@ -152,7 +154,8 @@ export class EnvelopePlugin extends BasePlugin {
         this.initSvg();
         this.initFadeEffects();
         this.subscriptions.push(this.wavesurfer.on('redraw', () => {
-            const duration = this.wavesurfer?.getDuration();
+            var _a;
+            const duration = (_a = this.wavesurfer) === null || _a === void 0 ? void 0 : _a.getDuration();
             if (!duration)
                 return;
             this.options.fadeInStart = this.options.fadeInStart || 0;
@@ -170,7 +173,8 @@ export class EnvelopePlugin extends BasePlugin {
         this.subscriptions.push(this.polyline.on('line-move', (relativeY) => {
             this.setVolume(this.naturalVolume(relativeY));
         }), this.polyline.on('point-move', (index, relativeX) => {
-            const duration = this.wavesurfer?.getDuration() || 0;
+            var _a;
+            const duration = ((_a = this.wavesurfer) === null || _a === void 0 ? void 0 : _a.getDuration()) || 0;
             const newTime = relativeX * duration;
             // Fade-in end point
             if (index === 1) {
@@ -204,10 +208,11 @@ export class EnvelopePlugin extends BasePlugin {
         });
     }
     initWebAudio() {
-        const audio = this.wavesurfer?.getMediaElement();
+        var _a, _b;
+        const audio = (_a = this.wavesurfer) === null || _a === void 0 ? void 0 : _a.getMediaElement();
         if (!audio)
             return null;
-        this.volume = this.options.volume ?? audio.volume;
+        this.volume = (_b = this.options.volume) !== null && _b !== void 0 ? _b : audio.volume;
         // Create an AudioContext
         const audioContext = new window.AudioContext();
         // Create a GainNode for controlling the volume
@@ -241,9 +246,10 @@ export class EnvelopePlugin extends BasePlugin {
         if (!this.audioContext || !this.wavesurfer)
             return;
         const unsub = this.wavesurfer.on('timeupdate', (currentTime) => {
+            var _a;
             if (!this.audioContext || !this.gainNode)
                 return;
-            if (!this.wavesurfer?.isPlaying())
+            if (!((_a = this.wavesurfer) === null || _a === void 0 ? void 0 : _a.isPlaying()))
                 return;
             if (this.audioContext.state === 'suspended') {
                 this.audioContext.resume();
@@ -303,8 +309,8 @@ export class EnvelopePlugin extends BasePlugin {
         this.options.fadeInStart = time;
         this.renderPolyline();
     }
-    /** Set the fade-in end time.
-     * @param time The time (in seconds) to set the fade-in end time to
+    /** Set the fade-out end time.
+     * @param time The time (in seconds) to set the fade-out end time to
      * @param moveFadeOutStart Whether to move the drag point to the new time (default: false)
      */
     setEndTime(time, moveFadeOutStart = false) {
@@ -315,6 +321,20 @@ export class EnvelopePlugin extends BasePlugin {
         this.options.fadeOutEnd = time;
         this.renderPolyline();
     }
+    /** Set the fade-in end time.
+     * @param time The time (in seconds) to set the fade-in end time to
+     */
+    setFadeInEnd(time) {
+        this.options.fadeInEnd = time;
+        this.renderPolyline();
+    }
+    /** Set the fade-out start time.
+     * @param time The time (in seconds) to set the fade-out start time to
+     */
+    setFadeOutStart(time) {
+        this.options.fadeOutStart = time;
+        this.renderPolyline();
+    }
     /** Set the volume of the audio */
     setVolume(volume) {
         this.volume = volume;

package/dist/plugins/envelope.min.cjs

@@ -1 +1 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.Envelope=e():t.Envelope=e()}("undefined"!=typeof WaveSurfer?WaveSurfer:this,(()=>(()=>{"use strict";var t={d:(e,i)=>{for(var n in i)t.o(i,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:i[n]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e)},e={};t.d(e,{default:()=>a});const i=class{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)))}},n=class extends i{constructor(t){super(),this.subscriptions=[],this.options=t}onInit(){}init(t){this.wavesurfer=t,this.onInit()}destroy(){this.subscriptions.forEach((t=>t()))}},s={fadeInStart:0,fadeOutEnd:0,fadeInEnd:0,fadeOutStart:0,lineWidth:4,lineColor:"rgba(0, 0, 255, 0.5)",dragPointSize:10,dragPointFill:"rgba(255, 255, 255, 0.8)",dragPointStroke:"rgba(255, 255, 255, 0.8)"};class o extends i{constructor(t,e){super(),this.top=0,this.padding=t.dragPointSize/2+1;const i=document.createElementNS("http://www.w3.org/2000/svg","svg");i.setAttribute("width","100%"),i.setAttribute("height","100%"),i.setAttribute("viewBox","0 0 0 0"),i.setAttribute("preserveAspectRatio","none"),i.setAttribute("style","position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none;"),i.setAttribute("part","envelope"),this.svg=i;const n=document.createElementNS("http://www.w3.org/2000/svg","polyline");n.setAttribute("points","0,0 0,0 0,0 0,0"),n.setAttribute("stroke",t.lineColor),n.setAttribute("stroke-width",t.lineWidth),n.setAttribute("fill","none"),n.setAttribute("style","pointer-events: none;"),n.setAttribute("part","polyline"),i.appendChild(n);const s=document.createElementNS("http://www.w3.org/2000/svg","line");s.setAttribute("stroke","transparent"),s.setAttribute("stroke-width",(3*t.lineWidth).toString()),s.setAttribute("style","cursor: ns-resize; pointer-events: all;"),s.setAttribute("part","line"),i.appendChild(s),[0,1].forEach((()=>{const e=document.createElementNS("http://www.w3.org/2000/svg","circle");e.setAttribute("r",(t.dragPointSize/2).toString()),e.setAttribute("fill",t.dragPointFill),e.setAttribute("stroke",t.dragPointStroke||t.dragPointFill),e.setAttribute("stroke-width","2"),e.setAttribute("style","cursor: ew-resize; pointer-events: all;"),e.setAttribute("part","circle"),i.appendChild(e)})),e.appendChild(i);{const t=t=>{const e=this.top+t,{height:n}=i.viewBox.baseVal;if(e<-.5||e>n)return;const s=Math.min(1,Math.max(0,(n-e)/n));this.emit("line-move",s)},e=(t,e)=>{const s=n.points.getItem(t).x+e,{width:o}=i.viewBox.baseVal;this.emit("point-move",t,s/o)};this.makeDraggable(s,((e,i)=>t(i)));const o=this.svg.querySelectorAll("circle");Array.from(o).forEach(((t,i)=>{this.makeDraggable(t,(t=>e(i+1,t)))}))}}makeDraggable(t,e){!function(t,e,i,n,s=5){let o=()=>{};if(!t)return o;t.addEventListener("pointerdown",(r=>{r.preventDefault(),r.stopPropagation();let a=r.clientX,u=r.clientY,h=!1;const d=n=>{n.preventDefault(),n.stopPropagation();const o=n.clientX,r=n.clientY;if(h||Math.abs(o-a)>=s||Math.abs(r-u)>=s){const{left:n,top:s}=t.getBoundingClientRect();h||(h=!0,i?.(a-n,u-s)),e(o-a,r-u,o-n,r-s),a=o,u=r}},l=t=>{h&&(t.preventDefault(),t.stopPropagation())},p=()=>{h&&n?.(),o()};o=()=>{document.removeEventListener("pointermove",d),document.removeEventListener("pointerup",p),document.removeEventListener("pointerleave",p),setTimeout((()=>{document.removeEventListener("click",l,!0)}),10)},document.addEventListener("pointermove",d),document.addEventListener("pointerup",p),document.addEventListener("pointerleave",p),document.addEventListener("click",l,!0)}))}(t,e)}update({x1:t,x2:e,x3:i,x4:n,y:s}){const o=this.svg.clientWidth,r=this.svg.clientHeight;this.top=r-s*r;const a=Math.max(this.padding,Math.min(this.top,r-this.padding));this.svg.setAttribute("viewBox",`0 0 ${o} ${r}`);const u=this.svg.querySelector("polyline"),{points:h}=u;h.getItem(0).x=t*o,h.getItem(0).y=r,h.getItem(1).x=e*o,h.getItem(1).y=a,h.getItem(2).x=i*o,h.getItem(2).y=a,h.getItem(3).x=n*o,h.getItem(3).y=r;const d=this.svg.querySelector("line");d.setAttribute("x1",h.getItem(1).x.toString()),d.setAttribute("x2",h.getItem(2).x.toString()),d.setAttribute("y1",a.toString()),d.setAttribute("y2",a.toString());const l=this.svg.querySelectorAll("circle");Array.from(l).forEach(((t,e)=>{const i=h.getItem(e+1);t.setAttribute("cx",i.x.toString()),t.setAttribute("cy",i.y.toString())}))}destroy(){this.svg.remove()}}class r extends n{constructor(t){super(t),this.polyline=null,this.audioContext=null,this.gainNode=null,this.volume=1,this.isFadingIn=!1,this.isFadingOut=!1,this.naturalVolumeExponent=1.5,this.options=Object.assign({},s,t),this.options.lineColor=this.options.lineColor||s.lineColor,this.options.dragPointFill=this.options.dragPointFill||s.dragPointFill,this.options.dragPointStroke=this.options.dragPointStroke||s.dragPointStroke,this.volume=this.options.volume??1}static create(t){return new r(t)}destroy(){this.polyline?.destroy(),super.destroy()}onInit(){if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");this.initWebAudio(),this.initSvg(),this.initFadeEffects(),this.subscriptions.push(this.wavesurfer.on("redraw",(()=>{const t=this.wavesurfer?.getDuration();t&&(this.options.fadeInStart=this.options.fadeInStart||0,this.options.fadeOutEnd=this.options.fadeOutEnd||t,this.options.fadeInEnd=this.options.fadeInEnd||this.options.fadeInStart,this.options.fadeOutStart=this.options.fadeOutStart||this.options.fadeOutEnd,this.renderPolyline())})))}initSvg(){if(!this.wavesurfer)return;const t=this.wavesurfer.getWrapper();this.polyline=new o(this.options,t),this.subscriptions.push(this.polyline.on("line-move",(t=>{this.setVolume(this.naturalVolume(t))})),this.polyline.on("point-move",((t,e)=>{const i=e*(this.wavesurfer?.getDuration()||0);if(1===t){if(i<this.options.fadeInStart||i>this.options.fadeOutStart)return;this.options.fadeInEnd=i,this.emit("fade-in-change",i)}else if(2===t){if(i>this.options.fadeOutEnd||i<this.options.fadeInEnd)return;this.options.fadeOutStart=i,this.emit("fade-out-change",i)}this.renderPolyline()})))}renderPolyline(){if(!this.polyline||!this.wavesurfer)return;const t=this.wavesurfer.getDuration();t&&this.polyline.update({x1:this.options.fadeInStart/t,x2:this.options.fadeInEnd/t,x3:this.options.fadeOutStart/t,x4:this.options.fadeOutEnd/t,y:this.invertNaturalVolume(this.volume)})}initWebAudio(){const t=this.wavesurfer?.getMediaElement();if(!t)return null;this.volume=this.options.volume??t.volume;const e=new window.AudioContext;this.gainNode=e.createGain(),this.setGainValue(),e.createMediaElementSource(t).connect(this.gainNode),this.gainNode.connect(e.destination),this.audioContext=e}invertNaturalVolume(t){return Math.pow((t-1e-4)/.9999,1/this.naturalVolumeExponent)}naturalVolume(t){return 1e-4+.9999*Math.pow(t,this.naturalVolumeExponent)}setGainValue(){this.gainNode&&(this.gainNode.gain.value=this.volume)}initFadeEffects(){if(!this.audioContext||!this.wavesurfer)return;const t=this.wavesurfer.on("timeupdate",(t=>{if(!this.audioContext||!this.gainNode)return;if(!this.wavesurfer?.isPlaying())return;if("suspended"===this.audioContext.state&&this.audioContext.resume(),!this.isFadingIn&&t>=this.options.fadeInStart&&t<=this.options.fadeInEnd)return this.isFadingIn=!0,this.gainNode.gain.setValueAtTime(0,this.audioContext.currentTime),void this.gainNode.gain.linearRampToValueAtTime(this.volume,this.audioContext.currentTime+(this.options.fadeInEnd-t));if(!this.isFadingOut&&t>=this.options.fadeOutStart&&t<=this.options.fadeOutEnd)return this.isFadingOut=!0,this.gainNode.gain.setValueAtTime(this.volume,this.audioContext.currentTime),void this.gainNode.gain.linearRampToValueAtTime(0,this.audioContext.currentTime+(this.options.fadeOutEnd-t));let e=!1;this.isFadingIn&&(t<this.options.fadeInStart||t>this.options.fadeInEnd)&&(this.isFadingIn=!1,e=!0),this.isFadingOut&&(t<this.options.fadeOutStart||t>=this.options.fadeOutEnd)&&(this.isFadingOut=!1,e=!0),e&&(this.gainNode.gain.cancelScheduledValues(this.audioContext.currentTime),this.setGainValue())}));this.subscriptions.push(t)}getCurrentVolume(){return this.gainNode?this.gainNode.gain.value:this.volume}setStartTime(t,e=!1){if(e){const e=this.options.fadeInEnd-this.options.fadeInStart;this.options.fadeInEnd=t+e}this.options.fadeInStart=t,this.renderPolyline()}setEndTime(t,e=!1){if(e){const e=this.options.fadeOutEnd-this.options.fadeOutStart;this.options.fadeOutStart=t-e}this.options.fadeOutEnd=t,this.renderPolyline()}setVolume(t){this.volume=t,this.setGainValue(),this.renderPolyline(),this.emit("volume-change",t)}}const a=r;return e.default})()));
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.Envelope=e():t.Envelope=e()}("undefined"!=typeof WaveSurfer?WaveSurfer:this,(()=>(()=>{"use strict";var t={d:(e,i)=>{for(var n in i)t.o(i,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:i[n]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e)},e={};t.d(e,{default:()=>a});const i=class{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)))}},n=class extends i{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()))}},s={fadeInStart:0,fadeOutEnd:0,fadeInEnd:0,fadeOutStart:0,lineWidth:4,lineColor:"rgba(0, 0, 255, 0.5)",dragPointSize:10,dragPointFill:"rgba(255, 255, 255, 0.8)",dragPointStroke:"rgba(255, 255, 255, 0.8)"};class o extends i{constructor(t,e){super(),this.top=0,this.padding=t.dragPointSize/2+1;const i=document.createElementNS("http://www.w3.org/2000/svg","svg");i.setAttribute("width","100%"),i.setAttribute("height","100%"),i.setAttribute("viewBox","0 0 0 0"),i.setAttribute("preserveAspectRatio","none"),i.setAttribute("style","position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none;"),i.setAttribute("part","envelope"),this.svg=i;const n=document.createElementNS("http://www.w3.org/2000/svg","polyline");n.setAttribute("points","0,0 0,0 0,0 0,0"),n.setAttribute("stroke",t.lineColor),n.setAttribute("stroke-width",t.lineWidth),n.setAttribute("fill","none"),n.setAttribute("style","pointer-events: none;"),n.setAttribute("part","polyline"),i.appendChild(n);const s=document.createElementNS("http://www.w3.org/2000/svg","line");s.setAttribute("stroke","transparent"),s.setAttribute("stroke-width",(3*t.lineWidth).toString()),s.setAttribute("style","cursor: ns-resize; pointer-events: all;"),s.setAttribute("part","line"),i.appendChild(s),[0,1].forEach((()=>{const e=document.createElementNS("http://www.w3.org/2000/svg","circle");e.setAttribute("r",(t.dragPointSize/2).toString()),e.setAttribute("fill",t.dragPointFill),e.setAttribute("stroke",t.dragPointStroke||t.dragPointFill),e.setAttribute("stroke-width","2"),e.setAttribute("style","cursor: ew-resize; pointer-events: all;"),e.setAttribute("part","circle"),i.appendChild(e)})),e.appendChild(i);{const t=t=>{const e=this.top+t,{height:n}=i.viewBox.baseVal;if(e<-.5||e>n)return;const s=Math.min(1,Math.max(0,(n-e)/n));this.emit("line-move",s)},e=(t,e)=>{const s=n.points.getItem(t).x+e,{width:o}=i.viewBox.baseVal;this.emit("point-move",t,s/o)};this.makeDraggable(s,((e,i)=>t(i)));const o=this.svg.querySelectorAll("circle");Array.from(o).forEach(((t,i)=>{this.makeDraggable(t,(t=>e(i+1,t)))}))}}makeDraggable(t,e){!function(t,e,i,n,s=5){let o=()=>{};if(!t)return o;t.addEventListener("pointerdown",(r=>{r.preventDefault(),r.stopPropagation();let a=r.clientX,d=r.clientY,u=!1;const l=n=>{n.preventDefault(),n.stopPropagation();const o=n.clientX,r=n.clientY;if(u||Math.abs(o-a)>=s||Math.abs(r-d)>=s){const{left:n,top:s}=t.getBoundingClientRect();u||(u=!0,null==i||i(a-n,d-s)),e(o-a,r-d,o-n,r-s),a=o,d=r}},h=t=>{u&&(t.preventDefault(),t.stopPropagation())},p=()=>{u&&(null==n||n()),o()},c=t=>t.preventDefault(),g={passive:!1};document.addEventListener("touchmove",c,g),document.addEventListener("pointermove",l),document.addEventListener("pointerup",p),document.addEventListener("pointerleave",p),document.addEventListener("click",h,!0),o=()=>{document.removeEventListener("touchmove",c,g),document.removeEventListener("pointermove",l),document.removeEventListener("pointerup",p),document.removeEventListener("pointerleave",p),setTimeout((()=>{document.removeEventListener("click",h,!0)}),10)}}))}(t,e)}update({x1:t,x2:e,x3:i,x4:n,y:s}){const o=this.svg.clientWidth,r=this.svg.clientHeight;this.top=r-s*r;const a=Math.max(this.padding,Math.min(this.top,r-this.padding));this.svg.setAttribute("viewBox",`0 0 ${o} ${r}`);const d=this.svg.querySelector("polyline"),{points:u}=d;u.getItem(0).x=t*o,u.getItem(0).y=r,u.getItem(1).x=e*o,u.getItem(1).y=a,u.getItem(2).x=i*o,u.getItem(2).y=a,u.getItem(3).x=n*o,u.getItem(3).y=r;const l=this.svg.querySelector("line");l.setAttribute("x1",u.getItem(1).x.toString()),l.setAttribute("x2",u.getItem(2).x.toString()),l.setAttribute("y1",a.toString()),l.setAttribute("y2",a.toString());const h=this.svg.querySelectorAll("circle");Array.from(h).forEach(((t,e)=>{const i=u.getItem(e+1);t.setAttribute("cx",i.x.toString()),t.setAttribute("cy",i.y.toString())}))}destroy(){this.svg.remove()}}class r extends n{constructor(t){var e;super(t),this.polyline=null,this.audioContext=null,this.gainNode=null,this.volume=1,this.isFadingIn=!1,this.isFadingOut=!1,this.naturalVolumeExponent=1.5,this.options=Object.assign({},s,t),this.options.lineColor=this.options.lineColor||s.lineColor,this.options.dragPointFill=this.options.dragPointFill||s.dragPointFill,this.options.dragPointStroke=this.options.dragPointStroke||s.dragPointStroke,this.volume=null!==(e=this.options.volume)&&void 0!==e?e:1}static create(t){return new r(t)}destroy(){var t;null===(t=this.polyline)||void 0===t||t.destroy(),super.destroy()}onInit(){if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");this.initWebAudio(),this.initSvg(),this.initFadeEffects(),this.subscriptions.push(this.wavesurfer.on("redraw",(()=>{var t;const e=null===(t=this.wavesurfer)||void 0===t?void 0:t.getDuration();e&&(this.options.fadeInStart=this.options.fadeInStart||0,this.options.fadeOutEnd=this.options.fadeOutEnd||e,this.options.fadeInEnd=this.options.fadeInEnd||this.options.fadeInStart,this.options.fadeOutStart=this.options.fadeOutStart||this.options.fadeOutEnd,this.renderPolyline())})))}initSvg(){if(!this.wavesurfer)return;const t=this.wavesurfer.getWrapper();this.polyline=new o(this.options,t),this.subscriptions.push(this.polyline.on("line-move",(t=>{this.setVolume(this.naturalVolume(t))})),this.polyline.on("point-move",((t,e)=>{var i;const n=e*((null===(i=this.wavesurfer)||void 0===i?void 0:i.getDuration())||0);if(1===t){if(n<this.options.fadeInStart||n>this.options.fadeOutStart)return;this.options.fadeInEnd=n,this.emit("fade-in-change",n)}else if(2===t){if(n>this.options.fadeOutEnd||n<this.options.fadeInEnd)return;this.options.fadeOutStart=n,this.emit("fade-out-change",n)}this.renderPolyline()})))}renderPolyline(){if(!this.polyline||!this.wavesurfer)return;const t=this.wavesurfer.getDuration();t&&this.polyline.update({x1:this.options.fadeInStart/t,x2:this.options.fadeInEnd/t,x3:this.options.fadeOutStart/t,x4:this.options.fadeOutEnd/t,y:this.invertNaturalVolume(this.volume)})}initWebAudio(){var t,e;const i=null===(t=this.wavesurfer)||void 0===t?void 0:t.getMediaElement();if(!i)return null;this.volume=null!==(e=this.options.volume)&&void 0!==e?e:i.volume;const n=new window.AudioContext;this.gainNode=n.createGain(),this.setGainValue(),n.createMediaElementSource(i).connect(this.gainNode),this.gainNode.connect(n.destination),this.audioContext=n}invertNaturalVolume(t){return Math.pow((t-1e-4)/.9999,1/this.naturalVolumeExponent)}naturalVolume(t){return 1e-4+.9999*Math.pow(t,this.naturalVolumeExponent)}setGainValue(){this.gainNode&&(this.gainNode.gain.value=this.volume)}initFadeEffects(){if(!this.audioContext||!this.wavesurfer)return;const t=this.wavesurfer.on("timeupdate",(t=>{var e;if(!this.audioContext||!this.gainNode)return;if(!(null===(e=this.wavesurfer)||void 0===e?void 0:e.isPlaying()))return;if("suspended"===this.audioContext.state&&this.audioContext.resume(),!this.isFadingIn&&t>=this.options.fadeInStart&&t<=this.options.fadeInEnd)return this.isFadingIn=!0,this.gainNode.gain.setValueAtTime(0,this.audioContext.currentTime),void this.gainNode.gain.linearRampToValueAtTime(this.volume,this.audioContext.currentTime+(this.options.fadeInEnd-t));if(!this.isFadingOut&&t>=this.options.fadeOutStart&&t<=this.options.fadeOutEnd)return this.isFadingOut=!0,this.gainNode.gain.setValueAtTime(this.volume,this.audioContext.currentTime),void this.gainNode.gain.linearRampToValueAtTime(0,this.audioContext.currentTime+(this.options.fadeOutEnd-t));let i=!1;this.isFadingIn&&(t<this.options.fadeInStart||t>this.options.fadeInEnd)&&(this.isFadingIn=!1,i=!0),this.isFadingOut&&(t<this.options.fadeOutStart||t>=this.options.fadeOutEnd)&&(this.isFadingOut=!1,i=!0),i&&(this.gainNode.gain.cancelScheduledValues(this.audioContext.currentTime),this.setGainValue())}));this.subscriptions.push(t)}getCurrentVolume(){return this.gainNode?this.gainNode.gain.value:this.volume}setStartTime(t,e=!1){if(e){const e=this.options.fadeInEnd-this.options.fadeInStart;this.options.fadeInEnd=t+e}this.options.fadeInStart=t,this.renderPolyline()}setEndTime(t,e=!1){if(e){const e=this.options.fadeOutEnd-this.options.fadeOutStart;this.options.fadeOutStart=t-e}this.options.fadeOutEnd=t,this.renderPolyline()}setFadeInEnd(t){this.options.fadeInEnd=t,this.renderPolyline()}setFadeOutStart(t){this.options.fadeOutStart=t,this.renderPolyline()}setVolume(t){this.volume=t,this.setGainValue(),this.renderPolyline(),this.emit("volume-change",t)}}const a=r;return e.default})()));

package/dist/plugins/hover.d.ts

@@ -0,0 +1,35 @@
+/**
+ * The Hover plugin follows the mouse and shows a timestamp
+ */
+import BasePlugin, { type BasePluginEvents } from '../base-plugin.js';
+export type HoverPluginOptions = {
+    lineColor?: string;
+    lineWidth?: string | number;
+    labelColor?: string;
+    labelSize?: string | number;
+    labelBackground?: string;
+};
+declare const defaultOptions: {
+    lineWidth: number;
+    labelSize: number;
+};
+export type HoverPluginEvents = BasePluginEvents & {
+    hover: [relX: number];
+};
+export declare class HoverPlugin extends BasePlugin<HoverPluginEvents, HoverPluginOptions> {
+    protected options: HoverPluginOptions & typeof defaultOptions;
+    private wrapper;
+    private label;
+    private unsubscribe;
+    constructor(options?: HoverPluginOptions);
+    static create(options?: HoverPluginOptions): HoverPlugin;
+    private addUnits;
+    /** Called by wavesurfer, don't call manually */
+    onInit(): void;
+    private formatTime;
+    private onPointerMove;
+    private onPointerLeave;
+    /** Unmount */
+    destroy(): void;
+}
+export default HoverPlugin;

package/dist/plugins/hover.js

@@ -0,0 +1,101 @@
+/**
+ * The Hover plugin follows the mouse and shows a timestamp
+ */
+import BasePlugin from '../base-plugin.js';
+const defaultOptions = {
+    lineWidth: 1,
+    labelSize: 11,
+};
+export class HoverPlugin extends BasePlugin {
+    constructor(options) {
+        super(options || {});
+        this.unsubscribe = () => undefined;
+        this.onPointerMove = (e) => {
+            if (!this.wavesurfer)
+                return;
+            // Position
+            const width = this.wavesurfer.getWrapper().clientWidth;
+            const { offsetX } = e;
+            const relX = Math.min(1, Math.max(0, offsetX / width));
+            const posX = Math.min(width - this.options.lineWidth - 1, offsetX);
+            this.wrapper.style.transform = `translateX(${posX}px)`;
+            this.wrapper.style.opacity = '1';
+            // Timestamp
+            const duration = this.wavesurfer.getDuration() || 0;
+            this.label.textContent = this.formatTime(duration * relX);
+            const labelWidth = this.label.offsetWidth;
+            this.label.style.transform =
+                posX + labelWidth > width ? `translateX(-${labelWidth + this.options.lineWidth}px)` : '';
+            // Emit a hover event with the relative X position
+            this.emit('hover', relX);
+        };
+        this.onPointerLeave = () => {
+            this.wrapper.style.opacity = '0';
+        };
+        this.options = Object.assign({}, defaultOptions, options);
+        // Create the plugin elements
+        this.wrapper = document.createElement('div');
+        this.label = document.createElement('span');
+        this.wrapper.appendChild(this.label);
+    }
+    static create(options) {
+        return new HoverPlugin(options);
+    }
+    addUnits(value) {
+        const units = typeof value === 'number' ? 'px' : '';
+        return `${value}${units}`;
+    }
+    /** Called by wavesurfer, don't call manually */
+    onInit() {
+        if (!this.wavesurfer) {
+            throw Error('WaveSurfer is not initialized');
+        }
+        const wsOptions = this.wavesurfer.options;
+        const lineColor = this.options.lineColor || wsOptions.cursorColor || wsOptions.progressColor;
+        // Vertical line
+        this.wrapper.setAttribute('part', 'hover');
+        Object.assign(this.wrapper.style, {
+            position: 'absolute',
+            zIndex: 10,
+            left: 0,
+            top: 0,
+            height: '100%',
+            pointerEvents: 'none',
+            borderLeft: `${this.addUnits(this.options.lineWidth)} solid ${lineColor}`,
+            transition: 'opacity .1s ease-in',
+        });
+        // Timestamp label
+        this.label.setAttribute('part', 'hover-label');
+        Object.assign(this.label.style, {
+            display: 'block',
+            backgroundColor: this.options.labelBackground,
+            color: this.options.labelColor,
+            fontSize: `${this.addUnits(this.options.labelSize)}`,
+            transition: 'transform .1s ease-in',
+            padding: '2px 3px',
+        });
+        // Append the wrapper
+        const container = this.wavesurfer.getWrapper();
+        container.appendChild(this.wrapper);
+        // Attach pointer events
+        container.addEventListener('pointermove', this.onPointerMove);
+        container.addEventListener('pointerleave', this.onPointerLeave);
+        this.unsubscribe = () => {
+            container.removeEventListener('pointermove', this.onPointerMove);
+            container.removeEventListener('pointerleave', this.onPointerLeave);
+        };
+    }
+    formatTime(seconds) {
+        const minutes = Math.floor(seconds / 60);
+        const secondsRemainder = Math.round(seconds) % 60;
+        const paddedSeconds = `0${secondsRemainder}`.slice(-2);
+        return `${minutes}:${paddedSeconds}`;
+    }
+    /** Unmount */
+    destroy() {
+        super.destroy();
+        this.unsubscribe();
+        this.wrapper.remove();
+    }
+}
+export default HoverPlugin;

package/dist/plugins/hover.min.cjs

@@ -0,0 +1 @@
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.Hover=e():t.Hover=e()}("undefined"!=typeof WaveSurfer?WaveSurfer:this,(()=>(()=>{"use strict";var t={d:(e,s)=>{for(var i in s)t.o(s,i)&&!t.o(e,i)&&Object.defineProperty(e,i,{enumerable:!0,get:s[i]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e)},e={};t.d(e,{default:()=>n});const s=class{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 s=this.on(t,e),i=this.on(t,(()=>{s(),i()}));return s}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)))}},i=class extends s{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()))}},r={lineWidth:1,labelSize:11};class o extends i{constructor(t){super(t||{}),this.unsubscribe=()=>{},this.onPointerMove=t=>{if(!this.wavesurfer)return;const e=this.wavesurfer.getWrapper().clientWidth,{offsetX:s}=t,i=Math.min(1,Math.max(0,s/e)),r=Math.min(e-this.options.lineWidth-1,s);this.wrapper.style.transform=`translateX(${r}px)`,this.wrapper.style.opacity="1";const o=this.wavesurfer.getDuration()||0;this.label.textContent=this.formatTime(o*i);const n=this.label.offsetWidth;this.label.style.transform=r+n>e?`translateX(-${n+this.options.lineWidth}px)`:"",this.emit("hover",i)},this.onPointerLeave=()=>{this.wrapper.style.opacity="0"},this.options=Object.assign({},r,t),this.wrapper=document.createElement("div"),this.label=document.createElement("span"),this.wrapper.appendChild(this.label)}static create(t){return new o(t)}addUnits(t){return`${t}${"number"==typeof t?"px":""}`}onInit(){if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");const t=this.wavesurfer.options,e=this.options.lineColor||t.cursorColor||t.progressColor;this.wrapper.setAttribute("part","hover"),Object.assign(this.wrapper.style,{position:"absolute",zIndex:10,left:0,top:0,height:"100%",pointerEvents:"none",borderLeft:`${this.addUnits(this.options.lineWidth)} solid ${e}`,transition:"opacity .1s ease-in"}),this.label.setAttribute("part","hover-label"),Object.assign(this.label.style,{display:"block",backgroundColor:this.options.labelBackground,color:this.options.labelColor,fontSize:`${this.addUnits(this.options.labelSize)}`,transition:"transform .1s ease-in",padding:"2px 3px"});const s=this.wavesurfer.getWrapper();s.appendChild(this.wrapper),s.addEventListener("pointermove",this.onPointerMove),s.addEventListener("pointerleave",this.onPointerLeave),this.unsubscribe=()=>{s.removeEventListener("pointermove",this.onPointerMove),s.removeEventListener("pointerleave",this.onPointerLeave)}}formatTime(t){return`${Math.floor(t/60)}:${("0"+Math.round(t)%60).slice(-2)}`}destroy(){super.destroy(),this.unsubscribe(),this.wrapper.remove()}}const n=o;return e.default})()));

package/dist/plugins/minimap.d.ts

@@ -1,7 +1,7 @@
 /**
  * Minimap is a tiny copy of the main waveform serving as a navigation tool.
  */
-import BasePlugin from '../base-plugin.js';
+import BasePlugin, { type BasePluginEvents } from '../base-plugin.js';
 import { type WaveSurferOptions } from '../wavesurfer.js';
 export type MinimapPluginOptions = {
     overlayColor?: string;
@@ -12,7 +12,7 @@ declare const defaultOptions: {
     overlayColor: string;
     insertPosition: string;
 };
-export type MinimapPluginEvents = {
+export type MinimapPluginEvents = BasePluginEvents & {
     ready: [];
     interaction: [];
 };

package/dist/plugins/minimap.js

@@ -22,6 +22,7 @@ export class MinimapPlugin extends BasePlugin {
     }
     /** Called by wavesurfer, don't call manually */
     onInit() {
+        var _a, _b;
         if (!this.wavesurfer) {
             throw Error('WaveSurfer is not initialized');
         }
@@ -32,11 +33,11 @@ export class MinimapPlugin extends BasePlugin {
             else if (this.options.container instanceof HTMLElement) {
                 this.container = this.options.container;
             }
-            this.container?.appendChild(this.minimapWrapper);
+            (_a = this.container) === null || _a === void 0 ? void 0 : _a.appendChild(this.minimapWrapper);
         }
         else {
             this.container = this.wavesurfer.getWrapper().parentElement;
-            this.container?.insertAdjacentElement(this.options.insertPosition, this.minimapWrapper);
+            (_b = this.container) === null || _b === void 0 ? void 0 : _b.insertAdjacentElement(this.options.insertPosition, this.minimapWrapper);
         }
         this.initWaveSurferEvents();
     }
@@ -64,15 +65,7 @@ export class MinimapPlugin extends BasePlugin {
         const media = this.wavesurfer.getMediaElement();
         if (!data || !media)
             return;
-        this.miniWavesurfer = WaveSurfer.create({
-            ...this.options,
-            container: this.minimapWrapper,
-            minPxPerSec: 0,
-            fillParent: true,
-            media,
-            peaks: [data.getChannelData(0)],
-            duration: data.duration,
-        });
+        this.miniWavesurfer = WaveSurfer.create(Object.assign(Object.assign({}, this.options), { container: this.minimapWrapper, minPxPerSec: 0, fillParent: true, media, peaks: [data.getChannelData(0)], duration: data.duration }));
         this.subscriptions.push(this.miniWavesurfer.on('ready', () => {
             this.emit('ready');
         }), this.miniWavesurfer.on('interaction', () => {
@@ -80,7 +73,8 @@ export class MinimapPlugin extends BasePlugin {
         }));
     }
     getOverlayWidth() {
-        const waveformWidth = this.wavesurfer?.getWrapper().clientWidth || 1;
+        var _a;
+        const waveformWidth = ((_a = this.wavesurfer) === null || _a === void 0 ? void 0 : _a.getWrapper().clientWidth) || 1;
         return Math.round((this.minimapWrapper.clientWidth / waveformWidth) * 100);
     }
     onRedraw() {
@@ -106,7 +100,8 @@ export class MinimapPlugin extends BasePlugin {
     }
     /** Unmount */
     destroy() {
-        this.miniWavesurfer?.destroy();
+        var _a;
+        (_a = this.miniWavesurfer) === null || _a === void 0 ? void 0 : _a.destroy();
         this.minimapWrapper.remove();
         super.destroy();
     }