wavesurfer.js 7.5.4 → 7.5.6

package/README.md

@@ -34,7 +34,7 @@ const wavesurfer = WaveSurfer.create({
 
 To import one of the plugins, e.g. the [Regions plugin](https://wavesurfer.xyz/examples/?regions.js):
 ```js
-import Regions from 'wavesurfer.js/dist/plugins/regions.js'
+import Regions from 'wavesurfer.js/dist/plugins/regions.esm.js'
 ```
 
 Or as a script tag that will export `WaveSurfer.Regions`:

package/dist/plugins/hover.cjs

@@ -1 +1 @@
-"use strict";class t{constructor(){this.listeners={},this.on=this.addEventListener,this.un=this.removeEventListener}addEventListener(t,e,s){if(this.listeners[t]||(this.listeners[t]=new Set),this.listeners[t].add(e),null==s?void 0:s.once){const s=()=>{this.removeEventListener(t,s),this.removeEventListener(t,e)};return this.addEventListener(t,s),s}return()=>this.removeEventListener(t,e)}removeEventListener(t,e){var s;null===(s=this.listeners[t])||void 0===s||s.delete(e)}once(t,e){return this.on(t,e,{once:!0})}unAll(){this.listeners={}}emit(t,...e){this.listeners[t]&&this.listeners[t].forEach((t=>t(...e)))}}class e extends t{constructor(t){super(),this.subscriptions=[],this.options=t}onInit(){}init(t){this.wavesurfer=t,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((t=>t()))}}const s={lineWidth:1,labelSize:11};class i extends e{constructor(t){super(t||{}),this.unsubscribe=()=>{},this.onPointerMove=t=>{if(!this.wavesurfer)return;const e=this.wavesurfer.getWrapper().getBoundingClientRect(),{width:s}=e,i=t.clientX-e.left,r=Math.min(1,Math.max(0,i/s)),n=Math.min(s-this.options.lineWidth-1,i);this.wrapper.style.transform=`translateX(${n}px)`,this.wrapper.style.opacity="1";const o=this.wavesurfer.getDuration()||0;this.label.textContent=this.formatTime(o*r);const a=this.label.offsetWidth;this.label.style.transform=n+a>s?`translateX(-${a+this.options.lineWidth}px)`:"",this.emit("hover",r)},this.onPointerLeave=()=>{this.wrapper.style.opacity="0"},this.options=Object.assign({},s,t),this.wrapper=document.createElement("div"),this.label=document.createElement("span"),this.wrapper.appendChild(this.label)}static create(t){return new i(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}`,opacity:"0",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.floor(t)%60}`.slice(-2)}`}destroy(){super.destroy(),this.unsubscribe(),this.wrapper.remove()}}module.exports=i;
+"use strict";class e{constructor(){this.listeners={},this.on=this.addEventListener,this.un=this.removeEventListener}addEventListener(e,t,s){if(this.listeners[e]||(this.listeners[e]=new Set),this.listeners[e].add(t),null==s?void 0:s.once){const s=()=>{this.removeEventListener(e,s),this.removeEventListener(e,t)};return this.addEventListener(e,s),s}return()=>this.removeEventListener(e,t)}removeEventListener(e,t){var s;null===(s=this.listeners[e])||void 0===s||s.delete(t)}once(e,t){return this.on(e,t,{once:!0})}unAll(){this.listeners={}}emit(e,...t){this.listeners[e]&&this.listeners[e].forEach((e=>e(...t)))}}class t extends e{constructor(e){super(),this.subscriptions=[],this.options=e}onInit(){}init(e){this.wavesurfer=e,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((e=>e()))}}const s={lineWidth:1,labelSize:11};class i extends t{constructor(e){super(e||{}),this.unsubscribe=()=>{},this.onPointerMove=e=>{if(!this.wavesurfer)return;const t=this.wavesurfer.getWrapper().getBoundingClientRect(),{width:s}=t,i=e.clientX-t.left,r=Math.min(1,Math.max(0,i/s)),n=Math.min(s-this.options.lineWidth-1,i);this.wrapper.style.transform=`translateX(${n}px)`,this.wrapper.style.opacity="1";const o=this.wavesurfer.getDuration()||0;this.label.textContent=this.formatTime(o*r);const a=this.label.offsetWidth;this.label.style.transform=n+a>s?`translateX(-${a+this.options.lineWidth}px)`:"",this.emit("hover",r)},this.onPointerLeave=()=>{this.wrapper.style.opacity="0"},this.options=Object.assign({},s,e),this.wrapper=document.createElement("div"),this.label=document.createElement("span"),this.wrapper.appendChild(this.label)}static create(e){return new i(e)}addUnits(e){return`${e}${"number"==typeof e?"px":""}`}onInit(){if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");const e=this.wavesurfer.options,t=this.options.lineColor||e.cursorColor||e.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 ${t}`,opacity:"0",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),s.addEventListener("wheel",this.onPointerMove),this.unsubscribe=()=>{s.removeEventListener("pointermove",this.onPointerMove),s.removeEventListener("pointerleave",this.onPointerLeave),s.removeEventListener("wheel",this.onPointerLeave)}}formatTime(e){return`${Math.floor(e/60)}:${`0${Math.floor(e)%60}`.slice(-2)}`}destroy(){super.destroy(),this.unsubscribe(),this.wrapper.remove()}}module.exports=i;

package/dist/plugins/hover.esm.js

@@ -1 +1 @@
-class t{constructor(){this.listeners={},this.on=this.addEventListener,this.un=this.removeEventListener}addEventListener(t,e,s){if(this.listeners[t]||(this.listeners[t]=new Set),this.listeners[t].add(e),null==s?void 0:s.once){const s=()=>{this.removeEventListener(t,s),this.removeEventListener(t,e)};return this.addEventListener(t,s),s}return()=>this.removeEventListener(t,e)}removeEventListener(t,e){var s;null===(s=this.listeners[t])||void 0===s||s.delete(e)}once(t,e){return this.on(t,e,{once:!0})}unAll(){this.listeners={}}emit(t,...e){this.listeners[t]&&this.listeners[t].forEach((t=>t(...e)))}}class e extends t{constructor(t){super(),this.subscriptions=[],this.options=t}onInit(){}init(t){this.wavesurfer=t,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((t=>t()))}}const s={lineWidth:1,labelSize:11};class i extends e{constructor(t){super(t||{}),this.unsubscribe=()=>{},this.onPointerMove=t=>{if(!this.wavesurfer)return;const e=this.wavesurfer.getWrapper().getBoundingClientRect(),{width:s}=e,i=t.clientX-e.left,r=Math.min(1,Math.max(0,i/s)),n=Math.min(s-this.options.lineWidth-1,i);this.wrapper.style.transform=`translateX(${n}px)`,this.wrapper.style.opacity="1";const o=this.wavesurfer.getDuration()||0;this.label.textContent=this.formatTime(o*r);const a=this.label.offsetWidth;this.label.style.transform=n+a>s?`translateX(-${a+this.options.lineWidth}px)`:"",this.emit("hover",r)},this.onPointerLeave=()=>{this.wrapper.style.opacity="0"},this.options=Object.assign({},s,t),this.wrapper=document.createElement("div"),this.label=document.createElement("span"),this.wrapper.appendChild(this.label)}static create(t){return new i(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}`,opacity:"0",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.floor(t)%60}`.slice(-2)}`}destroy(){super.destroy(),this.unsubscribe(),this.wrapper.remove()}}export{i as default};
+class e{constructor(){this.listeners={},this.on=this.addEventListener,this.un=this.removeEventListener}addEventListener(e,t,s){if(this.listeners[e]||(this.listeners[e]=new Set),this.listeners[e].add(t),null==s?void 0:s.once){const s=()=>{this.removeEventListener(e,s),this.removeEventListener(e,t)};return this.addEventListener(e,s),s}return()=>this.removeEventListener(e,t)}removeEventListener(e,t){var s;null===(s=this.listeners[e])||void 0===s||s.delete(t)}once(e,t){return this.on(e,t,{once:!0})}unAll(){this.listeners={}}emit(e,...t){this.listeners[e]&&this.listeners[e].forEach((e=>e(...t)))}}class t extends e{constructor(e){super(),this.subscriptions=[],this.options=e}onInit(){}init(e){this.wavesurfer=e,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((e=>e()))}}const s={lineWidth:1,labelSize:11};class i extends t{constructor(e){super(e||{}),this.unsubscribe=()=>{},this.onPointerMove=e=>{if(!this.wavesurfer)return;const t=this.wavesurfer.getWrapper().getBoundingClientRect(),{width:s}=t,i=e.clientX-t.left,r=Math.min(1,Math.max(0,i/s)),n=Math.min(s-this.options.lineWidth-1,i);this.wrapper.style.transform=`translateX(${n}px)`,this.wrapper.style.opacity="1";const o=this.wavesurfer.getDuration()||0;this.label.textContent=this.formatTime(o*r);const a=this.label.offsetWidth;this.label.style.transform=n+a>s?`translateX(-${a+this.options.lineWidth}px)`:"",this.emit("hover",r)},this.onPointerLeave=()=>{this.wrapper.style.opacity="0"},this.options=Object.assign({},s,e),this.wrapper=document.createElement("div"),this.label=document.createElement("span"),this.wrapper.appendChild(this.label)}static create(e){return new i(e)}addUnits(e){return`${e}${"number"==typeof e?"px":""}`}onInit(){if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");const e=this.wavesurfer.options,t=this.options.lineColor||e.cursorColor||e.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 ${t}`,opacity:"0",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),s.addEventListener("wheel",this.onPointerMove),this.unsubscribe=()=>{s.removeEventListener("pointermove",this.onPointerMove),s.removeEventListener("pointerleave",this.onPointerLeave),s.removeEventListener("wheel",this.onPointerLeave)}}formatTime(e){return`${Math.floor(e/60)}:${`0${Math.floor(e)%60}`.slice(-2)}`}destroy(){super.destroy(),this.unsubscribe(),this.wrapper.remove()}}export{i as default};

package/dist/plugins/hover.js

@@ -1 +1 @@
-class t{constructor(){this.listeners={},this.on=this.addEventListener,this.un=this.removeEventListener}addEventListener(t,e,s){if(this.listeners[t]||(this.listeners[t]=new Set),this.listeners[t].add(e),null==s?void 0:s.once){const s=()=>{this.removeEventListener(t,s),this.removeEventListener(t,e)};return this.addEventListener(t,s),s}return()=>this.removeEventListener(t,e)}removeEventListener(t,e){var s;null===(s=this.listeners[t])||void 0===s||s.delete(e)}once(t,e){return this.on(t,e,{once:!0})}unAll(){this.listeners={}}emit(t,...e){this.listeners[t]&&this.listeners[t].forEach((t=>t(...e)))}}class e extends t{constructor(t){super(),this.subscriptions=[],this.options=t}onInit(){}init(t){this.wavesurfer=t,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((t=>t()))}}const s={lineWidth:1,labelSize:11};class i extends e{constructor(t){super(t||{}),this.unsubscribe=()=>{},this.onPointerMove=t=>{if(!this.wavesurfer)return;const e=this.wavesurfer.getWrapper().getBoundingClientRect(),{width:s}=e,i=t.clientX-e.left,r=Math.min(1,Math.max(0,i/s)),n=Math.min(s-this.options.lineWidth-1,i);this.wrapper.style.transform=`translateX(${n}px)`,this.wrapper.style.opacity="1";const o=this.wavesurfer.getDuration()||0;this.label.textContent=this.formatTime(o*r);const a=this.label.offsetWidth;this.label.style.transform=n+a>s?`translateX(-${a+this.options.lineWidth}px)`:"",this.emit("hover",r)},this.onPointerLeave=()=>{this.wrapper.style.opacity="0"},this.options=Object.assign({},s,t),this.wrapper=document.createElement("div"),this.label=document.createElement("span"),this.wrapper.appendChild(this.label)}static create(t){return new i(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}`,opacity:"0",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.floor(t)%60}`.slice(-2)}`}destroy(){super.destroy(),this.unsubscribe(),this.wrapper.remove()}}export{i as default};
+class e{constructor(){this.listeners={},this.on=this.addEventListener,this.un=this.removeEventListener}addEventListener(e,t,s){if(this.listeners[e]||(this.listeners[e]=new Set),this.listeners[e].add(t),null==s?void 0:s.once){const s=()=>{this.removeEventListener(e,s),this.removeEventListener(e,t)};return this.addEventListener(e,s),s}return()=>this.removeEventListener(e,t)}removeEventListener(e,t){var s;null===(s=this.listeners[e])||void 0===s||s.delete(t)}once(e,t){return this.on(e,t,{once:!0})}unAll(){this.listeners={}}emit(e,...t){this.listeners[e]&&this.listeners[e].forEach((e=>e(...t)))}}class t extends e{constructor(e){super(),this.subscriptions=[],this.options=e}onInit(){}init(e){this.wavesurfer=e,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((e=>e()))}}const s={lineWidth:1,labelSize:11};class i extends t{constructor(e){super(e||{}),this.unsubscribe=()=>{},this.onPointerMove=e=>{if(!this.wavesurfer)return;const t=this.wavesurfer.getWrapper().getBoundingClientRect(),{width:s}=t,i=e.clientX-t.left,r=Math.min(1,Math.max(0,i/s)),n=Math.min(s-this.options.lineWidth-1,i);this.wrapper.style.transform=`translateX(${n}px)`,this.wrapper.style.opacity="1";const o=this.wavesurfer.getDuration()||0;this.label.textContent=this.formatTime(o*r);const a=this.label.offsetWidth;this.label.style.transform=n+a>s?`translateX(-${a+this.options.lineWidth}px)`:"",this.emit("hover",r)},this.onPointerLeave=()=>{this.wrapper.style.opacity="0"},this.options=Object.assign({},s,e),this.wrapper=document.createElement("div"),this.label=document.createElement("span"),this.wrapper.appendChild(this.label)}static create(e){return new i(e)}addUnits(e){return`${e}${"number"==typeof e?"px":""}`}onInit(){if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");const e=this.wavesurfer.options,t=this.options.lineColor||e.cursorColor||e.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 ${t}`,opacity:"0",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),s.addEventListener("wheel",this.onPointerMove),this.unsubscribe=()=>{s.removeEventListener("pointermove",this.onPointerMove),s.removeEventListener("pointerleave",this.onPointerLeave),s.removeEventListener("wheel",this.onPointerLeave)}}formatTime(e){return`${Math.floor(e/60)}:${`0${Math.floor(e)%60}`.slice(-2)}`}destroy(){super.destroy(),this.unsubscribe(),this.wrapper.remove()}}export{i as default};

package/dist/plugins/hover.min.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):((e="undefined"!=typeof globalThis?globalThis:e||self).WaveSurfer=e.WaveSurfer||{},e.WaveSurfer.Hover=t())}(this,(function(){"use strict";class e{constructor(){this.listeners={},this.on=this.addEventListener,this.un=this.removeEventListener}addEventListener(e,t,s){if(this.listeners[e]||(this.listeners[e]=new Set),this.listeners[e].add(t),null==s?void 0:s.once){const s=()=>{this.removeEventListener(e,s),this.removeEventListener(e,t)};return this.addEventListener(e,s),s}return()=>this.removeEventListener(e,t)}removeEventListener(e,t){var s;null===(s=this.listeners[e])||void 0===s||s.delete(t)}once(e,t){return this.on(e,t,{once:!0})}unAll(){this.listeners={}}emit(e,...t){this.listeners[e]&&this.listeners[e].forEach((e=>e(...t)))}}class t extends e{constructor(e){super(),this.subscriptions=[],this.options=e}onInit(){}init(e){this.wavesurfer=e,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((e=>e()))}}const s={lineWidth:1,labelSize:11};class i extends t{constructor(e){super(e||{}),this.unsubscribe=()=>{},this.onPointerMove=e=>{if(!this.wavesurfer)return;const t=this.wavesurfer.getWrapper().getBoundingClientRect(),{width:s}=t,i=e.clientX-t.left,r=Math.min(1,Math.max(0,i/s)),n=Math.min(s-this.options.lineWidth-1,i);this.wrapper.style.transform=`translateX(${n}px)`,this.wrapper.style.opacity="1";const o=this.wavesurfer.getDuration()||0;this.label.textContent=this.formatTime(o*r);const a=this.label.offsetWidth;this.label.style.transform=n+a>s?`translateX(-${a+this.options.lineWidth}px)`:"",this.emit("hover",r)},this.onPointerLeave=()=>{this.wrapper.style.opacity="0"},this.options=Object.assign({},s,e),this.wrapper=document.createElement("div"),this.label=document.createElement("span"),this.wrapper.appendChild(this.label)}static create(e){return new i(e)}addUnits(e){return`${e}${"number"==typeof e?"px":""}`}onInit(){if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");const e=this.wavesurfer.options,t=this.options.lineColor||e.cursorColor||e.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 ${t}`,opacity:"0",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(e){return`${Math.floor(e/60)}:${`0${Math.floor(e)%60}`.slice(-2)}`}destroy(){super.destroy(),this.unsubscribe(),this.wrapper.remove()}}return i}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):((e="undefined"!=typeof globalThis?globalThis:e||self).WaveSurfer=e.WaveSurfer||{},e.WaveSurfer.Hover=t())}(this,(function(){"use strict";class e{constructor(){this.listeners={},this.on=this.addEventListener,this.un=this.removeEventListener}addEventListener(e,t,i){if(this.listeners[e]||(this.listeners[e]=new Set),this.listeners[e].add(t),null==i?void 0:i.once){const i=()=>{this.removeEventListener(e,i),this.removeEventListener(e,t)};return this.addEventListener(e,i),i}return()=>this.removeEventListener(e,t)}removeEventListener(e,t){var i;null===(i=this.listeners[e])||void 0===i||i.delete(t)}once(e,t){return this.on(e,t,{once:!0})}unAll(){this.listeners={}}emit(e,...t){this.listeners[e]&&this.listeners[e].forEach((e=>e(...t)))}}class t extends e{constructor(e){super(),this.subscriptions=[],this.options=e}onInit(){}init(e){this.wavesurfer=e,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((e=>e()))}}const i={lineWidth:1,labelSize:11};class s extends t{constructor(e){super(e||{}),this.unsubscribe=()=>{},this.onPointerMove=e=>{if(!this.wavesurfer)return;const t=this.wavesurfer.getWrapper().getBoundingClientRect(),{width:i}=t,s=e.clientX-t.left,n=Math.min(1,Math.max(0,s/i)),r=Math.min(i-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*n);const a=this.label.offsetWidth;this.label.style.transform=r+a>i?`translateX(-${a+this.options.lineWidth}px)`:"",this.emit("hover",n)},this.onPointerLeave=()=>{this.wrapper.style.opacity="0"},this.options=Object.assign({},i,e),this.wrapper=document.createElement("div"),this.label=document.createElement("span"),this.wrapper.appendChild(this.label)}static create(e){return new s(e)}addUnits(e){return`${e}${"number"==typeof e?"px":""}`}onInit(){if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");const e=this.wavesurfer.options,t=this.options.lineColor||e.cursorColor||e.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 ${t}`,opacity:"0",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 i=this.wavesurfer.getWrapper();i.appendChild(this.wrapper),i.addEventListener("pointermove",this.onPointerMove),i.addEventListener("pointerleave",this.onPointerLeave),i.addEventListener("wheel",this.onPointerMove),this.unsubscribe=()=>{i.removeEventListener("pointermove",this.onPointerMove),i.removeEventListener("pointerleave",this.onPointerLeave),i.removeEventListener("wheel",this.onPointerLeave)}}formatTime(e){return`${Math.floor(e/60)}:${`0${Math.floor(e)%60}`.slice(-2)}`}destroy(){super.destroy(),this.unsubscribe(),this.wrapper.remove()}}return s}));

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

@@ -57,22 +57,18 @@ export type SpectrogramPluginEvents = BasePluginEvents & {
 };
 declare class SpectrogramPlugin extends BasePlugin<SpectrogramPluginEvents, SpectrogramPluginOptions> {
     static create(options?: SpectrogramPluginOptions): SpectrogramPlugin;
-    utils: {
-        style: (el: HTMLElement, styles: Record<string, string>) => CSSStyleDeclaration & Record<string, string>;
-    };
     constructor(options: SpectrogramPluginOptions);
     onInit(): void;
     destroy(): void;
-    createWrapper(): void;
-    _wrapperClickHandler(event: any): void;
-    createCanvas(): void;
-    render(): void;
-    drawSpectrogram: (frequenciesData: any) => void;
-    getFrequencies(buffer: AudioBuffer): number[];
-    loadFrequenciesData(url: any): Promise<void>;
-    freqType(freq: any): string | number;
-    unitType(freq: any): "KHz" | "Hz";
-    loadLabels(bgFill: any, fontSizeFreq: any, fontSizeUnit: any, fontType: any, textColorFreq: any, textColorUnit: any, textAlign: any, container: any, channels: any): void;
-    resample(oldMatrix: any): Uint8Array[];
+    loadFrequenciesData(url: string | URL): Promise<void>;
+    private createWrapper;
+    private createCanvas;
+    private render;
+    private drawSpectrogram;
+    private getFrequencies;
+    private freqType;
+    private unitType;
+    private loadLabels;
+    private resample;
 }
 export default SpectrogramPlugin;

package/dist/plugins/regions.cjs

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

package/dist/plugins/regions.esm.js

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

package/dist/plugins/regions.js

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

package/dist/plugins/regions.min.js

@@ -1 +1 @@
-!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):((t="undefined"!=typeof globalThis?globalThis:t||self).WaveSurfer=t.WaveSurfer||{},t.WaveSurfer.Regions=e())}(this,(function(){"use strict";class t{constructor(){this.listeners={},this.on=this.addEventListener,this.un=this.removeEventListener}addEventListener(t,e,i){if(this.listeners[t]||(this.listeners[t]=new Set),this.listeners[t].add(e),null==i?void 0:i.once){const i=()=>{this.removeEventListener(t,i),this.removeEventListener(t,e)};return this.addEventListener(t,i),i}return()=>this.removeEventListener(t,e)}removeEventListener(t,e){var i;null===(i=this.listeners[t])||void 0===i||i.delete(e)}once(t,e){return this.on(t,e,{once:!0})}unAll(){this.listeners={}}emit(t,...e){this.listeners[t]&&this.listeners[t].forEach((t=>t(...e)))}}class e extends t{constructor(t){super(),this.subscriptions=[],this.options=t}onInit(){}init(t){this.wavesurfer=t,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((t=>t()))}}function i(t,e,i,n,s=3,r=0){if(!t)return()=>{};let o=()=>{};const a=a=>{if(a.button!==r)return;a.preventDefault(),a.stopPropagation();let l=a.clientX,h=a.clientY,d=!1;const u=n=>{n.preventDefault(),n.stopPropagation();const r=n.clientX,o=n.clientY,a=r-l,u=o-h;if(d||Math.abs(a)>s||Math.abs(u)>s){const n=t.getBoundingClientRect(),{left:s,top:c}=n;d||(null==i||i(l-s,h-c),d=!0),e(a,u,r-s,o-c),l=r,h=o}},c=()=>{d&&(null==n||n()),o()},v=t=>{d&&(t.stopPropagation(),t.preventDefault())},g=t=>{d&&t.preventDefault()};document.addEventListener("pointermove",u),document.addEventListener("pointerup",c),document.addEventListener("pointerout",c),document.addEventListener("pointercancel",c),document.addEventListener("touchmove",g,{passive:!1}),document.addEventListener("click",v,{capture:!0}),o=()=>{document.removeEventListener("pointermove",u),document.removeEventListener("pointerup",c),document.removeEventListener("pointerout",c),document.removeEventListener("pointercancel",c),document.removeEventListener("touchmove",g),setTimeout((()=>{document.removeEventListener("click",v,{capture:!0})}),10)}};return t.addEventListener("pointerdown",a),()=>{o(),t.removeEventListener("pointerdown",a)}}class n extends t{constructor(t,e,i=0){var n,s,r,o,a,l,h;super(),this.totalDuration=e,this.numberOfChannels=i,this.minLength=0,this.maxLength=1/0,this.id=t.id||`region-${Math.random().toString(32).slice(2)}`,this.start=this.clampPosition(t.start),this.end=this.clampPosition(null!==(n=t.end)&&void 0!==n?n:t.start),this.drag=null===(s=t.drag)||void 0===s||s,this.resize=null===(r=t.resize)||void 0===r||r,this.color=null!==(o=t.color)&&void 0!==o?o:"rgba(0, 0, 0, 0.1)",this.minLength=null!==(a=t.minLength)&&void 0!==a?a:this.minLength,this.maxLength=null!==(l=t.maxLength)&&void 0!==l?l:this.maxLength,this.channelIdx=null!==(h=t.channelIdx)&&void 0!==h?h:-1,this.element=this.initElement(),this.setContent(t.content),this.setPart(),this.renderPosition(),this.initMouseEvents()}clampPosition(t){return Math.max(0,Math.min(this.totalDuration,t))}setPart(){const t=this.start===this.end;this.element.setAttribute("part",`${t?"marker":"region"} ${this.id}`)}addResizeHandles(t){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: ew-resize;\n        word-break: keep-all;\n      "),e.setAttribute("part","region-handle region-handle-left");const n=e.cloneNode();n.setAttribute("data-resize","right"),n.style.left="",n.style.right="0",n.style.borderRight=n.style.borderLeft,n.style.borderLeft="",n.style.borderRadius="0 2px 2px 0",n.setAttribute("part","region-handle region-handle-right"),t.appendChild(e),t.appendChild(n);i(e,(t=>this.onResize(t,"start")),(()=>null),(()=>this.onEndResizing()),1),i(n,(t=>this.onResize(t,"end")),(()=>null),(()=>this.onEndResizing()),1)}removeResizeHandles(t){const e=t.querySelector('[data-resize="left"]'),i=t.querySelector('[data-resize="right"]');e&&t.removeChild(e),i&&t.removeChild(i)}initElement(){const t=document.createElement("div"),e=this.start===this.end;let i=0,n=100;return this.channelIdx>=0&&this.channelIdx<this.numberOfChannels&&(n=100/this.numberOfChannels,i=n*this.channelIdx),t.setAttribute("style",`\n      position: absolute;\n      top: ${i}%;\n      height: ${n}%;\n      background-color: ${e?"none":this.color};\n      border-left: ${e?"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    `),!e&&this.resize&&this.addResizeHandles(t),t}renderPosition(){const t=this.start/this.totalDuration,e=(this.totalDuration-this.end)/this.totalDuration;this.element.style.left=100*t+"%",this.element.style.right=100*e+"%"}toggleCursor(t){this.drag&&(this.element.style.cursor=t?"grabbing":"grab")}initMouseEvents(){const{element:t}=this;t&&(t.addEventListener("click",(t=>this.emit("click",t))),t.addEventListener("mouseenter",(t=>this.emit("over",t))),t.addEventListener("mouseleave",(t=>this.emit("leave",t))),t.addEventListener("dblclick",(t=>this.emit("dblclick",t))),t.addEventListener("pointerdown",(()=>this.toggleCursor(!0))),t.addEventListener("pointerup",(()=>this.toggleCursor(!1))),i(t,(t=>this.onMove(t)),(()=>this.toggleCursor(!0)),(()=>{this.toggleCursor(!1),this.drag&&this.emit("update-end")})))}_onUpdate(t,e){if(!this.element.parentElement)return;const i=t/this.element.parentElement.clientWidth*this.totalDuration,n=e&&"start"!==e?this.start:this.start+i,s=e&&"end"!==e?this.end:this.end+i,r=s-n;n>=0&&s<=this.totalDuration&&n<=s&&r>=this.minLength&&r<=this.maxLength&&(this.start=n,this.end=s,this.renderPosition(),this.emit("update"))}onMove(t){this.drag&&this._onUpdate(t)}onResize(t,e){this.resize&&this._onUpdate(t,e)}onEndResizing(){this.resize&&this.emit("update-end")}_setTotalDuration(t){this.totalDuration=t,this.renderPosition()}play(){this.emit("play")}setContent(t){var e;if(null===(e=this.content)||void 0===e||e.remove(),t){if("string"==typeof t){this.content=document.createElement("div");const e=this.start===this.end;this.content.style.padding=`0.2em ${e?.2:.4}em`,this.content.style.display="inline-block",this.content.textContent=t}else this.content=t;this.content.setAttribute("part","region-content"),this.element.appendChild(this.content)}else this.content=void 0}setOptions(t){var e,i;if(t.color&&(this.color=t.color,this.element.style.backgroundColor=this.color),void 0!==t.drag&&(this.drag=t.drag,this.element.style.cursor=this.drag?"grab":"default"),void 0!==t.start||void 0!==t.end){const n=this.start===this.end;this.start=this.clampPosition(null!==(e=t.start)&&void 0!==e?e:this.start),this.end=this.clampPosition(null!==(i=t.end)&&void 0!==i?i:n?this.start:this.end),this.renderPosition(),this.setPart()}if(t.content&&this.setContent(t.content),t.id&&(this.id=t.id,this.setPart()),void 0!==t.resize&&t.resize!==this.resize){const e=this.start===this.end;this.resize=t.resize,this.resize&&!e?this.addResizeHandles(this.element):this.removeResizeHandles(this.element)}}remove(){this.emit("remove"),this.element.remove(),this.element=null}}class s extends e{constructor(t){super(t),this.regions=[],this.regionsContainer=this.initRegionsContainer()}static create(t){return new s(t)}onInit(){if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");this.wavesurfer.getWrapper().appendChild(this.regionsContainer);let t=[];this.subscriptions.push(this.wavesurfer.on("timeupdate",(e=>{const i=this.regions.filter((t=>t.start<=e&&(t.end===t.start?t.start+.05:t.end)>=e));i.forEach((e=>{t.includes(e)||this.emit("region-in",e)})),t.forEach((t=>{i.includes(t)||this.emit("region-out",t)})),t=i})))}initRegionsContainer(){const t=document.createElement("div");return t.setAttribute("style","\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      z-index: 3;\n      pointer-events: none;\n    "),t}getRegions(){return this.regions}avoidOverlapping(t){if(!t.content)return;const e=t.content,i=e.getBoundingClientRect(),n=this.regions.map((e=>{if(e===t||!e.content)return 0;const n=e.content.getBoundingClientRect();return i.left<n.left+n.width&&n.left<i.left+i.width?n.height:0})).reduce(((t,e)=>t+e),0);e.style.marginTop=`${n}px`}adjustScroll(t){var e,i;const n=null===(i=null===(e=this.wavesurfer)||void 0===e?void 0:e.getWrapper())||void 0===i?void 0:i.parentElement;if(!n)return;const{clientWidth:s,scrollWidth:r}=n;if(r<=s)return;const o=n.getBoundingClientRect(),a=t.element.getBoundingClientRect(),l=a.left-o.left,h=a.right-o.left;l<0?n.scrollLeft+=l:h>s&&(n.scrollLeft+=h-s)}saveRegion(t){this.regionsContainer.appendChild(t.element),this.avoidOverlapping(t),this.regions.push(t);const e=[t.on("update",(()=>{this.adjustScroll(t)})),t.on("update-end",(()=>{this.avoidOverlapping(t),this.emit("region-updated",t)})),t.on("play",(()=>{var e,i;null===(e=this.wavesurfer)||void 0===e||e.play(),null===(i=this.wavesurfer)||void 0===i||i.setTime(t.start)})),t.on("click",(e=>{this.emit("region-clicked",t,e)})),t.on("dblclick",(e=>{this.emit("region-double-clicked",t,e)})),t.once("remove",(()=>{e.forEach((t=>t())),this.regions=this.regions.filter((e=>e!==t)),this.emit("region-removed",t)}))];this.subscriptions.push(...e),this.emit("region-created",t)}addRegion(t){var e,i;if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");const s=this.wavesurfer.getDuration(),r=null===(i=null===(e=this.wavesurfer)||void 0===e?void 0:e.getDecodedData())||void 0===i?void 0:i.numberOfChannels,o=new n(t,s,r);return s?this.saveRegion(o):this.subscriptions.push(this.wavesurfer.once("ready",(t=>{o._setTotalDuration(t),this.saveRegion(o)}))),o}enableDragSelection(t,e=3){var s;const r=null===(s=this.wavesurfer)||void 0===s?void 0:s.getWrapper();if(!(r&&r instanceof HTMLElement))return()=>{};let o=null,a=0;return i(r,((t,e,i)=>{o&&o._onUpdate(t,i>a?"end":"start")}),(e=>{var i,s;if(a=e,!this.wavesurfer)return;const r=this.wavesurfer.getDuration(),l=null===(s=null===(i=this.wavesurfer)||void 0===i?void 0:i.getDecodedData())||void 0===s?void 0:s.numberOfChannels,h=this.wavesurfer.getWrapper().clientWidth,d=e/h*r,u=(e+5)/h*r;o=new n(Object.assign(Object.assign({},t),{start:d,end:u}),r,l),this.regionsContainer.appendChild(o.element)}),(()=>{o&&(this.saveRegion(o),o=null)}),e)}clearRegions(){this.regions.forEach((t=>t.remove()))}destroy(){this.clearRegions(),super.destroy(),this.regionsContainer.remove()}}return s}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define(e):((t="undefined"!=typeof globalThis?globalThis:t||self).WaveSurfer=t.WaveSurfer||{},t.WaveSurfer.Regions=e())}(this,(function(){"use strict";class t{constructor(){this.listeners={},this.on=this.addEventListener,this.un=this.removeEventListener}addEventListener(t,e,i){if(this.listeners[t]||(this.listeners[t]=new Set),this.listeners[t].add(e),null==i?void 0:i.once){const i=()=>{this.removeEventListener(t,i),this.removeEventListener(t,e)};return this.addEventListener(t,i),i}return()=>this.removeEventListener(t,e)}removeEventListener(t,e){var i;null===(i=this.listeners[t])||void 0===i||i.delete(e)}once(t,e){return this.on(t,e,{once:!0})}unAll(){this.listeners={}}emit(t,...e){this.listeners[t]&&this.listeners[t].forEach((t=>t(...e)))}}class e extends t{constructor(t){super(),this.subscriptions=[],this.options=t}onInit(){}init(t){this.wavesurfer=t,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((t=>t()))}}function i(t,e,i,n,s=3,r=0){if(!t)return()=>{};let o=()=>{};const a=a=>{if(a.button!==r)return;a.preventDefault(),a.stopPropagation();let l=a.clientX,h=a.clientY,d=!1;const u=n=>{n.preventDefault(),n.stopPropagation();const r=n.clientX,o=n.clientY,a=r-l,u=o-h;if(d||Math.abs(a)>s||Math.abs(u)>s){const n=t.getBoundingClientRect(),{left:s,top:c}=n;d||(null==i||i(l-s,h-c),d=!0),e(a,u,r-s,o-c),l=r,h=o}},c=()=>{d&&(null==n||n()),o()},v=t=>{d&&(t.stopPropagation(),t.preventDefault())},g=t=>{d&&t.preventDefault()};document.addEventListener("pointermove",u),document.addEventListener("pointerup",c),document.addEventListener("pointerout",c),document.addEventListener("pointercancel",c),document.addEventListener("touchmove",g,{passive:!1}),document.addEventListener("click",v,{capture:!0}),o=()=>{document.removeEventListener("pointermove",u),document.removeEventListener("pointerup",c),document.removeEventListener("pointerout",c),document.removeEventListener("pointercancel",c),document.removeEventListener("touchmove",g),setTimeout((()=>{document.removeEventListener("click",v,{capture:!0})}),10)}};return t.addEventListener("pointerdown",a),()=>{o(),t.removeEventListener("pointerdown",a)}}class n extends t{constructor(t,e,i=0){var n,s,r,o,a,l,h;super(),this.totalDuration=e,this.numberOfChannels=i,this.minLength=0,this.maxLength=1/0,this.id=t.id||`region-${Math.random().toString(32).slice(2)}`,this.start=this.clampPosition(t.start),this.end=this.clampPosition(null!==(n=t.end)&&void 0!==n?n:t.start),this.drag=null===(s=t.drag)||void 0===s||s,this.resize=null===(r=t.resize)||void 0===r||r,this.color=null!==(o=t.color)&&void 0!==o?o:"rgba(0, 0, 0, 0.1)",this.minLength=null!==(a=t.minLength)&&void 0!==a?a:this.minLength,this.maxLength=null!==(l=t.maxLength)&&void 0!==l?l:this.maxLength,this.channelIdx=null!==(h=t.channelIdx)&&void 0!==h?h:-1,this.element=this.initElement(),this.setContent(t.content),this.setPart(),this.renderPosition(),this.initMouseEvents()}clampPosition(t){return Math.max(0,Math.min(this.totalDuration,t))}setPart(){const t=this.start===this.end;this.element.setAttribute("part",`${t?"marker":"region"} ${this.id}`)}addResizeHandles(t){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: ew-resize;\n        word-break: keep-all;\n      "),e.setAttribute("part","region-handle region-handle-left");const n=e.cloneNode();n.setAttribute("data-resize","right"),n.style.left="",n.style.right="0",n.style.borderRight=n.style.borderLeft,n.style.borderLeft="",n.style.borderRadius="0 2px 2px 0",n.setAttribute("part","region-handle region-handle-right"),t.appendChild(e),t.appendChild(n);i(e,(t=>this.onResize(t,"start")),(()=>null),(()=>this.onEndResizing()),1),i(n,(t=>this.onResize(t,"end")),(()=>null),(()=>this.onEndResizing()),1)}removeResizeHandles(t){const e=t.querySelector('[data-resize="left"]'),i=t.querySelector('[data-resize="right"]');e&&t.removeChild(e),i&&t.removeChild(i)}initElement(){const t=document.createElement("div"),e=this.start===this.end;let i=0,n=100;return this.channelIdx>=0&&this.channelIdx<this.numberOfChannels&&(n=100/this.numberOfChannels,i=n*this.channelIdx),t.setAttribute("style",`\n      position: absolute;\n      top: ${i}%;\n      height: ${n}%;\n      background-color: ${e?"none":this.color};\n      border-left: ${e?"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    `),!e&&this.resize&&this.addResizeHandles(t),t}renderPosition(){const t=this.start/this.totalDuration,e=(this.totalDuration-this.end)/this.totalDuration;this.element.style.left=100*t+"%",this.element.style.right=100*e+"%"}toggleCursor(t){this.drag&&(this.element.style.cursor=t?"grabbing":"grab")}initMouseEvents(){const{element:t}=this;t&&(t.addEventListener("click",(t=>this.emit("click",t))),t.addEventListener("mouseenter",(t=>this.emit("over",t))),t.addEventListener("mouseleave",(t=>this.emit("leave",t))),t.addEventListener("dblclick",(t=>this.emit("dblclick",t))),t.addEventListener("pointerdown",(()=>this.toggleCursor(!0))),t.addEventListener("pointerup",(()=>this.toggleCursor(!1))),i(t,(t=>this.onMove(t)),(()=>this.toggleCursor(!0)),(()=>{this.toggleCursor(!1),this.drag&&this.emit("update-end")})))}_onUpdate(t,e){if(!this.element.parentElement)return;const{width:i}=this.element.parentElement.getBoundingClientRect(),n=t/i*this.totalDuration,s=e&&"start"!==e?this.start:this.start+n,r=e&&"end"!==e?this.end:this.end+n,o=r-s;s>=0&&r<=this.totalDuration&&s<=r&&o>=this.minLength&&o<=this.maxLength&&(this.start=s,this.end=r,this.renderPosition(),this.emit("update"))}onMove(t){this.drag&&this._onUpdate(t)}onResize(t,e){this.resize&&this._onUpdate(t,e)}onEndResizing(){this.resize&&this.emit("update-end")}_setTotalDuration(t){this.totalDuration=t,this.renderPosition()}play(){this.emit("play")}setContent(t){var e;if(null===(e=this.content)||void 0===e||e.remove(),t){if("string"==typeof t){this.content=document.createElement("div");const e=this.start===this.end;this.content.style.padding=`0.2em ${e?.2:.4}em`,this.content.style.display="inline-block",this.content.textContent=t}else this.content=t;this.content.setAttribute("part","region-content"),this.element.appendChild(this.content)}else this.content=void 0}setOptions(t){var e,i;if(t.color&&(this.color=t.color,this.element.style.backgroundColor=this.color),void 0!==t.drag&&(this.drag=t.drag,this.element.style.cursor=this.drag?"grab":"default"),void 0!==t.start||void 0!==t.end){const n=this.start===this.end;this.start=this.clampPosition(null!==(e=t.start)&&void 0!==e?e:this.start),this.end=this.clampPosition(null!==(i=t.end)&&void 0!==i?i:n?this.start:this.end),this.renderPosition(),this.setPart()}if(t.content&&this.setContent(t.content),t.id&&(this.id=t.id,this.setPart()),void 0!==t.resize&&t.resize!==this.resize){const e=this.start===this.end;this.resize=t.resize,this.resize&&!e?this.addResizeHandles(this.element):this.removeResizeHandles(this.element)}}remove(){this.emit("remove"),this.element.remove(),this.element=null}}class s extends e{constructor(t){super(t),this.regions=[],this.regionsContainer=this.initRegionsContainer()}static create(t){return new s(t)}onInit(){if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");this.wavesurfer.getWrapper().appendChild(this.regionsContainer);let t=[];this.subscriptions.push(this.wavesurfer.on("timeupdate",(e=>{const i=this.regions.filter((t=>t.start<=e&&(t.end===t.start?t.start+.05:t.end)>=e));i.forEach((e=>{t.includes(e)||this.emit("region-in",e)})),t.forEach((t=>{i.includes(t)||this.emit("region-out",t)})),t=i})))}initRegionsContainer(){const t=document.createElement("div");return t.setAttribute("style","\n      position: absolute;\n      top: 0;\n      left: 0;\n      width: 100%;\n      height: 100%;\n      z-index: 3;\n      pointer-events: none;\n    "),t}getRegions(){return this.regions}avoidOverlapping(t){if(!t.content)return;const e=t.content,i=e.getBoundingClientRect(),n=this.regions.map((e=>{if(e===t||!e.content)return 0;const n=e.content.getBoundingClientRect();return i.left<n.left+n.width&&n.left<i.left+i.width?n.height:0})).reduce(((t,e)=>t+e),0);e.style.marginTop=`${n}px`}adjustScroll(t){var e,i;const n=null===(i=null===(e=this.wavesurfer)||void 0===e?void 0:e.getWrapper())||void 0===i?void 0:i.parentElement;if(!n)return;const{clientWidth:s,scrollWidth:r}=n;if(r<=s)return;const o=n.getBoundingClientRect(),a=t.element.getBoundingClientRect(),l=a.left-o.left,h=a.right-o.left;l<0?n.scrollLeft+=l:h>s&&(n.scrollLeft+=h-s)}saveRegion(t){this.regionsContainer.appendChild(t.element),this.avoidOverlapping(t),this.regions.push(t);const e=[t.on("update",(()=>{this.adjustScroll(t)})),t.on("update-end",(()=>{this.avoidOverlapping(t),this.emit("region-updated",t)})),t.on("play",(()=>{var e,i;null===(e=this.wavesurfer)||void 0===e||e.play(),null===(i=this.wavesurfer)||void 0===i||i.setTime(t.start)})),t.on("click",(e=>{this.emit("region-clicked",t,e)})),t.on("dblclick",(e=>{this.emit("region-double-clicked",t,e)})),t.once("remove",(()=>{e.forEach((t=>t())),this.regions=this.regions.filter((e=>e!==t)),this.emit("region-removed",t)}))];this.subscriptions.push(...e),this.emit("region-created",t)}addRegion(t){var e,i;if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");const s=this.wavesurfer.getDuration(),r=null===(i=null===(e=this.wavesurfer)||void 0===e?void 0:e.getDecodedData())||void 0===i?void 0:i.numberOfChannels,o=new n(t,s,r);return s?this.saveRegion(o):this.subscriptions.push(this.wavesurfer.once("ready",(t=>{o._setTotalDuration(t),this.saveRegion(o)}))),o}enableDragSelection(t,e=3){var s;const r=null===(s=this.wavesurfer)||void 0===s?void 0:s.getWrapper();if(!(r&&r instanceof HTMLElement))return()=>{};let o=null,a=0;return i(r,((t,e,i)=>{o&&o._onUpdate(t,i>a?"end":"start")}),(e=>{var i,s;if(a=e,!this.wavesurfer)return;const r=this.wavesurfer.getDuration(),l=null===(s=null===(i=this.wavesurfer)||void 0===i?void 0:i.getDecodedData())||void 0===s?void 0:s.numberOfChannels,{width:h}=this.wavesurfer.getWrapper().getBoundingClientRect(),d=e/h*r,u=(e+5)/h*r;o=new n(Object.assign(Object.assign({},t),{start:d,end:u}),r,l),this.regionsContainer.appendChild(o.element)}),(()=>{o&&(this.saveRegion(o),o=null)}),e)}clearRegions(){this.regions.forEach((t=>t.remove()))}destroy(){this.clearRegions(),super.destroy(),this.regionsContainer.remove()}}return s}));

package/dist/plugins/spectrogram.cjs

@@ -1 +1 @@
-"use strict";class t{constructor(){this.listeners={},this.on=this.addEventListener,this.un=this.removeEventListener}addEventListener(t,e,s){if(this.listeners[t]||(this.listeners[t]=new Set),this.listeners[t].add(e),null==s?void 0:s.once){const s=()=>{this.removeEventListener(t,s),this.removeEventListener(t,e)};return this.addEventListener(t,s),s}return()=>this.removeEventListener(t,e)}removeEventListener(t,e){var s;null===(s=this.listeners[t])||void 0===s||s.delete(e)}once(t,e){return this.on(t,e,{once:!0})}unAll(){this.listeners={}}emit(t,...e){this.listeners[t]&&this.listeners[t].forEach((t=>t(...e)))}}class e extends t{constructor(t){super(),this.subscriptions=[],this.options=t}onInit(){}init(t){this.wavesurfer=t,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((t=>t()))}}function s(t,e,s,i){switch(this.bufferSize=t,this.sampleRate=e,this.bandwidth=2/t*(e/2),this.sinTable=new Float32Array(t),this.cosTable=new Float32Array(t),this.windowValues=new Float32Array(t),this.reverseTable=new Uint32Array(t),this.peakBand=0,this.peak=0,s){case"bartlett":for(a=0;a<t;a++)this.windowValues[a]=2/(t-1)*((t-1)/2-Math.abs(a-(t-1)/2));break;case"bartlettHann":for(a=0;a<t;a++)this.windowValues[a]=.62-.48*Math.abs(a/(t-1)-.5)-.38*Math.cos(2*Math.PI*a/(t-1));break;case"blackman":for(i=i||.16,a=0;a<t;a++)this.windowValues[a]=(1-i)/2-.5*Math.cos(2*Math.PI*a/(t-1))+i/2*Math.cos(4*Math.PI*a/(t-1));break;case"cosine":for(a=0;a<t;a++)this.windowValues[a]=Math.cos(Math.PI*a/(t-1)-Math.PI/2);break;case"gauss":for(i=i||.25,a=0;a<t;a++)this.windowValues[a]=Math.pow(Math.E,-.5*Math.pow((a-(t-1)/2)/(i*(t-1)/2),2));break;case"hamming":for(a=0;a<t;a++)this.windowValues[a]=.54-.46*Math.cos(2*Math.PI*a/(t-1));break;case"hann":case void 0:for(a=0;a<t;a++)this.windowValues[a]=.5*(1-Math.cos(2*Math.PI*a/(t-1)));break;case"lanczoz":for(a=0;a<t;a++)this.windowValues[a]=Math.sin(Math.PI*(2*a/(t-1)-1))/(Math.PI*(2*a/(t-1)-1));break;case"rectangular":for(a=0;a<t;a++)this.windowValues[a]=1;break;case"triangular":for(a=0;a<t;a++)this.windowValues[a]=2/t*(t/2-Math.abs(a-(t-1)/2));break;default:throw Error("No such window function '"+s+"'")}for(var a,r=1,n=t>>1;r<t;){for(a=0;a<r;a++)this.reverseTable[a+r]=this.reverseTable[a]+n;r<<=1,n>>=1}for(a=0;a<t;a++)this.sinTable[a]=Math.sin(-Math.PI/a),this.cosTable[a]=Math.cos(-Math.PI/a);this.calculateSpectrum=function(t){var e,s,i,a=this.bufferSize,r=this.cosTable,n=this.sinTable,h=this.reverseTable,o=new Float32Array(a),l=new Float32Array(a),c=2/this.bufferSize,f=Math.sqrt,u=new Float32Array(a/2),p=Math.floor(Math.log(a)/Math.LN2);if(Math.pow(2,p)!==a)throw"Invalid buffer size, must be a power of 2.";if(a!==t.length)throw"Supplied buffer is not the same size as defined FFT. FFT Size: "+a+" Buffer Size: "+t.length;for(var d,w,v,M,b,g,m,y,x=1,k=0;k<a;k++)o[k]=t[h[k]]*this.windowValues[h[k]],l[k]=0;for(;x<a;){d=r[x],w=n[x],v=1,M=0;for(var q=0;q<x;q++){for(k=q;k<a;)g=v*o[b=k+x]-M*l[b],m=v*l[b]+M*o[b],o[b]=o[k]-g,l[b]=l[k]-m,o[k]+=g,l[k]+=m,k+=x<<1;v=(y=v)*d-M*w,M=y*w+M*d}x<<=1}k=0;for(var E=a/2;k<E;k++)(i=c*f((e=o[k])*e+(s=l[k])*s))>this.peak&&(this.peakBand=k,this.peak=i),u[k]=i;return u}}class i extends e{static create(t){return new i(t||{})}constructor(t){if(super(t),this.utils={style:(t,e)=>Object.assign(t.style,e)},this.drawSpectrogram=t=>{isNaN(t[0][0])||(t=[t]),this.wrapper.style.height=this.height*t.length+"px",this.width=this.wavesurfer.getWrapper().offsetWidth,this.canvas.width=this.width,this.canvas.height=this.height*t.length;const e=this.spectrCc,s=this.height,i=this.width,a=this.buffer.sampleRate/2,r=this.frequencyMin,n=this.frequencyMax;if(e){for(let h=0;h<t.length;h++){const o=this.resample(t[h]),l=new ImageData(i,s);for(let t=0;t<o.length;t++)for(let e=0;e<o[t].length;e++){const a=this.colorMap[o[t][e]],r=4*((s-e)*i+t);l.data[r]=255*a[0],l.data[r+1]=255*a[1],l.data[r+2]=255*a[2],l.data[r+3]=255*a[3]}createImageBitmap(l).then((t=>{e.drawImage(t,0,s*(1-n/a),i,s*(n-r)/a,0,s*h,i,s)}))}this.loadLabels(this.options.labelsBackground,"12px","12px","",this.options.labelsColor,this.options.labelsHzColor||this.options.labelsColor,"center","#specLabels",t.length),this.emit("ready")}},this.frequenciesDataUrl=t.frequenciesDataUrl,this.container="string"==typeof t.container?document.querySelector(t.container):t.container,t.colorMap){if(t.colorMap.length<256)throw new Error("Colormap must contain 256 elements");for(let e=0;e<t.colorMap.length;e++){if(4!==t.colorMap[e].length)throw new Error("ColorMap entries must contain 4 values")}this.colorMap=t.colorMap}else{this.colorMap=[];for(let t=0;t<256;t++){const e=(255-t)/256;this.colorMap.push([e,e,e,1])}}this.fftSamples=t.fftSamples||512,this.height=t.height||this.fftSamples/2,this.noverlap=t.noverlap,this.windowFunc=t.windowFunc,this.alpha=t.alpha,this.frequencyMin=t.frequencyMin||0,this.frequencyMax=t.frequencyMax||0,this.createWrapper(),this.createCanvas()}onInit(){this.container=this.container||this.wavesurfer.getWrapper(),this.container.appendChild(this.wrapper),this.wavesurfer.options.fillParent&&this.utils.style(this.wrapper,{width:"100%",overflowX:"hidden",overflowY:"hidden"}),this.subscriptions.push(this.wavesurfer.on("redraw",(()=>this.render())))}destroy(){this.unAll(),this.wavesurfer.un("ready",this._onReady),this.wavesurfer.un("redraw",this._onRender),this.wavesurfer=null,this.util=null,this.options=null,this.wrapper&&(this.wrapper.remove(),this.wrapper=null),super.destroy()}createWrapper(){if(this.wrapper=document.createElement("div"),this.utils.style(this.wrapper,{display:"block",position:"relative",userSelect:"none"}),this.options.labels){const t=document.createElement("canvas");t.setAttribute("part","spec-labels"),this.utils.style(t,{position:"absolute",zIndex:9,width:"55px",height:"100%"}),this.wrapper.appendChild(t),this.labelsEl=t}this.wrapper.addEventListener("click",this._onWrapperClick)}_wrapperClickHandler(t){t.preventDefault();const e="offsetX"in t?t.offsetX:t.layerX;this.emit("click",e/this.width||0)}createCanvas(){const t=document.createElement("canvas");this.wrapper.appendChild(t),this.spectrCc=t.getContext("2d"),this.utils.style(t,{position:"absolute",left:0,top:0,width:"100%",height:"100%",zIndex:4}),this.canvas=t}render(){var t;this.frequenciesDataUrl?this.loadFrequenciesData(this.frequenciesDataUrl):this.drawSpectrogram(this.getFrequencies(null===(t=this.wavesurfer)||void 0===t?void 0:t.getDecodedData()))}getFrequencies(t){var e,i;const a=this.fftSamples,r=(null!==(e=this.options.splitChannels)&&void 0!==e?e:null===(i=this.wavesurfer)||void 0===i?void 0:i.options.splitChannels)?t.numberOfChannels:1;if(this.frequencyMax=this.frequencyMax||t.sampleRate/2,!t)return;this.buffer=t;const n=t.sampleRate,h=[];let o=this.noverlap;if(!o){const e=t.length/this.canvas.width;o=Math.max(0,Math.round(a-e))}const l=new s(a,n,this.windowFunc,this.alpha);for(let e=0;e<r;e++){const s=t.getChannelData(e),i=[];let r=0;for(;r+a<s.length;){const t=s.slice(r,r+a),e=l.calculateSpectrum(t),n=new Uint8Array(a/2);for(let t=0;t<a/2;t++)n[t]=Math.max(-255,45*Math.log10(e[t]));i.push(n),r+=a-o}h.push(i)}return h}loadFrequenciesData(t){return fetch(t).then((t=>t.json())).then(this.drawSpectrogram)}freqType(t){return t>=1e3?(t/1e3).toFixed(1):Math.round(t)}unitType(t){return t>=1e3?"KHz":"Hz"}loadLabels(t,e,s,i,a,r,n,h,o){t=t||"rgba(68,68,68,0)",e=e||"12px",s=s||"12px",i=i||"Helvetica",a=a||"#fff",r=r||"#fff",n=n||"center";const l=this.height||512,c=l/256*5,f=this.frequencyMin,u=(this.frequencyMax-f)/c,p=this.labelsEl.getContext("2d"),d=window.devicePixelRatio;if(this.labelsEl.height=this.height*o*d,this.labelsEl.width=55*d,p.scale(d,d),p)for(let h=0;h<o;h++){let o;for(p.fillStyle=t,p.fillRect(0,h*l,55,(1+h)*l),p.fill(),o=0;o<=c;o++){p.textAlign=n,p.textBaseline="middle";const t=f+u*o,c=this.freqType(t),d=this.unitType(t),w=16;let v;v=0==o?(1+h)*l+o-10:(1+h)*l-50*o+2,p.fillStyle=r,p.font=s+" "+i,p.fillText(d,w+24,v),p.fillStyle=a,p.font=e+" "+i,p.fillText(c,w,v)}}}resample(t){const e=this.width,s=[],i=1/t.length,a=1/e;let r;for(r=0;r<e;r++){const e=new Array(t[0].length);let n;for(n=0;n<t.length;n++){const s=n*i,h=s+i,o=r*a,l=o+a,c=h<=o||l<=s?0:Math.min(Math.max(h,o),Math.max(l,s))-Math.max(Math.min(h,o),Math.min(l,s));let f;if(c>0)for(f=0;f<t[0].length;f++)null==e[f]&&(e[f]=0),e[f]+=c/a*t[n][f]}const h=new Uint8Array(t[0].length);let o;for(o=0;o<t[0].length;o++)h[o]=e[o];s.push(h)}return s}}module.exports=i;
+"use strict";function e(e,t,s,i){return new(s||(s=Promise))((function(a,r){function n(e){try{o(i.next(e))}catch(e){r(e)}}function h(e){try{o(i.throw(e))}catch(e){r(e)}}function o(e){var t;e.done?a(e.value):(t=e.value,t instanceof s?t:new s((function(e){e(t)}))).then(n,h)}o((i=i.apply(e,t||[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;class t{constructor(){this.listeners={},this.on=this.addEventListener,this.un=this.removeEventListener}addEventListener(e,t,s){if(this.listeners[e]||(this.listeners[e]=new Set),this.listeners[e].add(t),null==s?void 0:s.once){const s=()=>{this.removeEventListener(e,s),this.removeEventListener(e,t)};return this.addEventListener(e,s),s}return()=>this.removeEventListener(e,t)}removeEventListener(e,t){var s;null===(s=this.listeners[e])||void 0===s||s.delete(t)}once(e,t){return this.on(e,t,{once:!0})}unAll(){this.listeners={}}emit(e,...t){this.listeners[e]&&this.listeners[e].forEach((e=>e(...t)))}}class s extends t{constructor(e){super(),this.subscriptions=[],this.options=e}onInit(){}init(e){this.wavesurfer=e,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((e=>e()))}}function i(e,t,s,i){switch(this.bufferSize=e,this.sampleRate=t,this.bandwidth=2/e*(t/2),this.sinTable=new Float32Array(e),this.cosTable=new Float32Array(e),this.windowValues=new Float32Array(e),this.reverseTable=new Uint32Array(e),this.peakBand=0,this.peak=0,s){case"bartlett":for(a=0;a<e;a++)this.windowValues[a]=2/(e-1)*((e-1)/2-Math.abs(a-(e-1)/2));break;case"bartlettHann":for(a=0;a<e;a++)this.windowValues[a]=.62-.48*Math.abs(a/(e-1)-.5)-.38*Math.cos(2*Math.PI*a/(e-1));break;case"blackman":for(i=i||.16,a=0;a<e;a++)this.windowValues[a]=(1-i)/2-.5*Math.cos(2*Math.PI*a/(e-1))+i/2*Math.cos(4*Math.PI*a/(e-1));break;case"cosine":for(a=0;a<e;a++)this.windowValues[a]=Math.cos(Math.PI*a/(e-1)-Math.PI/2);break;case"gauss":for(i=i||.25,a=0;a<e;a++)this.windowValues[a]=Math.pow(Math.E,-.5*Math.pow((a-(e-1)/2)/(i*(e-1)/2),2));break;case"hamming":for(a=0;a<e;a++)this.windowValues[a]=.54-.46*Math.cos(2*Math.PI*a/(e-1));break;case"hann":case void 0:for(a=0;a<e;a++)this.windowValues[a]=.5*(1-Math.cos(2*Math.PI*a/(e-1)));break;case"lanczoz":for(a=0;a<e;a++)this.windowValues[a]=Math.sin(Math.PI*(2*a/(e-1)-1))/(Math.PI*(2*a/(e-1)-1));break;case"rectangular":for(a=0;a<e;a++)this.windowValues[a]=1;break;case"triangular":for(a=0;a<e;a++)this.windowValues[a]=2/e*(e/2-Math.abs(a-(e-1)/2));break;default:throw Error("No such window function '"+s+"'")}for(var a,r=1,n=e>>1;r<e;){for(a=0;a<r;a++)this.reverseTable[a+r]=this.reverseTable[a]+n;r<<=1,n>>=1}for(a=0;a<e;a++)this.sinTable[a]=Math.sin(-Math.PI/a),this.cosTable[a]=Math.cos(-Math.PI/a);this.calculateSpectrum=function(e){var t,s,i,a=this.bufferSize,r=this.cosTable,n=this.sinTable,h=this.reverseTable,o=new Float32Array(a),l=new Float32Array(a),c=2/this.bufferSize,f=Math.sqrt,u=new Float32Array(a/2),p=Math.floor(Math.log(a)/Math.LN2);if(Math.pow(2,p)!==a)throw"Invalid buffer size, must be a power of 2.";if(a!==e.length)throw"Supplied buffer is not the same size as defined FFT. FFT Size: "+a+" Buffer Size: "+e.length;for(var d,w,v,M,b,g,m,y,x=1,E=0;E<a;E++)o[E]=e[h[E]]*this.windowValues[h[E]],l[E]=0;for(;x<a;){d=r[x],w=n[x],v=1,M=0;for(var q=0;q<x;q++){for(E=q;E<a;)g=v*o[b=E+x]-M*l[b],m=v*l[b]+M*o[b],o[b]=o[E]-g,l[b]=l[E]-m,o[E]+=g,l[E]+=m,E+=x<<1;v=(y=v)*d-M*w,M=y*w+M*d}x<<=1}E=0;for(var S=a/2;E<S;E++)(i=c*f((t=o[E])*t+(s=l[E])*s))>this.peak&&(this.peakBand=E,this.peak=i),u[E]=i;return u}}const a=(e,t)=>Object.assign(e.style,t);class r extends s{static create(e){return new r(e||{})}constructor(e){if(super(e),this.frequenciesDataUrl=e.frequenciesDataUrl,this.container="string"==typeof e.container?document.querySelector(e.container):e.container,e.colorMap){if(e.colorMap.length<256)throw new Error("Colormap must contain 256 elements");for(let t=0;t<e.colorMap.length;t++){if(4!==e.colorMap[t].length)throw new Error("ColorMap entries must contain 4 values")}this.colorMap=e.colorMap}else{this.colorMap=[];for(let e=0;e<256;e++){const t=(255-e)/256;this.colorMap.push([t,t,t,1])}}this.fftSamples=e.fftSamples||512,this.height=e.height||this.fftSamples/2,this.noverlap=e.noverlap,this.windowFunc=e.windowFunc,this.alpha=e.alpha,this.frequencyMin=e.frequencyMin||0,this.frequencyMax=e.frequencyMax||0,this.createWrapper(),this.createCanvas()}onInit(){this.container=this.container||this.wavesurfer.getWrapper(),this.container.appendChild(this.wrapper),this.wavesurfer.options.fillParent&&a(this.wrapper,{width:"100%",overflowX:"hidden",overflowY:"hidden"}),this.subscriptions.push(this.wavesurfer.on("redraw",(()=>this.render())))}destroy(){this.unAll(),this.wavesurfer.un("ready",this._onReady),this.wavesurfer.un("redraw",this._onRender),this.wavesurfer=null,this.util=null,this.options=null,this.wrapper&&(this.wrapper.remove(),this.wrapper=null),super.destroy()}loadFrequenciesData(t){return e(this,void 0,void 0,(function*(){const e=yield fetch(t);if(!e.ok)throw new Error("Unable to fetch frequencies data");const s=yield e.json();this.drawSpectrogram(s)}))}createWrapper(){if(this.wrapper=document.createElement("div"),a(this.wrapper,{display:"block",position:"relative",userSelect:"none"}),this.options.labels){const e=document.createElement("canvas");e.setAttribute("part","spec-labels"),a(e,{position:"absolute",zIndex:9,width:"55px",height:"100%"}),this.wrapper.appendChild(e),this.labelsEl=e}this.wrapper.addEventListener("click",this._onWrapperClick)}createCanvas(){const e=document.createElement("canvas");this.wrapper.appendChild(e),this.spectrCc=e.getContext("2d"),a(e,{position:"absolute",left:0,top:0,width:"100%",height:"100%",zIndex:4}),this.canvas=e}render(){var e;if(this.frequenciesDataUrl)this.loadFrequenciesData(this.frequenciesDataUrl);else{const t=null===(e=this.wavesurfer)||void 0===e?void 0:e.getDecodedData();t&&this.drawSpectrogram(this.getFrequencies(t))}}drawSpectrogram(e){isNaN(e[0][0])||(e=[e]),this.wrapper.style.height=this.height*e.length+"px",this.width=this.wavesurfer.getWrapper().offsetWidth,this.canvas.width=this.width,this.canvas.height=this.height*e.length;const t=this.spectrCc,s=this.height,i=this.width,a=this.buffer.sampleRate/2,r=this.frequencyMin,n=this.frequencyMax;if(t){for(let h=0;h<e.length;h++){const o=this.resample(e[h]),l=new ImageData(i,s);for(let e=0;e<o.length;e++)for(let t=0;t<o[e].length;t++){const a=this.colorMap[o[e][t]],r=4*((s-t)*i+e);l.data[r]=255*a[0],l.data[r+1]=255*a[1],l.data[r+2]=255*a[2],l.data[r+3]=255*a[3]}createImageBitmap(l).then((e=>{t.drawImage(e,0,s*(1-n/a),i,s*(n-r)/a,0,s*h,i,s)}))}this.options.labels&&this.loadLabels(this.options.labelsBackground,"12px","12px","",this.options.labelsColor,this.options.labelsHzColor||this.options.labelsColor,"center","#specLabels",e.length),this.emit("ready")}}getFrequencies(e){var t,s;const a=this.fftSamples,r=(null!==(t=this.options.splitChannels)&&void 0!==t?t:null===(s=this.wavesurfer)||void 0===s?void 0:s.options.splitChannels)?e.numberOfChannels:1;if(this.frequencyMax=this.frequencyMax||e.sampleRate/2,!e)return;this.buffer=e;const n=e.sampleRate,h=[];let o=this.noverlap;if(!o){const t=e.length/this.canvas.width;o=Math.max(0,Math.round(a-t))}const l=new i(a,n,this.windowFunc,this.alpha);for(let t=0;t<r;t++){const s=e.getChannelData(t),i=[];let r=0;for(;r+a<s.length;){const e=s.slice(r,r+a),t=l.calculateSpectrum(e),n=new Uint8Array(a/2);for(let e=0;e<a/2;e++)n[e]=Math.max(-255,45*Math.log10(t[e]));i.push(n),r+=a-o}h.push(i)}return h}freqType(e){return e>=1e3?(e/1e3).toFixed(1):Math.round(e)}unitType(e){return e>=1e3?"KHz":"Hz"}loadLabels(e,t,s,i,a,r,n,h,o){e=e||"rgba(68,68,68,0)",t=t||"12px",s=s||"12px",i=i||"Helvetica",a=a||"#fff",r=r||"#fff",n=n||"center";const l=this.height||512,c=l/256*5,f=this.frequencyMin,u=(this.frequencyMax-f)/c,p=this.labelsEl.getContext("2d"),d=window.devicePixelRatio;if(this.labelsEl.height=this.height*o*d,this.labelsEl.width=55*d,p.scale(d,d),p)for(let h=0;h<o;h++){let o;for(p.fillStyle=e,p.fillRect(0,h*l,55,(1+h)*l),p.fill(),o=0;o<=c;o++){p.textAlign=n,p.textBaseline="middle";const e=f+u*o,c=this.freqType(e),d=this.unitType(e),w=16;let v;v=0==o?(1+h)*l+o-10:(1+h)*l-50*o+2,p.fillStyle=r,p.font=s+" "+i,p.fillText(d,w+24,v),p.fillStyle=a,p.font=t+" "+i,p.fillText(c,w,v)}}}resample(e){const t=this.width,s=[],i=1/e.length,a=1/t;let r;for(r=0;r<t;r++){const t=new Array(e[0].length);let n;for(n=0;n<e.length;n++){const s=n*i,h=s+i,o=r*a,l=o+a,c=h<=o||l<=s?0:Math.min(Math.max(h,o),Math.max(l,s))-Math.max(Math.min(h,o),Math.min(l,s));let f;if(c>0)for(f=0;f<e[0].length;f++)null==t[f]&&(t[f]=0),t[f]+=c/a*e[n][f]}const h=new Uint8Array(e[0].length);let o;for(o=0;o<e[0].length;o++)h[o]=t[o];s.push(h)}return s}}module.exports=r;

package/dist/plugins/spectrogram.d.ts

@@ -57,22 +57,18 @@ export type SpectrogramPluginEvents = BasePluginEvents & {
 };
 declare class SpectrogramPlugin extends BasePlugin<SpectrogramPluginEvents, SpectrogramPluginOptions> {
     static create(options?: SpectrogramPluginOptions): SpectrogramPlugin;
-    utils: {
-        style: (el: HTMLElement, styles: Record<string, string>) => CSSStyleDeclaration & Record<string, string>;
-    };
     constructor(options: SpectrogramPluginOptions);
     onInit(): void;
     destroy(): void;
-    createWrapper(): void;
-    _wrapperClickHandler(event: any): void;
-    createCanvas(): void;
-    render(): void;
-    drawSpectrogram: (frequenciesData: any) => void;
-    getFrequencies(buffer: AudioBuffer): number[];
-    loadFrequenciesData(url: any): Promise<void>;
-    freqType(freq: any): string | number;
-    unitType(freq: any): "KHz" | "Hz";
-    loadLabels(bgFill: any, fontSizeFreq: any, fontSizeUnit: any, fontType: any, textColorFreq: any, textColorUnit: any, textAlign: any, container: any, channels: any): void;
-    resample(oldMatrix: any): Uint8Array[];
+    loadFrequenciesData(url: string | URL): Promise<void>;
+    private createWrapper;
+    private createCanvas;
+    private render;
+    private drawSpectrogram;
+    private getFrequencies;
+    private freqType;
+    private unitType;
+    private loadLabels;
+    private resample;
 }
 export default SpectrogramPlugin;

package/dist/plugins/spectrogram.esm.js

@@ -1 +1 @@
-class t{constructor(){this.listeners={},this.on=this.addEventListener,this.un=this.removeEventListener}addEventListener(t,e,s){if(this.listeners[t]||(this.listeners[t]=new Set),this.listeners[t].add(e),null==s?void 0:s.once){const s=()=>{this.removeEventListener(t,s),this.removeEventListener(t,e)};return this.addEventListener(t,s),s}return()=>this.removeEventListener(t,e)}removeEventListener(t,e){var s;null===(s=this.listeners[t])||void 0===s||s.delete(e)}once(t,e){return this.on(t,e,{once:!0})}unAll(){this.listeners={}}emit(t,...e){this.listeners[t]&&this.listeners[t].forEach((t=>t(...e)))}}class e extends t{constructor(t){super(),this.subscriptions=[],this.options=t}onInit(){}init(t){this.wavesurfer=t,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((t=>t()))}}function s(t,e,s,i){switch(this.bufferSize=t,this.sampleRate=e,this.bandwidth=2/t*(e/2),this.sinTable=new Float32Array(t),this.cosTable=new Float32Array(t),this.windowValues=new Float32Array(t),this.reverseTable=new Uint32Array(t),this.peakBand=0,this.peak=0,s){case"bartlett":for(a=0;a<t;a++)this.windowValues[a]=2/(t-1)*((t-1)/2-Math.abs(a-(t-1)/2));break;case"bartlettHann":for(a=0;a<t;a++)this.windowValues[a]=.62-.48*Math.abs(a/(t-1)-.5)-.38*Math.cos(2*Math.PI*a/(t-1));break;case"blackman":for(i=i||.16,a=0;a<t;a++)this.windowValues[a]=(1-i)/2-.5*Math.cos(2*Math.PI*a/(t-1))+i/2*Math.cos(4*Math.PI*a/(t-1));break;case"cosine":for(a=0;a<t;a++)this.windowValues[a]=Math.cos(Math.PI*a/(t-1)-Math.PI/2);break;case"gauss":for(i=i||.25,a=0;a<t;a++)this.windowValues[a]=Math.pow(Math.E,-.5*Math.pow((a-(t-1)/2)/(i*(t-1)/2),2));break;case"hamming":for(a=0;a<t;a++)this.windowValues[a]=.54-.46*Math.cos(2*Math.PI*a/(t-1));break;case"hann":case void 0:for(a=0;a<t;a++)this.windowValues[a]=.5*(1-Math.cos(2*Math.PI*a/(t-1)));break;case"lanczoz":for(a=0;a<t;a++)this.windowValues[a]=Math.sin(Math.PI*(2*a/(t-1)-1))/(Math.PI*(2*a/(t-1)-1));break;case"rectangular":for(a=0;a<t;a++)this.windowValues[a]=1;break;case"triangular":for(a=0;a<t;a++)this.windowValues[a]=2/t*(t/2-Math.abs(a-(t-1)/2));break;default:throw Error("No such window function '"+s+"'")}for(var a,r=1,n=t>>1;r<t;){for(a=0;a<r;a++)this.reverseTable[a+r]=this.reverseTable[a]+n;r<<=1,n>>=1}for(a=0;a<t;a++)this.sinTable[a]=Math.sin(-Math.PI/a),this.cosTable[a]=Math.cos(-Math.PI/a);this.calculateSpectrum=function(t){var e,s,i,a=this.bufferSize,r=this.cosTable,n=this.sinTable,h=this.reverseTable,o=new Float32Array(a),l=new Float32Array(a),c=2/this.bufferSize,f=Math.sqrt,u=new Float32Array(a/2),p=Math.floor(Math.log(a)/Math.LN2);if(Math.pow(2,p)!==a)throw"Invalid buffer size, must be a power of 2.";if(a!==t.length)throw"Supplied buffer is not the same size as defined FFT. FFT Size: "+a+" Buffer Size: "+t.length;for(var d,w,v,M,b,g,m,y,x=1,k=0;k<a;k++)o[k]=t[h[k]]*this.windowValues[h[k]],l[k]=0;for(;x<a;){d=r[x],w=n[x],v=1,M=0;for(var q=0;q<x;q++){for(k=q;k<a;)g=v*o[b=k+x]-M*l[b],m=v*l[b]+M*o[b],o[b]=o[k]-g,l[b]=l[k]-m,o[k]+=g,l[k]+=m,k+=x<<1;v=(y=v)*d-M*w,M=y*w+M*d}x<<=1}k=0;for(var E=a/2;k<E;k++)(i=c*f((e=o[k])*e+(s=l[k])*s))>this.peak&&(this.peakBand=k,this.peak=i),u[k]=i;return u}}class i extends e{static create(t){return new i(t||{})}constructor(t){if(super(t),this.utils={style:(t,e)=>Object.assign(t.style,e)},this.drawSpectrogram=t=>{isNaN(t[0][0])||(t=[t]),this.wrapper.style.height=this.height*t.length+"px",this.width=this.wavesurfer.getWrapper().offsetWidth,this.canvas.width=this.width,this.canvas.height=this.height*t.length;const e=this.spectrCc,s=this.height,i=this.width,a=this.buffer.sampleRate/2,r=this.frequencyMin,n=this.frequencyMax;if(e){for(let h=0;h<t.length;h++){const o=this.resample(t[h]),l=new ImageData(i,s);for(let t=0;t<o.length;t++)for(let e=0;e<o[t].length;e++){const a=this.colorMap[o[t][e]],r=4*((s-e)*i+t);l.data[r]=255*a[0],l.data[r+1]=255*a[1],l.data[r+2]=255*a[2],l.data[r+3]=255*a[3]}createImageBitmap(l).then((t=>{e.drawImage(t,0,s*(1-n/a),i,s*(n-r)/a,0,s*h,i,s)}))}this.loadLabels(this.options.labelsBackground,"12px","12px","",this.options.labelsColor,this.options.labelsHzColor||this.options.labelsColor,"center","#specLabels",t.length),this.emit("ready")}},this.frequenciesDataUrl=t.frequenciesDataUrl,this.container="string"==typeof t.container?document.querySelector(t.container):t.container,t.colorMap){if(t.colorMap.length<256)throw new Error("Colormap must contain 256 elements");for(let e=0;e<t.colorMap.length;e++){if(4!==t.colorMap[e].length)throw new Error("ColorMap entries must contain 4 values")}this.colorMap=t.colorMap}else{this.colorMap=[];for(let t=0;t<256;t++){const e=(255-t)/256;this.colorMap.push([e,e,e,1])}}this.fftSamples=t.fftSamples||512,this.height=t.height||this.fftSamples/2,this.noverlap=t.noverlap,this.windowFunc=t.windowFunc,this.alpha=t.alpha,this.frequencyMin=t.frequencyMin||0,this.frequencyMax=t.frequencyMax||0,this.createWrapper(),this.createCanvas()}onInit(){this.container=this.container||this.wavesurfer.getWrapper(),this.container.appendChild(this.wrapper),this.wavesurfer.options.fillParent&&this.utils.style(this.wrapper,{width:"100%",overflowX:"hidden",overflowY:"hidden"}),this.subscriptions.push(this.wavesurfer.on("redraw",(()=>this.render())))}destroy(){this.unAll(),this.wavesurfer.un("ready",this._onReady),this.wavesurfer.un("redraw",this._onRender),this.wavesurfer=null,this.util=null,this.options=null,this.wrapper&&(this.wrapper.remove(),this.wrapper=null),super.destroy()}createWrapper(){if(this.wrapper=document.createElement("div"),this.utils.style(this.wrapper,{display:"block",position:"relative",userSelect:"none"}),this.options.labels){const t=document.createElement("canvas");t.setAttribute("part","spec-labels"),this.utils.style(t,{position:"absolute",zIndex:9,width:"55px",height:"100%"}),this.wrapper.appendChild(t),this.labelsEl=t}this.wrapper.addEventListener("click",this._onWrapperClick)}_wrapperClickHandler(t){t.preventDefault();const e="offsetX"in t?t.offsetX:t.layerX;this.emit("click",e/this.width||0)}createCanvas(){const t=document.createElement("canvas");this.wrapper.appendChild(t),this.spectrCc=t.getContext("2d"),this.utils.style(t,{position:"absolute",left:0,top:0,width:"100%",height:"100%",zIndex:4}),this.canvas=t}render(){var t;this.frequenciesDataUrl?this.loadFrequenciesData(this.frequenciesDataUrl):this.drawSpectrogram(this.getFrequencies(null===(t=this.wavesurfer)||void 0===t?void 0:t.getDecodedData()))}getFrequencies(t){var e,i;const a=this.fftSamples,r=(null!==(e=this.options.splitChannels)&&void 0!==e?e:null===(i=this.wavesurfer)||void 0===i?void 0:i.options.splitChannels)?t.numberOfChannels:1;if(this.frequencyMax=this.frequencyMax||t.sampleRate/2,!t)return;this.buffer=t;const n=t.sampleRate,h=[];let o=this.noverlap;if(!o){const e=t.length/this.canvas.width;o=Math.max(0,Math.round(a-e))}const l=new s(a,n,this.windowFunc,this.alpha);for(let e=0;e<r;e++){const s=t.getChannelData(e),i=[];let r=0;for(;r+a<s.length;){const t=s.slice(r,r+a),e=l.calculateSpectrum(t),n=new Uint8Array(a/2);for(let t=0;t<a/2;t++)n[t]=Math.max(-255,45*Math.log10(e[t]));i.push(n),r+=a-o}h.push(i)}return h}loadFrequenciesData(t){return fetch(t).then((t=>t.json())).then(this.drawSpectrogram)}freqType(t){return t>=1e3?(t/1e3).toFixed(1):Math.round(t)}unitType(t){return t>=1e3?"KHz":"Hz"}loadLabels(t,e,s,i,a,r,n,h,o){t=t||"rgba(68,68,68,0)",e=e||"12px",s=s||"12px",i=i||"Helvetica",a=a||"#fff",r=r||"#fff",n=n||"center";const l=this.height||512,c=l/256*5,f=this.frequencyMin,u=(this.frequencyMax-f)/c,p=this.labelsEl.getContext("2d"),d=window.devicePixelRatio;if(this.labelsEl.height=this.height*o*d,this.labelsEl.width=55*d,p.scale(d,d),p)for(let h=0;h<o;h++){let o;for(p.fillStyle=t,p.fillRect(0,h*l,55,(1+h)*l),p.fill(),o=0;o<=c;o++){p.textAlign=n,p.textBaseline="middle";const t=f+u*o,c=this.freqType(t),d=this.unitType(t),w=16;let v;v=0==o?(1+h)*l+o-10:(1+h)*l-50*o+2,p.fillStyle=r,p.font=s+" "+i,p.fillText(d,w+24,v),p.fillStyle=a,p.font=e+" "+i,p.fillText(c,w,v)}}}resample(t){const e=this.width,s=[],i=1/t.length,a=1/e;let r;for(r=0;r<e;r++){const e=new Array(t[0].length);let n;for(n=0;n<t.length;n++){const s=n*i,h=s+i,o=r*a,l=o+a,c=h<=o||l<=s?0:Math.min(Math.max(h,o),Math.max(l,s))-Math.max(Math.min(h,o),Math.min(l,s));let f;if(c>0)for(f=0;f<t[0].length;f++)null==e[f]&&(e[f]=0),e[f]+=c/a*t[n][f]}const h=new Uint8Array(t[0].length);let o;for(o=0;o<t[0].length;o++)h[o]=e[o];s.push(h)}return s}}export{i as default};
+function e(e,t,s,i){return new(s||(s=Promise))((function(a,r){function n(e){try{o(i.next(e))}catch(e){r(e)}}function h(e){try{o(i.throw(e))}catch(e){r(e)}}function o(e){var t;e.done?a(e.value):(t=e.value,t instanceof s?t:new s((function(e){e(t)}))).then(n,h)}o((i=i.apply(e,t||[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;class t{constructor(){this.listeners={},this.on=this.addEventListener,this.un=this.removeEventListener}addEventListener(e,t,s){if(this.listeners[e]||(this.listeners[e]=new Set),this.listeners[e].add(t),null==s?void 0:s.once){const s=()=>{this.removeEventListener(e,s),this.removeEventListener(e,t)};return this.addEventListener(e,s),s}return()=>this.removeEventListener(e,t)}removeEventListener(e,t){var s;null===(s=this.listeners[e])||void 0===s||s.delete(t)}once(e,t){return this.on(e,t,{once:!0})}unAll(){this.listeners={}}emit(e,...t){this.listeners[e]&&this.listeners[e].forEach((e=>e(...t)))}}class s extends t{constructor(e){super(),this.subscriptions=[],this.options=e}onInit(){}init(e){this.wavesurfer=e,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((e=>e()))}}function i(e,t,s,i){switch(this.bufferSize=e,this.sampleRate=t,this.bandwidth=2/e*(t/2),this.sinTable=new Float32Array(e),this.cosTable=new Float32Array(e),this.windowValues=new Float32Array(e),this.reverseTable=new Uint32Array(e),this.peakBand=0,this.peak=0,s){case"bartlett":for(a=0;a<e;a++)this.windowValues[a]=2/(e-1)*((e-1)/2-Math.abs(a-(e-1)/2));break;case"bartlettHann":for(a=0;a<e;a++)this.windowValues[a]=.62-.48*Math.abs(a/(e-1)-.5)-.38*Math.cos(2*Math.PI*a/(e-1));break;case"blackman":for(i=i||.16,a=0;a<e;a++)this.windowValues[a]=(1-i)/2-.5*Math.cos(2*Math.PI*a/(e-1))+i/2*Math.cos(4*Math.PI*a/(e-1));break;case"cosine":for(a=0;a<e;a++)this.windowValues[a]=Math.cos(Math.PI*a/(e-1)-Math.PI/2);break;case"gauss":for(i=i||.25,a=0;a<e;a++)this.windowValues[a]=Math.pow(Math.E,-.5*Math.pow((a-(e-1)/2)/(i*(e-1)/2),2));break;case"hamming":for(a=0;a<e;a++)this.windowValues[a]=.54-.46*Math.cos(2*Math.PI*a/(e-1));break;case"hann":case void 0:for(a=0;a<e;a++)this.windowValues[a]=.5*(1-Math.cos(2*Math.PI*a/(e-1)));break;case"lanczoz":for(a=0;a<e;a++)this.windowValues[a]=Math.sin(Math.PI*(2*a/(e-1)-1))/(Math.PI*(2*a/(e-1)-1));break;case"rectangular":for(a=0;a<e;a++)this.windowValues[a]=1;break;case"triangular":for(a=0;a<e;a++)this.windowValues[a]=2/e*(e/2-Math.abs(a-(e-1)/2));break;default:throw Error("No such window function '"+s+"'")}for(var a,r=1,n=e>>1;r<e;){for(a=0;a<r;a++)this.reverseTable[a+r]=this.reverseTable[a]+n;r<<=1,n>>=1}for(a=0;a<e;a++)this.sinTable[a]=Math.sin(-Math.PI/a),this.cosTable[a]=Math.cos(-Math.PI/a);this.calculateSpectrum=function(e){var t,s,i,a=this.bufferSize,r=this.cosTable,n=this.sinTable,h=this.reverseTable,o=new Float32Array(a),l=new Float32Array(a),c=2/this.bufferSize,f=Math.sqrt,u=new Float32Array(a/2),p=Math.floor(Math.log(a)/Math.LN2);if(Math.pow(2,p)!==a)throw"Invalid buffer size, must be a power of 2.";if(a!==e.length)throw"Supplied buffer is not the same size as defined FFT. FFT Size: "+a+" Buffer Size: "+e.length;for(var d,w,v,M,b,g,m,y,x=1,E=0;E<a;E++)o[E]=e[h[E]]*this.windowValues[h[E]],l[E]=0;for(;x<a;){d=r[x],w=n[x],v=1,M=0;for(var q=0;q<x;q++){for(E=q;E<a;)g=v*o[b=E+x]-M*l[b],m=v*l[b]+M*o[b],o[b]=o[E]-g,l[b]=l[E]-m,o[E]+=g,l[E]+=m,E+=x<<1;v=(y=v)*d-M*w,M=y*w+M*d}x<<=1}E=0;for(var S=a/2;E<S;E++)(i=c*f((t=o[E])*t+(s=l[E])*s))>this.peak&&(this.peakBand=E,this.peak=i),u[E]=i;return u}}const a=(e,t)=>Object.assign(e.style,t);class r extends s{static create(e){return new r(e||{})}constructor(e){if(super(e),this.frequenciesDataUrl=e.frequenciesDataUrl,this.container="string"==typeof e.container?document.querySelector(e.container):e.container,e.colorMap){if(e.colorMap.length<256)throw new Error("Colormap must contain 256 elements");for(let t=0;t<e.colorMap.length;t++){if(4!==e.colorMap[t].length)throw new Error("ColorMap entries must contain 4 values")}this.colorMap=e.colorMap}else{this.colorMap=[];for(let e=0;e<256;e++){const t=(255-e)/256;this.colorMap.push([t,t,t,1])}}this.fftSamples=e.fftSamples||512,this.height=e.height||this.fftSamples/2,this.noverlap=e.noverlap,this.windowFunc=e.windowFunc,this.alpha=e.alpha,this.frequencyMin=e.frequencyMin||0,this.frequencyMax=e.frequencyMax||0,this.createWrapper(),this.createCanvas()}onInit(){this.container=this.container||this.wavesurfer.getWrapper(),this.container.appendChild(this.wrapper),this.wavesurfer.options.fillParent&&a(this.wrapper,{width:"100%",overflowX:"hidden",overflowY:"hidden"}),this.subscriptions.push(this.wavesurfer.on("redraw",(()=>this.render())))}destroy(){this.unAll(),this.wavesurfer.un("ready",this._onReady),this.wavesurfer.un("redraw",this._onRender),this.wavesurfer=null,this.util=null,this.options=null,this.wrapper&&(this.wrapper.remove(),this.wrapper=null),super.destroy()}loadFrequenciesData(t){return e(this,void 0,void 0,(function*(){const e=yield fetch(t);if(!e.ok)throw new Error("Unable to fetch frequencies data");const s=yield e.json();this.drawSpectrogram(s)}))}createWrapper(){if(this.wrapper=document.createElement("div"),a(this.wrapper,{display:"block",position:"relative",userSelect:"none"}),this.options.labels){const e=document.createElement("canvas");e.setAttribute("part","spec-labels"),a(e,{position:"absolute",zIndex:9,width:"55px",height:"100%"}),this.wrapper.appendChild(e),this.labelsEl=e}this.wrapper.addEventListener("click",this._onWrapperClick)}createCanvas(){const e=document.createElement("canvas");this.wrapper.appendChild(e),this.spectrCc=e.getContext("2d"),a(e,{position:"absolute",left:0,top:0,width:"100%",height:"100%",zIndex:4}),this.canvas=e}render(){var e;if(this.frequenciesDataUrl)this.loadFrequenciesData(this.frequenciesDataUrl);else{const t=null===(e=this.wavesurfer)||void 0===e?void 0:e.getDecodedData();t&&this.drawSpectrogram(this.getFrequencies(t))}}drawSpectrogram(e){isNaN(e[0][0])||(e=[e]),this.wrapper.style.height=this.height*e.length+"px",this.width=this.wavesurfer.getWrapper().offsetWidth,this.canvas.width=this.width,this.canvas.height=this.height*e.length;const t=this.spectrCc,s=this.height,i=this.width,a=this.buffer.sampleRate/2,r=this.frequencyMin,n=this.frequencyMax;if(t){for(let h=0;h<e.length;h++){const o=this.resample(e[h]),l=new ImageData(i,s);for(let e=0;e<o.length;e++)for(let t=0;t<o[e].length;t++){const a=this.colorMap[o[e][t]],r=4*((s-t)*i+e);l.data[r]=255*a[0],l.data[r+1]=255*a[1],l.data[r+2]=255*a[2],l.data[r+3]=255*a[3]}createImageBitmap(l).then((e=>{t.drawImage(e,0,s*(1-n/a),i,s*(n-r)/a,0,s*h,i,s)}))}this.options.labels&&this.loadLabels(this.options.labelsBackground,"12px","12px","",this.options.labelsColor,this.options.labelsHzColor||this.options.labelsColor,"center","#specLabels",e.length),this.emit("ready")}}getFrequencies(e){var t,s;const a=this.fftSamples,r=(null!==(t=this.options.splitChannels)&&void 0!==t?t:null===(s=this.wavesurfer)||void 0===s?void 0:s.options.splitChannels)?e.numberOfChannels:1;if(this.frequencyMax=this.frequencyMax||e.sampleRate/2,!e)return;this.buffer=e;const n=e.sampleRate,h=[];let o=this.noverlap;if(!o){const t=e.length/this.canvas.width;o=Math.max(0,Math.round(a-t))}const l=new i(a,n,this.windowFunc,this.alpha);for(let t=0;t<r;t++){const s=e.getChannelData(t),i=[];let r=0;for(;r+a<s.length;){const e=s.slice(r,r+a),t=l.calculateSpectrum(e),n=new Uint8Array(a/2);for(let e=0;e<a/2;e++)n[e]=Math.max(-255,45*Math.log10(t[e]));i.push(n),r+=a-o}h.push(i)}return h}freqType(e){return e>=1e3?(e/1e3).toFixed(1):Math.round(e)}unitType(e){return e>=1e3?"KHz":"Hz"}loadLabels(e,t,s,i,a,r,n,h,o){e=e||"rgba(68,68,68,0)",t=t||"12px",s=s||"12px",i=i||"Helvetica",a=a||"#fff",r=r||"#fff",n=n||"center";const l=this.height||512,c=l/256*5,f=this.frequencyMin,u=(this.frequencyMax-f)/c,p=this.labelsEl.getContext("2d"),d=window.devicePixelRatio;if(this.labelsEl.height=this.height*o*d,this.labelsEl.width=55*d,p.scale(d,d),p)for(let h=0;h<o;h++){let o;for(p.fillStyle=e,p.fillRect(0,h*l,55,(1+h)*l),p.fill(),o=0;o<=c;o++){p.textAlign=n,p.textBaseline="middle";const e=f+u*o,c=this.freqType(e),d=this.unitType(e),w=16;let v;v=0==o?(1+h)*l+o-10:(1+h)*l-50*o+2,p.fillStyle=r,p.font=s+" "+i,p.fillText(d,w+24,v),p.fillStyle=a,p.font=t+" "+i,p.fillText(c,w,v)}}}resample(e){const t=this.width,s=[],i=1/e.length,a=1/t;let r;for(r=0;r<t;r++){const t=new Array(e[0].length);let n;for(n=0;n<e.length;n++){const s=n*i,h=s+i,o=r*a,l=o+a,c=h<=o||l<=s?0:Math.min(Math.max(h,o),Math.max(l,s))-Math.max(Math.min(h,o),Math.min(l,s));let f;if(c>0)for(f=0;f<e[0].length;f++)null==t[f]&&(t[f]=0),t[f]+=c/a*e[n][f]}const h=new Uint8Array(e[0].length);let o;for(o=0;o<e[0].length;o++)h[o]=t[o];s.push(h)}return s}}export{r as default};

package/dist/plugins/spectrogram.js

@@ -1 +1 @@
-class t{constructor(){this.listeners={},this.on=this.addEventListener,this.un=this.removeEventListener}addEventListener(t,e,s){if(this.listeners[t]||(this.listeners[t]=new Set),this.listeners[t].add(e),null==s?void 0:s.once){const s=()=>{this.removeEventListener(t,s),this.removeEventListener(t,e)};return this.addEventListener(t,s),s}return()=>this.removeEventListener(t,e)}removeEventListener(t,e){var s;null===(s=this.listeners[t])||void 0===s||s.delete(e)}once(t,e){return this.on(t,e,{once:!0})}unAll(){this.listeners={}}emit(t,...e){this.listeners[t]&&this.listeners[t].forEach((t=>t(...e)))}}class e extends t{constructor(t){super(),this.subscriptions=[],this.options=t}onInit(){}init(t){this.wavesurfer=t,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((t=>t()))}}function s(t,e,s,i){switch(this.bufferSize=t,this.sampleRate=e,this.bandwidth=2/t*(e/2),this.sinTable=new Float32Array(t),this.cosTable=new Float32Array(t),this.windowValues=new Float32Array(t),this.reverseTable=new Uint32Array(t),this.peakBand=0,this.peak=0,s){case"bartlett":for(a=0;a<t;a++)this.windowValues[a]=2/(t-1)*((t-1)/2-Math.abs(a-(t-1)/2));break;case"bartlettHann":for(a=0;a<t;a++)this.windowValues[a]=.62-.48*Math.abs(a/(t-1)-.5)-.38*Math.cos(2*Math.PI*a/(t-1));break;case"blackman":for(i=i||.16,a=0;a<t;a++)this.windowValues[a]=(1-i)/2-.5*Math.cos(2*Math.PI*a/(t-1))+i/2*Math.cos(4*Math.PI*a/(t-1));break;case"cosine":for(a=0;a<t;a++)this.windowValues[a]=Math.cos(Math.PI*a/(t-1)-Math.PI/2);break;case"gauss":for(i=i||.25,a=0;a<t;a++)this.windowValues[a]=Math.pow(Math.E,-.5*Math.pow((a-(t-1)/2)/(i*(t-1)/2),2));break;case"hamming":for(a=0;a<t;a++)this.windowValues[a]=.54-.46*Math.cos(2*Math.PI*a/(t-1));break;case"hann":case void 0:for(a=0;a<t;a++)this.windowValues[a]=.5*(1-Math.cos(2*Math.PI*a/(t-1)));break;case"lanczoz":for(a=0;a<t;a++)this.windowValues[a]=Math.sin(Math.PI*(2*a/(t-1)-1))/(Math.PI*(2*a/(t-1)-1));break;case"rectangular":for(a=0;a<t;a++)this.windowValues[a]=1;break;case"triangular":for(a=0;a<t;a++)this.windowValues[a]=2/t*(t/2-Math.abs(a-(t-1)/2));break;default:throw Error("No such window function '"+s+"'")}for(var a,r=1,n=t>>1;r<t;){for(a=0;a<r;a++)this.reverseTable[a+r]=this.reverseTable[a]+n;r<<=1,n>>=1}for(a=0;a<t;a++)this.sinTable[a]=Math.sin(-Math.PI/a),this.cosTable[a]=Math.cos(-Math.PI/a);this.calculateSpectrum=function(t){var e,s,i,a=this.bufferSize,r=this.cosTable,n=this.sinTable,h=this.reverseTable,o=new Float32Array(a),l=new Float32Array(a),c=2/this.bufferSize,f=Math.sqrt,u=new Float32Array(a/2),p=Math.floor(Math.log(a)/Math.LN2);if(Math.pow(2,p)!==a)throw"Invalid buffer size, must be a power of 2.";if(a!==t.length)throw"Supplied buffer is not the same size as defined FFT. FFT Size: "+a+" Buffer Size: "+t.length;for(var d,w,v,M,b,g,m,y,x=1,k=0;k<a;k++)o[k]=t[h[k]]*this.windowValues[h[k]],l[k]=0;for(;x<a;){d=r[x],w=n[x],v=1,M=0;for(var q=0;q<x;q++){for(k=q;k<a;)g=v*o[b=k+x]-M*l[b],m=v*l[b]+M*o[b],o[b]=o[k]-g,l[b]=l[k]-m,o[k]+=g,l[k]+=m,k+=x<<1;v=(y=v)*d-M*w,M=y*w+M*d}x<<=1}k=0;for(var E=a/2;k<E;k++)(i=c*f((e=o[k])*e+(s=l[k])*s))>this.peak&&(this.peakBand=k,this.peak=i),u[k]=i;return u}}class i extends e{static create(t){return new i(t||{})}constructor(t){if(super(t),this.utils={style:(t,e)=>Object.assign(t.style,e)},this.drawSpectrogram=t=>{isNaN(t[0][0])||(t=[t]),this.wrapper.style.height=this.height*t.length+"px",this.width=this.wavesurfer.getWrapper().offsetWidth,this.canvas.width=this.width,this.canvas.height=this.height*t.length;const e=this.spectrCc,s=this.height,i=this.width,a=this.buffer.sampleRate/2,r=this.frequencyMin,n=this.frequencyMax;if(e){for(let h=0;h<t.length;h++){const o=this.resample(t[h]),l=new ImageData(i,s);for(let t=0;t<o.length;t++)for(let e=0;e<o[t].length;e++){const a=this.colorMap[o[t][e]],r=4*((s-e)*i+t);l.data[r]=255*a[0],l.data[r+1]=255*a[1],l.data[r+2]=255*a[2],l.data[r+3]=255*a[3]}createImageBitmap(l).then((t=>{e.drawImage(t,0,s*(1-n/a),i,s*(n-r)/a,0,s*h,i,s)}))}this.loadLabels(this.options.labelsBackground,"12px","12px","",this.options.labelsColor,this.options.labelsHzColor||this.options.labelsColor,"center","#specLabels",t.length),this.emit("ready")}},this.frequenciesDataUrl=t.frequenciesDataUrl,this.container="string"==typeof t.container?document.querySelector(t.container):t.container,t.colorMap){if(t.colorMap.length<256)throw new Error("Colormap must contain 256 elements");for(let e=0;e<t.colorMap.length;e++){if(4!==t.colorMap[e].length)throw new Error("ColorMap entries must contain 4 values")}this.colorMap=t.colorMap}else{this.colorMap=[];for(let t=0;t<256;t++){const e=(255-t)/256;this.colorMap.push([e,e,e,1])}}this.fftSamples=t.fftSamples||512,this.height=t.height||this.fftSamples/2,this.noverlap=t.noverlap,this.windowFunc=t.windowFunc,this.alpha=t.alpha,this.frequencyMin=t.frequencyMin||0,this.frequencyMax=t.frequencyMax||0,this.createWrapper(),this.createCanvas()}onInit(){this.container=this.container||this.wavesurfer.getWrapper(),this.container.appendChild(this.wrapper),this.wavesurfer.options.fillParent&&this.utils.style(this.wrapper,{width:"100%",overflowX:"hidden",overflowY:"hidden"}),this.subscriptions.push(this.wavesurfer.on("redraw",(()=>this.render())))}destroy(){this.unAll(),this.wavesurfer.un("ready",this._onReady),this.wavesurfer.un("redraw",this._onRender),this.wavesurfer=null,this.util=null,this.options=null,this.wrapper&&(this.wrapper.remove(),this.wrapper=null),super.destroy()}createWrapper(){if(this.wrapper=document.createElement("div"),this.utils.style(this.wrapper,{display:"block",position:"relative",userSelect:"none"}),this.options.labels){const t=document.createElement("canvas");t.setAttribute("part","spec-labels"),this.utils.style(t,{position:"absolute",zIndex:9,width:"55px",height:"100%"}),this.wrapper.appendChild(t),this.labelsEl=t}this.wrapper.addEventListener("click",this._onWrapperClick)}_wrapperClickHandler(t){t.preventDefault();const e="offsetX"in t?t.offsetX:t.layerX;this.emit("click",e/this.width||0)}createCanvas(){const t=document.createElement("canvas");this.wrapper.appendChild(t),this.spectrCc=t.getContext("2d"),this.utils.style(t,{position:"absolute",left:0,top:0,width:"100%",height:"100%",zIndex:4}),this.canvas=t}render(){var t;this.frequenciesDataUrl?this.loadFrequenciesData(this.frequenciesDataUrl):this.drawSpectrogram(this.getFrequencies(null===(t=this.wavesurfer)||void 0===t?void 0:t.getDecodedData()))}getFrequencies(t){var e,i;const a=this.fftSamples,r=(null!==(e=this.options.splitChannels)&&void 0!==e?e:null===(i=this.wavesurfer)||void 0===i?void 0:i.options.splitChannels)?t.numberOfChannels:1;if(this.frequencyMax=this.frequencyMax||t.sampleRate/2,!t)return;this.buffer=t;const n=t.sampleRate,h=[];let o=this.noverlap;if(!o){const e=t.length/this.canvas.width;o=Math.max(0,Math.round(a-e))}const l=new s(a,n,this.windowFunc,this.alpha);for(let e=0;e<r;e++){const s=t.getChannelData(e),i=[];let r=0;for(;r+a<s.length;){const t=s.slice(r,r+a),e=l.calculateSpectrum(t),n=new Uint8Array(a/2);for(let t=0;t<a/2;t++)n[t]=Math.max(-255,45*Math.log10(e[t]));i.push(n),r+=a-o}h.push(i)}return h}loadFrequenciesData(t){return fetch(t).then((t=>t.json())).then(this.drawSpectrogram)}freqType(t){return t>=1e3?(t/1e3).toFixed(1):Math.round(t)}unitType(t){return t>=1e3?"KHz":"Hz"}loadLabels(t,e,s,i,a,r,n,h,o){t=t||"rgba(68,68,68,0)",e=e||"12px",s=s||"12px",i=i||"Helvetica",a=a||"#fff",r=r||"#fff",n=n||"center";const l=this.height||512,c=l/256*5,f=this.frequencyMin,u=(this.frequencyMax-f)/c,p=this.labelsEl.getContext("2d"),d=window.devicePixelRatio;if(this.labelsEl.height=this.height*o*d,this.labelsEl.width=55*d,p.scale(d,d),p)for(let h=0;h<o;h++){let o;for(p.fillStyle=t,p.fillRect(0,h*l,55,(1+h)*l),p.fill(),o=0;o<=c;o++){p.textAlign=n,p.textBaseline="middle";const t=f+u*o,c=this.freqType(t),d=this.unitType(t),w=16;let v;v=0==o?(1+h)*l+o-10:(1+h)*l-50*o+2,p.fillStyle=r,p.font=s+" "+i,p.fillText(d,w+24,v),p.fillStyle=a,p.font=e+" "+i,p.fillText(c,w,v)}}}resample(t){const e=this.width,s=[],i=1/t.length,a=1/e;let r;for(r=0;r<e;r++){const e=new Array(t[0].length);let n;for(n=0;n<t.length;n++){const s=n*i,h=s+i,o=r*a,l=o+a,c=h<=o||l<=s?0:Math.min(Math.max(h,o),Math.max(l,s))-Math.max(Math.min(h,o),Math.min(l,s));let f;if(c>0)for(f=0;f<t[0].length;f++)null==e[f]&&(e[f]=0),e[f]+=c/a*t[n][f]}const h=new Uint8Array(t[0].length);let o;for(o=0;o<t[0].length;o++)h[o]=e[o];s.push(h)}return s}}export{i as default};
+function e(e,t,s,i){return new(s||(s=Promise))((function(a,r){function n(e){try{o(i.next(e))}catch(e){r(e)}}function h(e){try{o(i.throw(e))}catch(e){r(e)}}function o(e){var t;e.done?a(e.value):(t=e.value,t instanceof s?t:new s((function(e){e(t)}))).then(n,h)}o((i=i.apply(e,t||[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;class t{constructor(){this.listeners={},this.on=this.addEventListener,this.un=this.removeEventListener}addEventListener(e,t,s){if(this.listeners[e]||(this.listeners[e]=new Set),this.listeners[e].add(t),null==s?void 0:s.once){const s=()=>{this.removeEventListener(e,s),this.removeEventListener(e,t)};return this.addEventListener(e,s),s}return()=>this.removeEventListener(e,t)}removeEventListener(e,t){var s;null===(s=this.listeners[e])||void 0===s||s.delete(t)}once(e,t){return this.on(e,t,{once:!0})}unAll(){this.listeners={}}emit(e,...t){this.listeners[e]&&this.listeners[e].forEach((e=>e(...t)))}}class s extends t{constructor(e){super(),this.subscriptions=[],this.options=e}onInit(){}init(e){this.wavesurfer=e,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((e=>e()))}}function i(e,t,s,i){switch(this.bufferSize=e,this.sampleRate=t,this.bandwidth=2/e*(t/2),this.sinTable=new Float32Array(e),this.cosTable=new Float32Array(e),this.windowValues=new Float32Array(e),this.reverseTable=new Uint32Array(e),this.peakBand=0,this.peak=0,s){case"bartlett":for(a=0;a<e;a++)this.windowValues[a]=2/(e-1)*((e-1)/2-Math.abs(a-(e-1)/2));break;case"bartlettHann":for(a=0;a<e;a++)this.windowValues[a]=.62-.48*Math.abs(a/(e-1)-.5)-.38*Math.cos(2*Math.PI*a/(e-1));break;case"blackman":for(i=i||.16,a=0;a<e;a++)this.windowValues[a]=(1-i)/2-.5*Math.cos(2*Math.PI*a/(e-1))+i/2*Math.cos(4*Math.PI*a/(e-1));break;case"cosine":for(a=0;a<e;a++)this.windowValues[a]=Math.cos(Math.PI*a/(e-1)-Math.PI/2);break;case"gauss":for(i=i||.25,a=0;a<e;a++)this.windowValues[a]=Math.pow(Math.E,-.5*Math.pow((a-(e-1)/2)/(i*(e-1)/2),2));break;case"hamming":for(a=0;a<e;a++)this.windowValues[a]=.54-.46*Math.cos(2*Math.PI*a/(e-1));break;case"hann":case void 0:for(a=0;a<e;a++)this.windowValues[a]=.5*(1-Math.cos(2*Math.PI*a/(e-1)));break;case"lanczoz":for(a=0;a<e;a++)this.windowValues[a]=Math.sin(Math.PI*(2*a/(e-1)-1))/(Math.PI*(2*a/(e-1)-1));break;case"rectangular":for(a=0;a<e;a++)this.windowValues[a]=1;break;case"triangular":for(a=0;a<e;a++)this.windowValues[a]=2/e*(e/2-Math.abs(a-(e-1)/2));break;default:throw Error("No such window function '"+s+"'")}for(var a,r=1,n=e>>1;r<e;){for(a=0;a<r;a++)this.reverseTable[a+r]=this.reverseTable[a]+n;r<<=1,n>>=1}for(a=0;a<e;a++)this.sinTable[a]=Math.sin(-Math.PI/a),this.cosTable[a]=Math.cos(-Math.PI/a);this.calculateSpectrum=function(e){var t,s,i,a=this.bufferSize,r=this.cosTable,n=this.sinTable,h=this.reverseTable,o=new Float32Array(a),l=new Float32Array(a),c=2/this.bufferSize,f=Math.sqrt,u=new Float32Array(a/2),p=Math.floor(Math.log(a)/Math.LN2);if(Math.pow(2,p)!==a)throw"Invalid buffer size, must be a power of 2.";if(a!==e.length)throw"Supplied buffer is not the same size as defined FFT. FFT Size: "+a+" Buffer Size: "+e.length;for(var d,w,v,M,b,g,m,y,x=1,E=0;E<a;E++)o[E]=e[h[E]]*this.windowValues[h[E]],l[E]=0;for(;x<a;){d=r[x],w=n[x],v=1,M=0;for(var q=0;q<x;q++){for(E=q;E<a;)g=v*o[b=E+x]-M*l[b],m=v*l[b]+M*o[b],o[b]=o[E]-g,l[b]=l[E]-m,o[E]+=g,l[E]+=m,E+=x<<1;v=(y=v)*d-M*w,M=y*w+M*d}x<<=1}E=0;for(var S=a/2;E<S;E++)(i=c*f((t=o[E])*t+(s=l[E])*s))>this.peak&&(this.peakBand=E,this.peak=i),u[E]=i;return u}}const a=(e,t)=>Object.assign(e.style,t);class r extends s{static create(e){return new r(e||{})}constructor(e){if(super(e),this.frequenciesDataUrl=e.frequenciesDataUrl,this.container="string"==typeof e.container?document.querySelector(e.container):e.container,e.colorMap){if(e.colorMap.length<256)throw new Error("Colormap must contain 256 elements");for(let t=0;t<e.colorMap.length;t++){if(4!==e.colorMap[t].length)throw new Error("ColorMap entries must contain 4 values")}this.colorMap=e.colorMap}else{this.colorMap=[];for(let e=0;e<256;e++){const t=(255-e)/256;this.colorMap.push([t,t,t,1])}}this.fftSamples=e.fftSamples||512,this.height=e.height||this.fftSamples/2,this.noverlap=e.noverlap,this.windowFunc=e.windowFunc,this.alpha=e.alpha,this.frequencyMin=e.frequencyMin||0,this.frequencyMax=e.frequencyMax||0,this.createWrapper(),this.createCanvas()}onInit(){this.container=this.container||this.wavesurfer.getWrapper(),this.container.appendChild(this.wrapper),this.wavesurfer.options.fillParent&&a(this.wrapper,{width:"100%",overflowX:"hidden",overflowY:"hidden"}),this.subscriptions.push(this.wavesurfer.on("redraw",(()=>this.render())))}destroy(){this.unAll(),this.wavesurfer.un("ready",this._onReady),this.wavesurfer.un("redraw",this._onRender),this.wavesurfer=null,this.util=null,this.options=null,this.wrapper&&(this.wrapper.remove(),this.wrapper=null),super.destroy()}loadFrequenciesData(t){return e(this,void 0,void 0,(function*(){const e=yield fetch(t);if(!e.ok)throw new Error("Unable to fetch frequencies data");const s=yield e.json();this.drawSpectrogram(s)}))}createWrapper(){if(this.wrapper=document.createElement("div"),a(this.wrapper,{display:"block",position:"relative",userSelect:"none"}),this.options.labels){const e=document.createElement("canvas");e.setAttribute("part","spec-labels"),a(e,{position:"absolute",zIndex:9,width:"55px",height:"100%"}),this.wrapper.appendChild(e),this.labelsEl=e}this.wrapper.addEventListener("click",this._onWrapperClick)}createCanvas(){const e=document.createElement("canvas");this.wrapper.appendChild(e),this.spectrCc=e.getContext("2d"),a(e,{position:"absolute",left:0,top:0,width:"100%",height:"100%",zIndex:4}),this.canvas=e}render(){var e;if(this.frequenciesDataUrl)this.loadFrequenciesData(this.frequenciesDataUrl);else{const t=null===(e=this.wavesurfer)||void 0===e?void 0:e.getDecodedData();t&&this.drawSpectrogram(this.getFrequencies(t))}}drawSpectrogram(e){isNaN(e[0][0])||(e=[e]),this.wrapper.style.height=this.height*e.length+"px",this.width=this.wavesurfer.getWrapper().offsetWidth,this.canvas.width=this.width,this.canvas.height=this.height*e.length;const t=this.spectrCc,s=this.height,i=this.width,a=this.buffer.sampleRate/2,r=this.frequencyMin,n=this.frequencyMax;if(t){for(let h=0;h<e.length;h++){const o=this.resample(e[h]),l=new ImageData(i,s);for(let e=0;e<o.length;e++)for(let t=0;t<o[e].length;t++){const a=this.colorMap[o[e][t]],r=4*((s-t)*i+e);l.data[r]=255*a[0],l.data[r+1]=255*a[1],l.data[r+2]=255*a[2],l.data[r+3]=255*a[3]}createImageBitmap(l).then((e=>{t.drawImage(e,0,s*(1-n/a),i,s*(n-r)/a,0,s*h,i,s)}))}this.options.labels&&this.loadLabels(this.options.labelsBackground,"12px","12px","",this.options.labelsColor,this.options.labelsHzColor||this.options.labelsColor,"center","#specLabels",e.length),this.emit("ready")}}getFrequencies(e){var t,s;const a=this.fftSamples,r=(null!==(t=this.options.splitChannels)&&void 0!==t?t:null===(s=this.wavesurfer)||void 0===s?void 0:s.options.splitChannels)?e.numberOfChannels:1;if(this.frequencyMax=this.frequencyMax||e.sampleRate/2,!e)return;this.buffer=e;const n=e.sampleRate,h=[];let o=this.noverlap;if(!o){const t=e.length/this.canvas.width;o=Math.max(0,Math.round(a-t))}const l=new i(a,n,this.windowFunc,this.alpha);for(let t=0;t<r;t++){const s=e.getChannelData(t),i=[];let r=0;for(;r+a<s.length;){const e=s.slice(r,r+a),t=l.calculateSpectrum(e),n=new Uint8Array(a/2);for(let e=0;e<a/2;e++)n[e]=Math.max(-255,45*Math.log10(t[e]));i.push(n),r+=a-o}h.push(i)}return h}freqType(e){return e>=1e3?(e/1e3).toFixed(1):Math.round(e)}unitType(e){return e>=1e3?"KHz":"Hz"}loadLabels(e,t,s,i,a,r,n,h,o){e=e||"rgba(68,68,68,0)",t=t||"12px",s=s||"12px",i=i||"Helvetica",a=a||"#fff",r=r||"#fff",n=n||"center";const l=this.height||512,c=l/256*5,f=this.frequencyMin,u=(this.frequencyMax-f)/c,p=this.labelsEl.getContext("2d"),d=window.devicePixelRatio;if(this.labelsEl.height=this.height*o*d,this.labelsEl.width=55*d,p.scale(d,d),p)for(let h=0;h<o;h++){let o;for(p.fillStyle=e,p.fillRect(0,h*l,55,(1+h)*l),p.fill(),o=0;o<=c;o++){p.textAlign=n,p.textBaseline="middle";const e=f+u*o,c=this.freqType(e),d=this.unitType(e),w=16;let v;v=0==o?(1+h)*l+o-10:(1+h)*l-50*o+2,p.fillStyle=r,p.font=s+" "+i,p.fillText(d,w+24,v),p.fillStyle=a,p.font=t+" "+i,p.fillText(c,w,v)}}}resample(e){const t=this.width,s=[],i=1/e.length,a=1/t;let r;for(r=0;r<t;r++){const t=new Array(e[0].length);let n;for(n=0;n<e.length;n++){const s=n*i,h=s+i,o=r*a,l=o+a,c=h<=o||l<=s?0:Math.min(Math.max(h,o),Math.max(l,s))-Math.max(Math.min(h,o),Math.min(l,s));let f;if(c>0)for(f=0;f<e[0].length;f++)null==t[f]&&(t[f]=0),t[f]+=c/a*e[n][f]}const h=new Uint8Array(e[0].length);let o;for(o=0;o<e[0].length;o++)h[o]=t[o];s.push(h)}return s}}export{r as default};

package/dist/plugins/spectrogram.min.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):((e="undefined"!=typeof globalThis?globalThis:e||self).WaveSurfer=e.WaveSurfer||{},e.WaveSurfer.Spectrogram=t())}(this,(function(){"use strict";class e{constructor(){this.listeners={},this.on=this.addEventListener,this.un=this.removeEventListener}addEventListener(e,t,s){if(this.listeners[e]||(this.listeners[e]=new Set),this.listeners[e].add(t),null==s?void 0:s.once){const s=()=>{this.removeEventListener(e,s),this.removeEventListener(e,t)};return this.addEventListener(e,s),s}return()=>this.removeEventListener(e,t)}removeEventListener(e,t){var s;null===(s=this.listeners[e])||void 0===s||s.delete(t)}once(e,t){return this.on(e,t,{once:!0})}unAll(){this.listeners={}}emit(e,...t){this.listeners[e]&&this.listeners[e].forEach((e=>e(...t)))}}class t extends e{constructor(e){super(),this.subscriptions=[],this.options=e}onInit(){}init(e){this.wavesurfer=e,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((e=>e()))}}function s(e,t,s,i){switch(this.bufferSize=e,this.sampleRate=t,this.bandwidth=2/e*(t/2),this.sinTable=new Float32Array(e),this.cosTable=new Float32Array(e),this.windowValues=new Float32Array(e),this.reverseTable=new Uint32Array(e),this.peakBand=0,this.peak=0,s){case"bartlett":for(a=0;a<e;a++)this.windowValues[a]=2/(e-1)*((e-1)/2-Math.abs(a-(e-1)/2));break;case"bartlettHann":for(a=0;a<e;a++)this.windowValues[a]=.62-.48*Math.abs(a/(e-1)-.5)-.38*Math.cos(2*Math.PI*a/(e-1));break;case"blackman":for(i=i||.16,a=0;a<e;a++)this.windowValues[a]=(1-i)/2-.5*Math.cos(2*Math.PI*a/(e-1))+i/2*Math.cos(4*Math.PI*a/(e-1));break;case"cosine":for(a=0;a<e;a++)this.windowValues[a]=Math.cos(Math.PI*a/(e-1)-Math.PI/2);break;case"gauss":for(i=i||.25,a=0;a<e;a++)this.windowValues[a]=Math.pow(Math.E,-.5*Math.pow((a-(e-1)/2)/(i*(e-1)/2),2));break;case"hamming":for(a=0;a<e;a++)this.windowValues[a]=.54-.46*Math.cos(2*Math.PI*a/(e-1));break;case"hann":case void 0:for(a=0;a<e;a++)this.windowValues[a]=.5*(1-Math.cos(2*Math.PI*a/(e-1)));break;case"lanczoz":for(a=0;a<e;a++)this.windowValues[a]=Math.sin(Math.PI*(2*a/(e-1)-1))/(Math.PI*(2*a/(e-1)-1));break;case"rectangular":for(a=0;a<e;a++)this.windowValues[a]=1;break;case"triangular":for(a=0;a<e;a++)this.windowValues[a]=2/e*(e/2-Math.abs(a-(e-1)/2));break;default:throw Error("No such window function '"+s+"'")}for(var a,r=1,n=e>>1;r<e;){for(a=0;a<r;a++)this.reverseTable[a+r]=this.reverseTable[a]+n;r<<=1,n>>=1}for(a=0;a<e;a++)this.sinTable[a]=Math.sin(-Math.PI/a),this.cosTable[a]=Math.cos(-Math.PI/a);this.calculateSpectrum=function(e){var t,s,i,a=this.bufferSize,r=this.cosTable,n=this.sinTable,h=this.reverseTable,o=new Float32Array(a),l=new Float32Array(a),c=2/this.bufferSize,f=Math.sqrt,u=new Float32Array(a/2),p=Math.floor(Math.log(a)/Math.LN2);if(Math.pow(2,p)!==a)throw"Invalid buffer size, must be a power of 2.";if(a!==e.length)throw"Supplied buffer is not the same size as defined FFT. FFT Size: "+a+" Buffer Size: "+e.length;for(var d,w,v,M,b,g,m,y,x=1,S=0;S<a;S++)o[S]=e[h[S]]*this.windowValues[h[S]],l[S]=0;for(;x<a;){d=r[x],w=n[x],v=1,M=0;for(var k=0;k<x;k++){for(S=k;S<a;)g=v*o[b=S+x]-M*l[b],m=v*l[b]+M*o[b],o[b]=o[S]-g,l[b]=l[S]-m,o[S]+=g,l[S]+=m,S+=x<<1;v=(y=v)*d-M*w,M=y*w+M*d}x<<=1}S=0;for(var q=a/2;S<q;S++)(i=c*f((t=o[S])*t+(s=l[S])*s))>this.peak&&(this.peakBand=S,this.peak=i),u[S]=i;return u}}class i extends t{static create(e){return new i(e||{})}constructor(e){if(super(e),this.utils={style:(e,t)=>Object.assign(e.style,t)},this.drawSpectrogram=e=>{isNaN(e[0][0])||(e=[e]),this.wrapper.style.height=this.height*e.length+"px",this.width=this.wavesurfer.getWrapper().offsetWidth,this.canvas.width=this.width,this.canvas.height=this.height*e.length;const t=this.spectrCc,s=this.height,i=this.width,a=this.buffer.sampleRate/2,r=this.frequencyMin,n=this.frequencyMax;if(t){for(let h=0;h<e.length;h++){const o=this.resample(e[h]),l=new ImageData(i,s);for(let e=0;e<o.length;e++)for(let t=0;t<o[e].length;t++){const a=this.colorMap[o[e][t]],r=4*((s-t)*i+e);l.data[r]=255*a[0],l.data[r+1]=255*a[1],l.data[r+2]=255*a[2],l.data[r+3]=255*a[3]}createImageBitmap(l).then((e=>{t.drawImage(e,0,s*(1-n/a),i,s*(n-r)/a,0,s*h,i,s)}))}this.loadLabels(this.options.labelsBackground,"12px","12px","",this.options.labelsColor,this.options.labelsHzColor||this.options.labelsColor,"center","#specLabels",e.length),this.emit("ready")}},this.frequenciesDataUrl=e.frequenciesDataUrl,this.container="string"==typeof e.container?document.querySelector(e.container):e.container,e.colorMap){if(e.colorMap.length<256)throw new Error("Colormap must contain 256 elements");for(let t=0;t<e.colorMap.length;t++){if(4!==e.colorMap[t].length)throw new Error("ColorMap entries must contain 4 values")}this.colorMap=e.colorMap}else{this.colorMap=[];for(let e=0;e<256;e++){const t=(255-e)/256;this.colorMap.push([t,t,t,1])}}this.fftSamples=e.fftSamples||512,this.height=e.height||this.fftSamples/2,this.noverlap=e.noverlap,this.windowFunc=e.windowFunc,this.alpha=e.alpha,this.frequencyMin=e.frequencyMin||0,this.frequencyMax=e.frequencyMax||0,this.createWrapper(),this.createCanvas()}onInit(){this.container=this.container||this.wavesurfer.getWrapper(),this.container.appendChild(this.wrapper),this.wavesurfer.options.fillParent&&this.utils.style(this.wrapper,{width:"100%",overflowX:"hidden",overflowY:"hidden"}),this.subscriptions.push(this.wavesurfer.on("redraw",(()=>this.render())))}destroy(){this.unAll(),this.wavesurfer.un("ready",this._onReady),this.wavesurfer.un("redraw",this._onRender),this.wavesurfer=null,this.util=null,this.options=null,this.wrapper&&(this.wrapper.remove(),this.wrapper=null),super.destroy()}createWrapper(){if(this.wrapper=document.createElement("div"),this.utils.style(this.wrapper,{display:"block",position:"relative",userSelect:"none"}),this.options.labels){const e=document.createElement("canvas");e.setAttribute("part","spec-labels"),this.utils.style(e,{position:"absolute",zIndex:9,width:"55px",height:"100%"}),this.wrapper.appendChild(e),this.labelsEl=e}this.wrapper.addEventListener("click",this._onWrapperClick)}_wrapperClickHandler(e){e.preventDefault();const t="offsetX"in e?e.offsetX:e.layerX;this.emit("click",t/this.width||0)}createCanvas(){const e=document.createElement("canvas");this.wrapper.appendChild(e),this.spectrCc=e.getContext("2d"),this.utils.style(e,{position:"absolute",left:0,top:0,width:"100%",height:"100%",zIndex:4}),this.canvas=e}render(){var e;this.frequenciesDataUrl?this.loadFrequenciesData(this.frequenciesDataUrl):this.drawSpectrogram(this.getFrequencies(null===(e=this.wavesurfer)||void 0===e?void 0:e.getDecodedData()))}getFrequencies(e){var t,i;const a=this.fftSamples,r=(null!==(t=this.options.splitChannels)&&void 0!==t?t:null===(i=this.wavesurfer)||void 0===i?void 0:i.options.splitChannels)?e.numberOfChannels:1;if(this.frequencyMax=this.frequencyMax||e.sampleRate/2,!e)return;this.buffer=e;const n=e.sampleRate,h=[];let o=this.noverlap;if(!o){const t=e.length/this.canvas.width;o=Math.max(0,Math.round(a-t))}const l=new s(a,n,this.windowFunc,this.alpha);for(let t=0;t<r;t++){const s=e.getChannelData(t),i=[];let r=0;for(;r+a<s.length;){const e=s.slice(r,r+a),t=l.calculateSpectrum(e),n=new Uint8Array(a/2);for(let e=0;e<a/2;e++)n[e]=Math.max(-255,45*Math.log10(t[e]));i.push(n),r+=a-o}h.push(i)}return h}loadFrequenciesData(e){return fetch(e).then((e=>e.json())).then(this.drawSpectrogram)}freqType(e){return e>=1e3?(e/1e3).toFixed(1):Math.round(e)}unitType(e){return e>=1e3?"KHz":"Hz"}loadLabels(e,t,s,i,a,r,n,h,o){e=e||"rgba(68,68,68,0)",t=t||"12px",s=s||"12px",i=i||"Helvetica",a=a||"#fff",r=r||"#fff",n=n||"center";const l=this.height||512,c=l/256*5,f=this.frequencyMin,u=(this.frequencyMax-f)/c,p=this.labelsEl.getContext("2d"),d=window.devicePixelRatio;if(this.labelsEl.height=this.height*o*d,this.labelsEl.width=55*d,p.scale(d,d),p)for(let h=0;h<o;h++){let o;for(p.fillStyle=e,p.fillRect(0,h*l,55,(1+h)*l),p.fill(),o=0;o<=c;o++){p.textAlign=n,p.textBaseline="middle";const e=f+u*o,c=this.freqType(e),d=this.unitType(e),w=16;let v;v=0==o?(1+h)*l+o-10:(1+h)*l-50*o+2,p.fillStyle=r,p.font=s+" "+i,p.fillText(d,w+24,v),p.fillStyle=a,p.font=t+" "+i,p.fillText(c,w,v)}}}resample(e){const t=this.width,s=[],i=1/e.length,a=1/t;let r;for(r=0;r<t;r++){const t=new Array(e[0].length);let n;for(n=0;n<e.length;n++){const s=n*i,h=s+i,o=r*a,l=o+a,c=h<=o||l<=s?0:Math.min(Math.max(h,o),Math.max(l,s))-Math.max(Math.min(h,o),Math.min(l,s));let f;if(c>0)for(f=0;f<e[0].length;f++)null==t[f]&&(t[f]=0),t[f]+=c/a*e[n][f]}const h=new Uint8Array(e[0].length);let o;for(o=0;o<e[0].length;o++)h[o]=t[o];s.push(h)}return s}}return i}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):((e="undefined"!=typeof globalThis?globalThis:e||self).WaveSurfer=e.WaveSurfer||{},e.WaveSurfer.Spectrogram=t())}(this,(function(){"use strict";function e(e,t,s,i){return new(s||(s=Promise))((function(r,a){function n(e){try{h(i.next(e))}catch(e){a(e)}}function o(e){try{h(i.throw(e))}catch(e){a(e)}}function h(e){var t;e.done?r(e.value):(t=e.value,t instanceof s?t:new s((function(e){e(t)}))).then(n,o)}h((i=i.apply(e,t||[])).next())}))}"function"==typeof SuppressedError&&SuppressedError;class t{constructor(){this.listeners={},this.on=this.addEventListener,this.un=this.removeEventListener}addEventListener(e,t,s){if(this.listeners[e]||(this.listeners[e]=new Set),this.listeners[e].add(t),null==s?void 0:s.once){const s=()=>{this.removeEventListener(e,s),this.removeEventListener(e,t)};return this.addEventListener(e,s),s}return()=>this.removeEventListener(e,t)}removeEventListener(e,t){var s;null===(s=this.listeners[e])||void 0===s||s.delete(t)}once(e,t){return this.on(e,t,{once:!0})}unAll(){this.listeners={}}emit(e,...t){this.listeners[e]&&this.listeners[e].forEach((e=>e(...t)))}}class s extends t{constructor(e){super(),this.subscriptions=[],this.options=e}onInit(){}init(e){this.wavesurfer=e,this.onInit()}destroy(){this.emit("destroy"),this.subscriptions.forEach((e=>e()))}}function i(e,t,s,i){switch(this.bufferSize=e,this.sampleRate=t,this.bandwidth=2/e*(t/2),this.sinTable=new Float32Array(e),this.cosTable=new Float32Array(e),this.windowValues=new Float32Array(e),this.reverseTable=new Uint32Array(e),this.peakBand=0,this.peak=0,s){case"bartlett":for(r=0;r<e;r++)this.windowValues[r]=2/(e-1)*((e-1)/2-Math.abs(r-(e-1)/2));break;case"bartlettHann":for(r=0;r<e;r++)this.windowValues[r]=.62-.48*Math.abs(r/(e-1)-.5)-.38*Math.cos(2*Math.PI*r/(e-1));break;case"blackman":for(i=i||.16,r=0;r<e;r++)this.windowValues[r]=(1-i)/2-.5*Math.cos(2*Math.PI*r/(e-1))+i/2*Math.cos(4*Math.PI*r/(e-1));break;case"cosine":for(r=0;r<e;r++)this.windowValues[r]=Math.cos(Math.PI*r/(e-1)-Math.PI/2);break;case"gauss":for(i=i||.25,r=0;r<e;r++)this.windowValues[r]=Math.pow(Math.E,-.5*Math.pow((r-(e-1)/2)/(i*(e-1)/2),2));break;case"hamming":for(r=0;r<e;r++)this.windowValues[r]=.54-.46*Math.cos(2*Math.PI*r/(e-1));break;case"hann":case void 0:for(r=0;r<e;r++)this.windowValues[r]=.5*(1-Math.cos(2*Math.PI*r/(e-1)));break;case"lanczoz":for(r=0;r<e;r++)this.windowValues[r]=Math.sin(Math.PI*(2*r/(e-1)-1))/(Math.PI*(2*r/(e-1)-1));break;case"rectangular":for(r=0;r<e;r++)this.windowValues[r]=1;break;case"triangular":for(r=0;r<e;r++)this.windowValues[r]=2/e*(e/2-Math.abs(r-(e-1)/2));break;default:throw Error("No such window function '"+s+"'")}for(var r,a=1,n=e>>1;a<e;){for(r=0;r<a;r++)this.reverseTable[r+a]=this.reverseTable[r]+n;a<<=1,n>>=1}for(r=0;r<e;r++)this.sinTable[r]=Math.sin(-Math.PI/r),this.cosTable[r]=Math.cos(-Math.PI/r);this.calculateSpectrum=function(e){var t,s,i,r=this.bufferSize,a=this.cosTable,n=this.sinTable,o=this.reverseTable,h=new Float32Array(r),l=new Float32Array(r),c=2/this.bufferSize,f=Math.sqrt,u=new Float32Array(r/2),p=Math.floor(Math.log(r)/Math.LN2);if(Math.pow(2,p)!==r)throw"Invalid buffer size, must be a power of 2.";if(r!==e.length)throw"Supplied buffer is not the same size as defined FFT. FFT Size: "+r+" Buffer Size: "+e.length;for(var d,w,v,b,M,g,m,y,x=1,S=0;S<r;S++)h[S]=e[o[S]]*this.windowValues[o[S]],l[S]=0;for(;x<r;){d=a[x],w=n[x],v=1,b=0;for(var E=0;E<x;E++){for(S=E;S<r;)g=v*h[M=S+x]-b*l[M],m=v*l[M]+b*h[M],h[M]=h[S]-g,l[M]=l[S]-m,h[S]+=g,l[S]+=m,S+=x<<1;v=(y=v)*d-b*w,b=y*w+b*d}x<<=1}S=0;for(var q=r/2;S<q;S++)(i=c*f((t=h[S])*t+(s=l[S])*s))>this.peak&&(this.peakBand=S,this.peak=i),u[S]=i;return u}}const r=(e,t)=>Object.assign(e.style,t);class a extends s{static create(e){return new a(e||{})}constructor(e){if(super(e),this.frequenciesDataUrl=e.frequenciesDataUrl,this.container="string"==typeof e.container?document.querySelector(e.container):e.container,e.colorMap){if(e.colorMap.length<256)throw new Error("Colormap must contain 256 elements");for(let t=0;t<e.colorMap.length;t++){if(4!==e.colorMap[t].length)throw new Error("ColorMap entries must contain 4 values")}this.colorMap=e.colorMap}else{this.colorMap=[];for(let e=0;e<256;e++){const t=(255-e)/256;this.colorMap.push([t,t,t,1])}}this.fftSamples=e.fftSamples||512,this.height=e.height||this.fftSamples/2,this.noverlap=e.noverlap,this.windowFunc=e.windowFunc,this.alpha=e.alpha,this.frequencyMin=e.frequencyMin||0,this.frequencyMax=e.frequencyMax||0,this.createWrapper(),this.createCanvas()}onInit(){this.container=this.container||this.wavesurfer.getWrapper(),this.container.appendChild(this.wrapper),this.wavesurfer.options.fillParent&&r(this.wrapper,{width:"100%",overflowX:"hidden",overflowY:"hidden"}),this.subscriptions.push(this.wavesurfer.on("redraw",(()=>this.render())))}destroy(){this.unAll(),this.wavesurfer.un("ready",this._onReady),this.wavesurfer.un("redraw",this._onRender),this.wavesurfer=null,this.util=null,this.options=null,this.wrapper&&(this.wrapper.remove(),this.wrapper=null),super.destroy()}loadFrequenciesData(t){return e(this,void 0,void 0,(function*(){const e=yield fetch(t);if(!e.ok)throw new Error("Unable to fetch frequencies data");const s=yield e.json();this.drawSpectrogram(s)}))}createWrapper(){if(this.wrapper=document.createElement("div"),r(this.wrapper,{display:"block",position:"relative",userSelect:"none"}),this.options.labels){const e=document.createElement("canvas");e.setAttribute("part","spec-labels"),r(e,{position:"absolute",zIndex:9,width:"55px",height:"100%"}),this.wrapper.appendChild(e),this.labelsEl=e}this.wrapper.addEventListener("click",this._onWrapperClick)}createCanvas(){const e=document.createElement("canvas");this.wrapper.appendChild(e),this.spectrCc=e.getContext("2d"),r(e,{position:"absolute",left:0,top:0,width:"100%",height:"100%",zIndex:4}),this.canvas=e}render(){var e;if(this.frequenciesDataUrl)this.loadFrequenciesData(this.frequenciesDataUrl);else{const t=null===(e=this.wavesurfer)||void 0===e?void 0:e.getDecodedData();t&&this.drawSpectrogram(this.getFrequencies(t))}}drawSpectrogram(e){isNaN(e[0][0])||(e=[e]),this.wrapper.style.height=this.height*e.length+"px",this.width=this.wavesurfer.getWrapper().offsetWidth,this.canvas.width=this.width,this.canvas.height=this.height*e.length;const t=this.spectrCc,s=this.height,i=this.width,r=this.buffer.sampleRate/2,a=this.frequencyMin,n=this.frequencyMax;if(t){for(let o=0;o<e.length;o++){const h=this.resample(e[o]),l=new ImageData(i,s);for(let e=0;e<h.length;e++)for(let t=0;t<h[e].length;t++){const r=this.colorMap[h[e][t]],a=4*((s-t)*i+e);l.data[a]=255*r[0],l.data[a+1]=255*r[1],l.data[a+2]=255*r[2],l.data[a+3]=255*r[3]}createImageBitmap(l).then((e=>{t.drawImage(e,0,s*(1-n/r),i,s*(n-a)/r,0,s*o,i,s)}))}this.options.labels&&this.loadLabels(this.options.labelsBackground,"12px","12px","",this.options.labelsColor,this.options.labelsHzColor||this.options.labelsColor,"center","#specLabels",e.length),this.emit("ready")}}getFrequencies(e){var t,s;const r=this.fftSamples,a=(null!==(t=this.options.splitChannels)&&void 0!==t?t:null===(s=this.wavesurfer)||void 0===s?void 0:s.options.splitChannels)?e.numberOfChannels:1;if(this.frequencyMax=this.frequencyMax||e.sampleRate/2,!e)return;this.buffer=e;const n=e.sampleRate,o=[];let h=this.noverlap;if(!h){const t=e.length/this.canvas.width;h=Math.max(0,Math.round(r-t))}const l=new i(r,n,this.windowFunc,this.alpha);for(let t=0;t<a;t++){const s=e.getChannelData(t),i=[];let a=0;for(;a+r<s.length;){const e=s.slice(a,a+r),t=l.calculateSpectrum(e),n=new Uint8Array(r/2);for(let e=0;e<r/2;e++)n[e]=Math.max(-255,45*Math.log10(t[e]));i.push(n),a+=r-h}o.push(i)}return o}freqType(e){return e>=1e3?(e/1e3).toFixed(1):Math.round(e)}unitType(e){return e>=1e3?"KHz":"Hz"}loadLabels(e,t,s,i,r,a,n,o,h){e=e||"rgba(68,68,68,0)",t=t||"12px",s=s||"12px",i=i||"Helvetica",r=r||"#fff",a=a||"#fff",n=n||"center";const l=this.height||512,c=l/256*5,f=this.frequencyMin,u=(this.frequencyMax-f)/c,p=this.labelsEl.getContext("2d"),d=window.devicePixelRatio;if(this.labelsEl.height=this.height*h*d,this.labelsEl.width=55*d,p.scale(d,d),p)for(let o=0;o<h;o++){let h;for(p.fillStyle=e,p.fillRect(0,o*l,55,(1+o)*l),p.fill(),h=0;h<=c;h++){p.textAlign=n,p.textBaseline="middle";const e=f+u*h,c=this.freqType(e),d=this.unitType(e),w=16;let v;v=0==h?(1+o)*l+h-10:(1+o)*l-50*h+2,p.fillStyle=a,p.font=s+" "+i,p.fillText(d,w+24,v),p.fillStyle=r,p.font=t+" "+i,p.fillText(c,w,v)}}}resample(e){const t=this.width,s=[],i=1/e.length,r=1/t;let a;for(a=0;a<t;a++){const t=new Array(e[0].length);let n;for(n=0;n<e.length;n++){const s=n*i,o=s+i,h=a*r,l=h+r,c=o<=h||l<=s?0:Math.min(Math.max(o,h),Math.max(l,s))-Math.max(Math.min(o,h),Math.min(l,s));let f;if(c>0)for(f=0;f<e[0].length;f++)null==t[f]&&(t[f]=0),t[f]+=c/r*e[n][f]}const o=new Uint8Array(e[0].length);let h;for(h=0;h<e[0].length;h++)o[h]=t[h];s.push(o)}return s}}return a}));

package/dist/wavesurfer.d.ts

@@ -1,6 +1,91 @@
-import type { GenericPlugin } from './base-plugin.js';
-import Player from './player.js';
-export type WaveSurferOptions = {
+type GeneralEventTypes = {
+    [EventName: string]: unknown[];
+};
+type EventListener<EventTypes extends GeneralEventTypes, EventName extends keyof EventTypes> = (...args: EventTypes[EventName]) => void;
+/** A simple event emitter that can be used to listen to and emit events. */
+declare class EventEmitter<EventTypes extends GeneralEventTypes> {
+    private listeners;
+    /** Add an event listener */
+    addEventListener<EventName extends keyof EventTypes>(event: EventName, listener: EventListener<EventTypes, EventName>, options?: {
+        once?: boolean;
+    }): () => void;
+    removeEventListener<EventName extends keyof EventTypes>(event: EventName, listener: EventListener<EventTypes, EventName>): void;
+    /** Subscribe to an event. Returns an unsubscribe function. */
+    on: <EventName extends keyof EventTypes>(event: EventName, listener: EventListener<EventTypes, EventName>, options?: {
+        once?: boolean;
+    }) => () => void;
+    /** Unsubscribe from an event */
+    un: <EventName extends keyof EventTypes>(event: EventName, listener: EventListener<EventTypes, EventName>) => void;
+    /** Subscribe to an event only once */
+    once<EventName extends keyof EventTypes>(event: EventName, listener: EventListener<EventTypes, EventName>): () => void;
+    /** Clear all events */
+    unAll(): void;
+    /** Emit an event */
+    protected emit<EventName extends keyof EventTypes>(eventName: EventName, ...args: EventTypes[EventName]): void;
+}
+
+type BasePluginEvents = {
+    destroy: [];
+};
+type GenericPlugin = BasePlugin<BasePluginEvents, unknown>;
+declare class BasePlugin<EventTypes extends BasePluginEvents, Options> extends EventEmitter<EventTypes> {
+    protected wavesurfer?: WaveSurfer;
+    protected subscriptions: (() => void)[];
+    protected options: Options;
+    constructor(options: Options);
+    onInit(): void;
+    init(wavesurfer: WaveSurfer): void;
+    destroy(): void;
+}
+
+type PlayerOptions = {
+    media?: HTMLMediaElement;
+    mediaControls?: boolean;
+    autoplay?: boolean;
+    playbackRate?: number;
+};
+declare class Player<T extends GeneralEventTypes> extends EventEmitter<T> {
+    protected media: HTMLMediaElement;
+    private isExternalMedia;
+    constructor(options: PlayerOptions);
+    protected onMediaEvent(event: keyof HTMLMediaElementEventMap, callback: () => void, options?: AddEventListenerOptions): () => void;
+    protected onceMediaEvent(event: keyof HTMLMediaElementEventMap, callback: () => void): () => void;
+    protected getSrc(): string;
+    private revokeSrc;
+    protected setSrc(url: string, blob?: Blob): void;
+    protected destroy(): void;
+    protected setMediaElement(element: HTMLMediaElement): void;
+    /** Start playing the audio */
+    play(): Promise<void>;
+    /** Pause the audio */
+    pause(): void;
+    /** Check if the audio is playing */
+    isPlaying(): boolean;
+    /** Jumpt to a specific time in the audio (in seconds) */
+    setTime(time: number): void;
+    /** Get the duration of the audio in seconds */
+    getDuration(): number;
+    /** Get the current audio position in seconds */
+    getCurrentTime(): number;
+    /** Get the audio volume */
+    getVolume(): number;
+    /** Set the audio volume */
+    setVolume(volume: number): void;
+    /** Get the audio muted state */
+    getMuted(): boolean;
+    /** Mute or unmute the audio */
+    setMuted(muted: boolean): void;
+    /** Get the playback speed */
+    getPlaybackRate(): number;
+    /** Set the playback speed, pass an optional false to NOT preserve the pitch */
+    setPlaybackRate(rate: number, preservePitch?: boolean): void;
+    /** Get the HTML media element */
+    getMediaElement(): HTMLMediaElement;
+    /** Set a sink id to change the audio output device */
+    setSinkId(sinkId: string): Promise<void>;
+}
+
+type WaveSurferOptions = {
     /** Required: an HTML element or selector where the waveform will be rendered */
     container: HTMLElement | string;
     /** The height of the waveform in pixels, or "auto" to fill the container height */
@@ -80,7 +165,7 @@ declare const defaultOptions: {
     autoCenter: boolean;
     sampleRate: number;
 };
-export type WaveSurferEvents = {
+type WaveSurferEvents = {
     /** When audio starts loading */
     load: [url: string];
     /** During audio loading */
@@ -189,4 +274,5 @@ declare class WaveSurfer extends Player<WaveSurferEvents> {
     /** Unmount wavesurfer */
     destroy(): void;
 }
-export default WaveSurfer;
+
+export { type WaveSurferEvents, type WaveSurferOptions, WaveSurfer as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wavesurfer.js",
-  "version": "7.5.4",
+  "version": "7.5.6",
   "license": "BSD-3-Clause",
   "author": "katspaugh",
   "description": "Navigable audio waveform player",
@@ -28,17 +28,17 @@
   "types": "./dist/wavesurfer.d.ts",
   "exports": {
     ".": {
-      "import": "./dist/wavesurfer.js",
+      "import": "./dist/wavesurfer.esm.js",
       "types": "./dist/wavesurfer.d.ts",
       "require": "./dist/wavesurfer.cjs"
     },
     "./dist/plugins/*.js": {
-      "import": "./dist/plugins/*.js",
+      "import": "./dist/plugins/*.esm.js",
       "types": "./dist/plugins/*.d.ts",
       "require": "./dist/plugins/*.cjs"
     },
     "./plugins/*": {
-      "import": "./dist/plugins/*.js",
+      "import": "./dist/plugins/*.esm.js",
       "types": "./dist/plugins/*.d.ts",
       "require": "./dist/plugins/*.cjs"
     },
@@ -55,8 +55,8 @@
     "make-plugin": "./scripts/plugin.sh",
     "cypress": "cypress open --e2e",
     "cypress:canary": "cypress open --e2e -b chrome:canary",
-    "test": "cypress run",
-    "serve": "npx live-server --port=9090 --no-browser --ignore='.*'",
+    "test": "cypress run --browser chrome",
+    "serve": "npx live-server --port=9090 --no-browser --ignore='.*,src,cypress,scripts'",
     "start": "npm run build:dev & npm run serve"
   },
   "devDependencies": {
@@ -71,6 +71,7 @@
     "eslint-plugin-prettier": "^4.2.1",
     "prettier": "^2.8.7",
     "rollup": "^3.26.2",
+    "rollup-plugin-dts": "^6.1.0",
     "typescript": "^5.0.4"
   }
 }