wavesurfer.js 7.0.0-alpha.9 → 7.0.0-beta.10

package/dist/plugins/minimap.js

@@ -0,0 +1,114 @@
+/**
+ * Minimap is a tiny copy of the main waveform serving as a navigation tool.
+ */
+import BasePlugin from '../base-plugin.js';
+import WaveSurfer from '../wavesurfer.js';
+const defaultOptions = {
+    height: 50,
+    overlayColor: 'rgba(100, 100, 100, 0.1)',
+    insertPosition: 'afterend',
+};
+class MinimapPlugin extends BasePlugin {
+    constructor(options) {
+        super(options);
+        this.miniWavesurfer = null;
+        this.container = null;
+        this.options = Object.assign({}, defaultOptions, options);
+        this.minimapWrapper = this.initMinimapWrapper();
+        this.overlay = this.initOverlay();
+    }
+    static create(options) {
+        return new MinimapPlugin(options);
+    }
+    /** Called by wavesurfer, don't call manually */
+    onInit() {
+        if (!this.wavesurfer) {
+            throw Error('WaveSurfer is not initialized');
+        }
+        if (this.options.container) {
+            if (typeof this.options.container === 'string') {
+                this.container = document.querySelector(this.options.container);
+            }
+            else if (this.options.container instanceof HTMLElement) {
+                this.container = this.options.container;
+            }
+            this.container?.appendChild(this.minimapWrapper);
+        }
+        else {
+            this.container = this.wavesurfer.getWrapper().parentElement;
+            this.container?.insertAdjacentElement(this.options.insertPosition, this.minimapWrapper);
+        }
+        this.initWaveSurferEvents();
+    }
+    initMinimapWrapper() {
+        const div = document.createElement('div');
+        div.style.position = 'relative';
+        div.setAttribute('part', 'minimap');
+        return div;
+    }
+    initOverlay() {
+        const div = document.createElement('div');
+        div.setAttribute('style', 'position: absolute; z-index: 2; left: 0; top: 0; bottom: 0; transition: left 100ms ease-out; pointer-events: none;');
+        div.style.backgroundColor = this.options.overlayColor;
+        this.minimapWrapper.appendChild(div);
+        return div;
+    }
+    initMinimap() {
+        if (this.miniWavesurfer) {
+            this.miniWavesurfer.destroy();
+            this.miniWavesurfer = null;
+        }
+        if (!this.wavesurfer)
+            return;
+        const data = this.wavesurfer.getDecodedData();
+        const media = this.wavesurfer.getMediaElement();
+        if (!data || !media)
+            return;
+        this.miniWavesurfer = WaveSurfer.create({
+            ...this.options,
+            container: this.minimapWrapper,
+            minPxPerSec: 0,
+            fillParent: true,
+            media,
+            peaks: [data.getChannelData(0)],
+            duration: data.duration,
+        });
+        this.subscriptions.push(this.miniWavesurfer.on('ready', () => {
+            this.emit('ready');
+        }), this.miniWavesurfer.on('interaction', () => {
+            this.emit('interaction');
+        }));
+    }
+    getOverlayWidth() {
+        const waveformWidth = this.wavesurfer?.getWrapper().clientWidth || 1;
+        return Math.round((this.minimapWrapper.clientWidth / waveformWidth) * 100);
+    }
+    onRedraw() {
+        const overlayWidth = this.getOverlayWidth();
+        this.overlay.style.width = `${overlayWidth}%`;
+    }
+    onScroll(startTime) {
+        if (!this.wavesurfer)
+            return;
+        const duration = this.wavesurfer.getDuration();
+        this.overlay.style.left = `${(startTime / duration) * 100}%`;
+    }
+    initWaveSurferEvents() {
+        if (!this.wavesurfer)
+            return;
+        this.subscriptions.push(this.wavesurfer.on('decode', () => {
+            this.initMinimap();
+        }), this.wavesurfer.on('scroll', (startTime) => {
+            this.onScroll(startTime);
+        }), this.wavesurfer.on('redraw', () => {
+            this.onRedraw();
+        }));
+    }
+    /** Unmount */
+    destroy() {
+        this.miniWavesurfer?.destroy();
+        this.minimapWrapper.remove();
+        super.destroy();
+    }
+}
+export default MinimapPlugin;

package/dist/plugins/minimap.min.cjs

@@ -0,0 +1 @@
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.Minimap=e():t.Minimap=e()}(WaveSurfer,(()=>(()=>{"use strict";var t={d:(e,i)=>{for(var s in i)t.o(i,s)&&!t.o(e,s)&&Object.defineProperty(e,s,{enumerable:!0,get:i[s]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e)},e={};t.d(e,{default:()=>g});const i=class{constructor(){this.listeners={}}on(t,e){return this.listeners[t]||(this.listeners[t]=new Set),this.listeners[t].add(e),()=>this.un(t,e)}once(t,e){const i=this.on(t,e),s=this.on(t,(()=>{i(),s()}));return i}un(t,e){this.listeners[t]&&(e?this.listeners[t].delete(e):delete this.listeners[t])}unAll(){this.listeners={}}emit(t,...e){this.listeners[t]&&this.listeners[t].forEach((t=>t(...e)))}},s=class extends i{constructor(t){super(),this.subscriptions=[],this.options=t}onInit(){}init(t){this.wavesurfer=t,this.onInit()}destroy(){this.subscriptions.forEach((t=>t()))}},r={decode:async function(t,e){const i=new AudioContext({sampleRate:e}),s=i.decodeAudioData(t);return s.finally((()=>i.close())),s},createBuffer:function(t,e){return"number"==typeof t[0]&&(t=[t]),function(t){const e=t[0];if(e.some((t=>t>1||t<-1))){const i=e.length;let s=0;for(let t=0;t<i;t++){const i=Math.abs(e[t]);i>s&&(s=i)}for(const e of t)for(let t=0;t<i;t++)e[t]/=s}}(t),{duration:e,length:t[0].length,sampleRate:t[0].length/e,numberOfChannels:t.length,getChannelData:e=>t?.[e],copyFromChannel:AudioBuffer.prototype.copyFromChannel,copyToChannel:AudioBuffer.prototype.copyToChannel}}},n=async function(t){return fetch(t).then((t=>t.blob()))},o=class extends i{constructor(t){super(),this.isExternalMedia=!1,t.media?(this.media=t.media,this.isExternalMedia=!0):this.media=document.createElement("audio"),t.autoplay&&(this.media.autoplay=!0),null!=t.playbackRate&&(this.media.playbackRate=t.playbackRate)}onMediaEvent(t,e,i){return this.media.addEventListener(t,e,i),()=>this.media.removeEventListener(t,e)}onceMediaEvent(t,e){return this.onMediaEvent(t,e,{once:!0})}revokeSrc(){(this.media.currentSrc||this.media.src||"").startsWith("blob:")&&URL.revokeObjectURL(this.media.currentSrc)}setSrc(t,e){if((this.media.currentSrc||this.media.src||"")===t)return;this.revokeSrc();const i=e instanceof Blob?URL.createObjectURL(e):t;this.media.src=i}destroy(){this.media.pause(),this.revokeSrc(),this.isExternalMedia||this.media.remove()}play(){return this.media.play()}pause(){this.media.pause()}isPlaying(){return this.media.currentTime>0&&!this.media.paused&&!this.media.ended}setTime(t){this.media.currentTime=t}getDuration(){return this.media.duration}getCurrentTime(){return this.media.currentTime}getVolume(){return this.media.volume}setVolume(t){this.media.volume=t}getMuted(){return this.media.muted}setMuted(t){this.media.muted=t}getPlaybackRate(){return this.media.playbackRate}setPlaybackRate(t,e){null!=e&&(this.media.preservesPitch=e),this.media.playbackRate=t}getMediaElement(){return this.media}setSinkId(t){return this.media.setSinkId(t)}};class a extends i{constructor(t){let e;if(super(),this.timeouts=[],this.isScrolling=!1,this.audioData=null,this.resizeObserver=null,this.isDragging=!1,this.options=t,"string"==typeof t.container?e=document.querySelector(t.container):t.container instanceof HTMLElement&&(e=t.container),!e)throw new Error("Container not found");this.parent=e;const[i,s]=this.initHtml();e.appendChild(i),this.container=i,this.scrollContainer=s.querySelector(".scroll"),this.wrapper=s.querySelector(".wrapper"),this.canvasWrapper=s.querySelector(".canvases"),this.progressWrapper=s.querySelector(".progress"),this.cursor=s.querySelector(".cursor"),this.initEvents()}initEvents(){this.wrapper.addEventListener("click",(t=>{const e=this.wrapper.getBoundingClientRect(),i=(t.clientX-e.left)/e.width;this.emit("click",i)})),this.initDrag(),this.scrollContainer.addEventListener("scroll",(()=>{const{scrollLeft:t,scrollWidth:e,clientWidth:i}=this.scrollContainer,s=t/e,r=(t+i)/e;this.emit("scroll",s,r)}));const t=this.createDelay(100);this.resizeObserver=new ResizeObserver((()=>{t((()=>this.reRender()))})),this.resizeObserver.observe(this.scrollContainer)}initDrag(){!function(t,e,i,s,r=5){let n=()=>{};if(!t)return n;t.addEventListener("pointerdown",(o=>{o.preventDefault(),o.stopPropagation();let a=o.clientX,h=o.clientY,l=!1;const c=s=>{s.preventDefault(),s.stopPropagation();const n=s.clientX,o=s.clientY;if(l||Math.abs(n-a)>=r||Math.abs(o-h)>=r){l||(l=!0,i?.(a,h));const{left:s,top:r}=t.getBoundingClientRect();e(n-a,o-h,n-s,o-r),a=n,h=o}},d=t=>{l&&(t.preventDefault(),t.stopPropagation())},u=()=>{l&&s?.(),n()};n=()=>{document.removeEventListener("pointermove",c),document.removeEventListener("pointerup",u),document.removeEventListener("pointerleave",u),setTimeout((()=>{document.removeEventListener("click",d,!0)}),10)},document.addEventListener("pointermove",c),document.addEventListener("pointerup",u),document.addEventListener("pointerleave",u),document.addEventListener("click",d,!0)}))}(this.wrapper,((t,e,i)=>{this.emit("drag",Math.max(0,Math.min(1,i/this.wrapper.clientWidth)))}),(()=>this.isDragging=!0),(()=>this.isDragging=!1))}getHeight(){return null==this.options.height?128:isNaN(Number(this.options.height))?"auto"===this.options.height&&this.parent.clientHeight||128:Number(this.options.height)}initHtml(){const t=document.createElement("div"),e=t.attachShadow({mode:"open"});return e.innerHTML=`\n      <style>\n        :host {\n          user-select: none;\n        }\n        :host .scroll {\n          overflow-x: auto;\n          overflow-y: hidden;\n          width: 100%;\n          position: relative;\n        }\n        :host .noScrollbar {\n          scrollbar-color: transparent;\n          scrollbar-width: none;\n        }\n        :host .noScrollbar::-webkit-scrollbar {\n          display: none;\n          -webkit-appearance: none;\n        }\n        :host .wrapper {\n          position: relative;\n          overflow: visible;\n          z-index: 2;\n        }\n        :host .canvases {\n          min-height: ${this.getHeight()}px;\n        }\n        :host .canvases > div {\n          position: relative;\n        }\n        :host canvas {\n          display: block;\n          position: absolute;\n          top: 0;\n          image-rendering: pixelated;\n        }\n        :host .progress {\n          pointer-events: none;\n          position: absolute;\n          z-index: 2;\n          top: 0;\n          left: 0;\n          width: 0;\n          height: 100%;\n          overflow: hidden;\n        }\n        :host .progress > div {\n          position: relative;\n        }\n        :host .cursor {\n          pointer-events: none;\n          position: absolute;\n          z-index: 5;\n          top: 0;\n          left: 0;\n          height: 100%;\n          border-radius: 2px;\n        }\n      </style>\n\n      <div class="scroll" part="scroll">\n        <div class="wrapper">\n          <div class="canvases"></div>\n          <div class="progress" part="progress"></div>\n          <div class="cursor" part="cursor"></div>\n        </div>\n      </div>\n    `,[t,e]}setOptions(t){this.options=t,this.reRender()}getWrapper(){return this.wrapper}getScroll(){return this.scrollContainer.scrollLeft}destroy(){this.container.remove(),this.resizeObserver?.disconnect()}createDelay(t=10){const e={};return this.timeouts.push(e),i=>{e.timeout&&clearTimeout(e.timeout),e.timeout=setTimeout(i,t)}}convertColorValues(t){if(!Array.isArray(t))return t||"";if(t.length<2)return t[0]||"";const e=document.createElement("canvas"),i=e.getContext("2d").createLinearGradient(0,0,0,e.height),s=1/(t.length-1);return t.forEach(((t,e)=>{const r=e*s;i.addColorStop(r,t)})),i}renderBars(t,e,i){if(i.fillStyle=this.convertColorValues(e.waveColor),e.renderFunction)return void e.renderFunction(t,i);const s=t[0],r=t[1]||t[0],n=s.length,o=window.devicePixelRatio||1,{width:a,height:h}=i.canvas,l=h/2,c=e.barHeight||1,d=e.barWidth?e.barWidth*o:1,u=e.barGap?e.barGap*o:e.barWidth?d/2:0,p=e.barRadius||0,m=a/(d+u)/n;let g=1;if(e.normalize){g=0;for(let t=0;t<n;t++){const e=Math.abs(s[t]);e>g&&(g=e)}}const v=l/g*c;i.beginPath();let f=0,y=0,b=0;for(let t=0;t<=n;t++){const n=Math.round(t*m);if(n>f){const t=Math.round(y*v),s=t+Math.round(b*v)||1;let r=l-t;"top"===e.barAlign?r=0:"bottom"===e.barAlign&&(r=h-s),i.roundRect(f*(d+u),r,d,s,p),f=n,y=0,b=0}const o=Math.abs(s[t]||0),a=Math.abs(r[t]||0);o>y&&(y=o),a>b&&(b=a)}i.fill(),i.closePath()}renderSingleCanvas(t,e,i,s,r,n,o,a){const h=window.devicePixelRatio||1,l=document.createElement("canvas"),c=t[0].length;l.width=Math.round(i*(n-r)/c),l.height=s*h,l.style.width=`${Math.floor(l.width/h)}px`,l.style.height=`${s}px`,l.style.left=`${Math.floor(r*i/h/c)}px`,o.appendChild(l);const d=l.getContext("2d");this.renderBars(t.map((t=>t.slice(r,n))),e,d);const u=l.cloneNode();a.appendChild(u);const p=u.getContext("2d");l.width>0&&l.height>0&&p.drawImage(l,0,0),p.globalCompositeOperation="source-in",p.fillStyle=this.convertColorValues(e.progressColor),p.fillRect(0,0,l.width,l.height)}renderWaveform(t,e,i){const s=document.createElement("div"),r=this.getHeight();s.style.height=`${r}px`,this.canvasWrapper.style.minHeight=`${r}px`,this.canvasWrapper.appendChild(s);const n=s.cloneNode();this.progressWrapper.appendChild(n);const{scrollLeft:o,scrollWidth:h,clientWidth:l}=this.scrollContainer,c=t[0].length,d=c/h;let u=Math.min(a.MAX_CANVAS_WIDTH,l);if(e.barWidth||e.barGap){const t=e.barWidth||.5,i=t+(e.barGap||t/2);u%i!=0&&(u=Math.floor(u/i)*i)}const p=Math.floor(Math.abs(o)*d),m=Math.floor(p+u*d),g=m-p,v=(o,a)=>{this.renderSingleCanvas(t,e,i,r,Math.max(0,o),Math.min(a,c),s,n)},f=this.createDelay(),y=this.createDelay(),b=(t,e)=>{v(t,e),t>0&&f((()=>{b(t-g,e-g)}))},w=(t,e)=>{v(t,e),e<c&&y((()=>{w(t+g,e+g)}))};b(p,m),m<c&&w(m,m+g)}render(t){this.timeouts.forEach((t=>t.timeout&&clearTimeout(t.timeout))),this.timeouts=[];const e=window.devicePixelRatio||1,i=this.scrollContainer.clientWidth,s=Math.ceil(t.duration*(this.options.minPxPerSec||0));this.isScrolling=s>i;const r=this.options.fillParent&&!this.isScrolling,n=(r?i:s)*e;if(this.wrapper.style.width=r?"100%":`${s}px`,this.scrollContainer.style.overflowX=this.isScrolling?"auto":"hidden",this.scrollContainer.classList.toggle("noScrollbar",!!this.options.hideScrollbar),this.cursor.style.backgroundColor=`${this.options.cursorColor||this.options.progressColor}`,this.cursor.style.width=`${this.options.cursorWidth}px`,this.canvasWrapper.innerHTML="",this.progressWrapper.innerHTML="",this.options.splitChannels)for(let e=0;e<t.numberOfChannels;e++){const i={...this.options,...this.options.splitChannels[e]};this.renderWaveform([t.getChannelData(e)],i,n)}else{const e=[t.getChannelData(0)];t.numberOfChannels>1&&e.push(t.getChannelData(1)),this.renderWaveform(e,this.options,n)}this.audioData=t,this.emit("render")}reRender(){if(!this.audioData)return;const t=this.progressWrapper.clientWidth;this.render(this.audioData);const e=this.progressWrapper.clientWidth;this.scrollContainer.scrollLeft+=e-t}zoom(t){this.options.minPxPerSec=t,this.reRender()}scrollIntoView(t,e=!1){const{clientWidth:i,scrollLeft:s,scrollWidth:r}=this.scrollContainer,n=r*t,o=i/2;if(n>s+(e&&this.options.autoCenter&&!this.isDragging?o:i)||n<s)if(this.options.autoCenter&&!this.isDragging){const t=o/20;n-(s+o)>=t&&n<s+i?this.scrollContainer.scrollLeft+=t:this.scrollContainer.scrollLeft=n-o}else if(this.isDragging){const t=10;this.scrollContainer.scrollLeft=n<s?n-t:n-i+t}else this.scrollContainer.scrollLeft=n;{const{scrollLeft:t}=this.scrollContainer,e=t/r,s=(t+i)/r;this.emit("scroll",e,s)}}renderProgress(t,e){isNaN(t)||(this.progressWrapper.style.width=100*t+"%",this.cursor.style.left=100*t+"%",this.cursor.style.marginLeft=100===Math.round(100*t)?`-${this.options.cursorWidth}px`:"",this.isScrolling&&this.options.autoScroll&&this.scrollIntoView(t,e))}}a.MAX_CANVAS_WIDTH=4e3;const h=a,l=class extends i{constructor(){super(...arguments),this.unsubscribe=()=>{}}start(){this.unsubscribe=this.on("tick",(()=>{requestAnimationFrame((()=>{this.emit("tick")}))})),this.emit("tick")}stop(){this.unsubscribe()}destroy(){this.unsubscribe()}},c={waveColor:"#999",progressColor:"#555",cursorWidth:1,minPxPerSec:0,fillParent:!0,interact:!0,autoScroll:!0,autoCenter:!0,sampleRate:8e3};class d extends o{static create(t){return new d(t)}constructor(t){super({media:t.media,autoplay:t.autoplay,playbackRate:t.audioRate}),this.plugins=[],this.decodedData=null,this.duration=null,this.subscriptions=[],this.options=Object.assign({},c,t),this.timer=new l,this.renderer=new h(this.options),this.initPlayerEvents(),this.initRendererEvents(),this.initTimerEvents(),this.initPlugins();const e=this.options.url||this.options.media?.currentSrc||this.options.media?.src;e&&this.load(e,this.options.peaks,this.options.duration)}setOptions(t){this.options=Object.assign({},this.options,t),this.renderer.setOptions(this.options),t.audioRate&&this.setPlaybackRate(t.audioRate)}initTimerEvents(){this.subscriptions.push(this.timer.on("tick",(()=>{const t=this.getCurrentTime();this.renderer.renderProgress(t/this.getDuration(),!0),this.emit("timeupdate",t),this.emit("audioprocess",t)})))}initPlayerEvents(){this.subscriptions.push(this.onMediaEvent("timeupdate",(()=>{const t=this.getCurrentTime();this.renderer.renderProgress(t/this.getDuration(),this.isPlaying()),this.emit("timeupdate",t)})),this.onMediaEvent("play",(()=>{this.emit("play"),this.timer.start()})),this.onMediaEvent("pause",(()=>{this.emit("pause"),this.timer.stop()})),this.onMediaEvent("ended",(()=>{this.emit("finish")})),this.onMediaEvent("seeking",(()=>{this.emit("seeking",this.getCurrentTime())})))}initRendererEvents(){this.subscriptions.push(this.renderer.on("click",(t=>{this.options.interact&&(this.seekTo(t),this.emit("interaction",this.getCurrentTime()),this.emit("click",t))})),this.renderer.on("scroll",((t,e)=>{const i=this.getDuration();this.emit("scroll",t*i,e*i)})),this.renderer.on("render",(()=>{this.emit("redraw")})));{let t;this.subscriptions.push(this.renderer.on("drag",(e=>{this.options.interact&&(this.renderer.renderProgress(e),clearTimeout(t),t=setTimeout((()=>{this.seekTo(e)}),this.isPlaying()?0:200),this.emit("interaction",e*this.getDuration()),this.emit("drag",e))})))}}initPlugins(){this.options.plugins?.length&&this.options.plugins.forEach((t=>{this.registerPlugin(t)}))}registerPlugin(t){return t.init(this),this.plugins.push(t),t}getWrapper(){return this.renderer.getWrapper()}getScroll(){return this.renderer.getScroll()}getActivePlugins(){return this.plugins}async load(t,e,i){this.decodedData=null,this.duration=null,this.emit("load",t);const s=e?void 0:await n(t);if(this.setSrc(t,s),this.duration=i||this.getDuration()||await new Promise((t=>{this.onceMediaEvent("loadedmetadata",(()=>t(this.getDuration())))}))||0,e)this.decodedData=r.createBuffer(e,this.duration);else if(s){const t=await s.arrayBuffer();this.decodedData=await r.decode(t,this.options.sampleRate),0!==this.duration&&this.duration!==1/0||(this.duration=this.decodedData.duration)}this.emit("decode",this.duration),this.decodedData&&this.renderer.render(this.decodedData),this.emit("ready",this.duration)}zoom(t){if(!this.decodedData)throw new Error("No audio loaded");this.renderer.zoom(t),this.emit("zoom",t)}getDecodedData(){return this.decodedData}getDuration(){return null!==this.duration?this.duration:super.getDuration()}toggleInteraction(t){this.options.interact=t}seekTo(t){const e=this.getDuration()*t;this.setTime(e)}async playPause(){return this.isPlaying()?this.pause():this.play()}stop(){this.pause(),this.setTime(0)}skip(t){this.setTime(this.getCurrentTime()+t)}empty(){this.load("",[[0]],.001)}destroy(){this.emit("destroy"),this.subscriptions.forEach((t=>t())),this.plugins.forEach((t=>t.destroy())),this.timer.destroy(),this.renderer.destroy(),super.destroy()}}const u=d,p={height:50,overlayColor:"rgba(100, 100, 100, 0.1)",insertPosition:"afterend"};class m extends s{constructor(t){super(t),this.miniWavesurfer=null,this.container=null,this.options=Object.assign({},p,t),this.minimapWrapper=this.initMinimapWrapper(),this.overlay=this.initOverlay()}static create(t){return new m(t)}onInit(){if(!this.wavesurfer)throw Error("WaveSurfer is not initialized");this.options.container?("string"==typeof this.options.container?this.container=document.querySelector(this.options.container):this.options.container instanceof HTMLElement&&(this.container=this.options.container),this.container?.appendChild(this.minimapWrapper)):(this.container=this.wavesurfer.getWrapper().parentElement,this.container?.insertAdjacentElement(this.options.insertPosition,this.minimapWrapper)),this.initWaveSurferEvents()}initMinimapWrapper(){const t=document.createElement("div");return t.style.position="relative",t.setAttribute("part","minimap"),t}initOverlay(){const t=document.createElement("div");return t.setAttribute("style","position: absolute; z-index: 2; left: 0; top: 0; bottom: 0; transition: left 100ms ease-out; pointer-events: none;"),t.style.backgroundColor=this.options.overlayColor,this.minimapWrapper.appendChild(t),t}initMinimap(){if(this.miniWavesurfer&&(this.miniWavesurfer.destroy(),this.miniWavesurfer=null),!this.wavesurfer)return;const t=this.wavesurfer.getDecodedData(),e=this.wavesurfer.getMediaElement();t&&e&&(this.miniWavesurfer=u.create({...this.options,container:this.minimapWrapper,minPxPerSec:0,fillParent:!0,media:e,peaks:[t.getChannelData(0)],duration:t.duration}),this.subscriptions.push(this.miniWavesurfer.on("ready",(()=>{this.emit("ready")})),this.miniWavesurfer.on("interaction",(()=>{this.emit("interaction")}))))}getOverlayWidth(){const t=this.wavesurfer?.getWrapper().clientWidth||1;return Math.round(this.minimapWrapper.clientWidth/t*100)}onRedraw(){const t=this.getOverlayWidth();this.overlay.style.width=`${t}%`}onScroll(t){if(!this.wavesurfer)return;const e=this.wavesurfer.getDuration();this.overlay.style.left=t/e*100+"%"}initWaveSurferEvents(){this.wavesurfer&&this.subscriptions.push(this.wavesurfer.on("decode",(()=>{this.initMinimap()})),this.wavesurfer.on("scroll",(t=>{this.onScroll(t)})),this.wavesurfer.on("redraw",(()=>{this.onRedraw()})))}destroy(){this.miniWavesurfer?.destroy(),this.minimapWrapper.remove(),super.destroy()}}const g=m;return e.default})()));

package/dist/plugins/record.d.ts

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

package/dist/plugins/record.js

@@ -0,0 +1,132 @@
+/**
+ * Record audio from the microphone, render a waveform and download the audio.
+ */
+import BasePlugin from '../base-plugin.js';
+const MIME_TYPES = ['audio/webm', 'audio/wav', 'audio/mpeg', 'audio/mp4', 'audio/mp3'];
+const findSupportedMimeType = () => MIME_TYPES.find((mimeType) => MediaRecorder.isTypeSupported(mimeType));
+class RecordPlugin extends BasePlugin {
+    constructor() {
+        super(...arguments);
+        this.mediaRecorder = null;
+        this.recordedUrl = '';
+    }
+    static create(options) {
+        return new RecordPlugin(options || {});
+    }
+    loadBlob(data, type) {
+        const blob = new Blob(data, { type });
+        this.recordedUrl = URL.createObjectURL(blob);
+        this.wavesurfer?.load(this.recordedUrl);
+    }
+    render(stream) {
+        if (!this.wavesurfer)
+            return () => undefined;
+        const container = this.wavesurfer.getWrapper();
+        const canvas = document.createElement('canvas');
+        canvas.width = container.clientWidth;
+        canvas.height = container.clientHeight;
+        canvas.style.zIndex = '10';
+        container.appendChild(canvas);
+        const canvasCtx = canvas.getContext('2d');
+        const audioContext = new AudioContext();
+        const source = audioContext.createMediaStreamSource(stream);
+        const analyser = audioContext.createAnalyser();
+        source.connect(analyser);
+        let animationId;
+        const drawWaveform = () => {
+            if (!canvasCtx)
+                return;
+            canvasCtx.clearRect(0, 0, canvas.width, canvas.height);
+            const bufferLength = analyser.frequencyBinCount;
+            const dataArray = new Uint8Array(bufferLength);
+            analyser.getByteTimeDomainData(dataArray);
+            canvasCtx.lineWidth = this.options.lineWidth || 2;
+            const color = this.options.realtimeWaveColor || this.wavesurfer?.options.waveColor || '';
+            canvasCtx.strokeStyle = Array.isArray(color) ? color[0] : color;
+            canvasCtx.beginPath();
+            const sliceWidth = (canvas.width * 1.0) / bufferLength;
+            let x = 0;
+            for (let i = 0; i < bufferLength; i++) {
+                const v = dataArray[i] / 128.0;
+                const y = (v * canvas.height) / 2;
+                if (i === 0) {
+                    canvasCtx.moveTo(x, y);
+                }
+                else {
+                    canvasCtx.lineTo(x, y);
+                }
+                x += sliceWidth;
+            }
+            canvasCtx.lineTo(canvas.width, canvas.height / 2);
+            canvasCtx.stroke();
+            animationId = requestAnimationFrame(drawWaveform);
+        };
+        drawWaveform();
+        return () => {
+            if (animationId) {
+                cancelAnimationFrame(animationId);
+            }
+            if (source) {
+                source.disconnect();
+                source.mediaStream.getTracks().forEach((track) => track.stop());
+            }
+            if (audioContext) {
+                audioContext.close();
+            }
+            canvas?.remove();
+        };
+    }
+    cleanUp() {
+        this.stopRecording();
+        this.wavesurfer?.empty();
+        if (this.recordedUrl) {
+            URL.revokeObjectURL(this.recordedUrl);
+            this.recordedUrl = '';
+        }
+    }
+    async startRecording() {
+        this.cleanUp();
+        let stream;
+        try {
+            stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+        }
+        catch (err) {
+            throw new Error('Error accessing the microphone: ' + err.message);
+        }
+        const onStop = this.render(stream);
+        const mediaRecorder = new MediaRecorder(stream, {
+            mimeType: this.options.mimeType || findSupportedMimeType(),
+            audioBitsPerSecond: this.options.audioBitsPerSecond,
+        });
+        const recordedChunks = [];
+        mediaRecorder.addEventListener('dataavailable', (event) => {
+            if (event.data.size > 0) {
+                recordedChunks.push(event.data);
+            }
+        });
+        mediaRecorder.addEventListener('stop', () => {
+            onStop();
+            this.loadBlob(recordedChunks, mediaRecorder.mimeType);
+            this.emit('stopRecording');
+        });
+        mediaRecorder.start();
+        this.emit('startRecording');
+        this.mediaRecorder = mediaRecorder;
+    }
+    isRecording() {
+        return this.mediaRecorder?.state === 'recording';
+    }
+    stopRecording() {
+        if (this.isRecording()) {
+            this.mediaRecorder?.stop();
+        }
+    }
+    getRecordedUrl() {
+        return this.recordedUrl;
+    }
+    destroy() {
+        super.destroy();
+        this.cleanUp();
+    }
+}
+export default RecordPlugin;

package/dist/plugins/record.min.cjs

@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.Record=t():e.Record=t()}(WaveSurfer,(()=>(()=>{"use strict";var e={d:(t,r)=>{for(var i in r)e.o(r,i)&&!e.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:r[i]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)},t={};e.d(t,{default:()=>n});const r=class{constructor(){this.listeners={}}on(e,t){return this.listeners[e]||(this.listeners[e]=new Set),this.listeners[e].add(t),()=>this.un(e,t)}once(e,t){const r=this.on(e,t),i=this.on(e,(()=>{r(),i()}));return r}un(e,t){this.listeners[e]&&(t?this.listeners[e].delete(t):delete this.listeners[e])}unAll(){this.listeners={}}emit(e,...t){this.listeners[e]&&this.listeners[e].forEach((e=>e(...t)))}},i=class extends r{constructor(e){super(),this.subscriptions=[],this.options=e}onInit(){}init(e){this.wavesurfer=e,this.onInit()}destroy(){this.subscriptions.forEach((e=>e()))}},s=["audio/webm","audio/wav","audio/mpeg","audio/mp4","audio/mp3"];class o extends i{constructor(){super(...arguments),this.mediaRecorder=null,this.recordedUrl=""}static create(e){return new o(e||{})}loadBlob(e,t){const r=new Blob(e,{type:t});this.recordedUrl=URL.createObjectURL(r),this.wavesurfer?.load(this.recordedUrl)}render(e){if(!this.wavesurfer)return()=>{};const t=this.wavesurfer.getWrapper(),r=document.createElement("canvas");r.width=t.clientWidth,r.height=t.clientHeight,r.style.zIndex="10",t.appendChild(r);const i=r.getContext("2d"),s=new AudioContext,o=s.createMediaStreamSource(e),n=s.createAnalyser();let a;o.connect(n);const d=()=>{if(!i)return;i.clearRect(0,0,r.width,r.height);const e=n.frequencyBinCount,t=new Uint8Array(e);n.getByteTimeDomainData(t),i.lineWidth=this.options.lineWidth||2;const s=this.options.realtimeWaveColor||this.wavesurfer?.options.waveColor||"";i.strokeStyle=Array.isArray(s)?s[0]:s,i.beginPath();const o=1*r.width/e;let c=0;for(let s=0;s<e;s++){const e=t[s]/128*r.height/2;0===s?i.moveTo(c,e):i.lineTo(c,e),c+=o}i.lineTo(r.width,r.height/2),i.stroke(),a=requestAnimationFrame(d)};return d(),()=>{a&&cancelAnimationFrame(a),o&&(o.disconnect(),o.mediaStream.getTracks().forEach((e=>e.stop()))),s&&s.close(),r?.remove()}}cleanUp(){this.stopRecording(),this.wavesurfer?.empty(),this.recordedUrl&&(URL.revokeObjectURL(this.recordedUrl),this.recordedUrl="")}async startRecording(){let e;this.cleanUp();try{e=await navigator.mediaDevices.getUserMedia({audio:!0})}catch(e){throw new Error("Error accessing the microphone: "+e.message)}const t=this.render(e),r=new MediaRecorder(e,{mimeType:this.options.mimeType||s.find((e=>MediaRecorder.isTypeSupported(e))),audioBitsPerSecond:this.options.audioBitsPerSecond}),i=[];r.addEventListener("dataavailable",(e=>{e.data.size>0&&i.push(e.data)})),r.addEventListener("stop",(()=>{t(),this.loadBlob(i,r.mimeType),this.emit("stopRecording")})),r.start(),this.emit("startRecording"),this.mediaRecorder=r}isRecording(){return"recording"===this.mediaRecorder?.state}stopRecording(){this.isRecording()&&this.mediaRecorder?.stop()}getRecordedUrl(){return this.recordedUrl}destroy(){super.destroy(),this.cleanUp()}}const n=o;return t.default})()));

package/dist/plugins/regions.d.ts

@@ -1,53 +1,94 @@
+/**
+ * Regions are visual overlays on the waveform that can be used to mark segments of audio.
+ * Regions can be clicked on, dragged and resized.
+ * You can set the color and content of each region, as well as their HTML content.
+ */
 import BasePlugin from '../base-plugin.js';
-import { WaveSurferPluginParams } from '../index.js';
-type RegionsPluginOptions = {
-    dragSelection?: boolean;
-    draggable?: boolean;
-    resizable?: boolean;
+import EventEmitter from '../event-emitter.js';
+export type RegionsPluginOptions = undefined;
+export type RegionsPluginEvents = {
+    'region-created': [region: Region];
+    'region-updated': [region: Region];
+    'region-clicked': [region: Region, e: MouseEvent];
+    'region-double-clicked': [region: Region, e: MouseEvent];
 };
-type Region = {
-    startTime: number;
-    endTime: number;
-    title: string;
-    start: number;
-    end: number;
-    element: HTMLElement;
+export type RegionEvents = {
+    remove: [];
+    update: [];
+    'update-end': [];
+    play: [];
+    click: [event: MouseEvent];
+    dblclick: [event: MouseEvent];
+    over: [event: MouseEvent];
+    leave: [event: MouseEvent];
 };
-type RegionsPluginEvents = {
-    'region-created': {
-        region: Region;
-    };
-    'region-updated': {
-        region: Region;
-    };
-    'region-clicked': {
-        region: Region;
-    };
+export type RegionParams = {
+    id?: string;
+    start: number;
+    end?: number;
+    drag?: boolean;
+    resize?: boolean;
+    color?: string;
+    content?: string | HTMLElement;
 };
+export declare class Region extends EventEmitter<RegionEvents> {
+    private totalDuration;
+    element: HTMLElement;
+    id: string;
+    start: number;
+    end: number;
+    drag: boolean;
+    resize: boolean;
+    color: string;
+    content?: HTMLElement;
+    constructor(params: RegionParams, totalDuration: number);
+    private initElement;
+    private renderPosition;
+    private initMouseEvents;
+    private onStartMoving;
+    private onEndMoving;
+    private onUpdate;
+    private onMove;
+    private onResize;
+    private onEndResizing;
+    _setTotalDuration(totalDuration: number): void;
+    /** Play the region from start to end */
+    play(): void;
+    /** Update the region's options */
+    setOptions(options: {
+        color?: string;
+        drag?: boolean;
+        resize?: boolean;
+        start?: number;
+        end?: number;
+    }): void;
+    /** Remove the region */
+    remove(): void;
+}
 declare class RegionsPlugin extends BasePlugin<RegionsPluginEvents, RegionsPluginOptions> {
-    private dragStart;
-    private wrapper;
     private regions;
-    private createdRegion;
-    private modifiedRegion;
-    private isResizingLeft;
-    private isMoving;
+    private regionsContainer;
+    /** Create an instance of RegionsPlugin */
+    constructor(options?: RegionsPluginOptions);
     /** Create an instance of RegionsPlugin */
-    constructor(params: WaveSurferPluginParams, options: RegionsPluginOptions);
-    /** Unmount */
+    static create(options?: RegionsPluginOptions): RegionsPlugin;
+    /** Called by wavesurfer, don't call manually */
+    onInit(): void;
+    private initRegionsContainer;
+    /** Get all created regions */
+    getRegions(): Region[];
+    private avoidOverlapping;
+    private saveRegion;
+    /** Create a region with given parameters */
+    addRegion(options: RegionParams): Region;
+    /**
+     * Enable creation of regions by dragging on an empty space on the waveform.
+     * Returns a function to disable the drag selection.
+     */
+    enableDragSelection(options: Omit<RegionParams, 'start' | 'end'>): () => void;
+    /** Remove all regions */
+    clearRegions(): void;
+    /** Destroy the plugin and clean up */
     destroy(): void;
-    private initWrapper;
-    private handleMouseDown;
-    private handleMouseMove;
-    private handleMouseUp;
-    private createRegionElement;
-    private createRegion;
-    private addRegion;
-    private updateRegion;
-    private moveRegion;
-    /** Create a region at a given start and end time, with an optional title */
-    add(startTime: number, endTime: number, title?: string, color?: string): Region;
-    /** Set the background color of a region */
-    setRegionColor(region: Region, color: string): void;
 }
 export default RegionsPlugin;