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

package/README.md

@@ -33,7 +33,7 @@ yarn
 Start the TypeScript compiler in watch mode:
 
 ```
-yarn build -w
+yarn build:dev
 ```
 
 Run an HTTP server to view the examples:
@@ -42,7 +42,7 @@ Run an HTTP server to view the examples:
 python3 -m http.server --cgi 8080
 ```
 
-Open http://localhost:8080/examples/basic/ in your browser.
+Open http://localhost:8080/tutorial in your browser.
 There's no hot reload yet, so you'll need to reload the page manually on every change.
 
 ## Feedback

package/dist/decoder.js

@@ -12,8 +12,7 @@ const SAMPLE_RATE = 3000;
 class Decoder {
     constructor() {
         this.audioCtx = null;
-        this.audioCtx = new (window.AudioContext ||
-            window.webkitAudioContext)({
+        this.audioCtx = new AudioContext({
             latencyHint: 'playback',
             sampleRate: SAMPLE_RATE,
         });

package/dist/event-emitter.d.ts

@@ -7,5 +7,7 @@ declare class EventEmitter<EventTypes extends GeneralEventTypes> {
     protected emit<T extends keyof EventTypes>(eventType: T, detail?: EventTypes[T]): void;
     /** Subscribe to an event and return a function to unsubscribe */
     on<T extends keyof EventTypes>(eventType: T, callback: (detail: EventTypes[T]) => void): () => void;
+    /** Subscribe to an event once and return a function to unsubscribe */
+    once<T extends keyof EventTypes>(eventType: T, callback: (detail: EventTypes[T]) => void): () => void;
 }
 export default EventEmitter;

package/dist/event-emitter.js

@@ -17,5 +17,13 @@ class EventEmitter {
         this.eventTarget.addEventListener(eventName, handler);
         return () => this.eventTarget.removeEventListener(eventName, handler);
     }
+    /** Subscribe to an event once and return a function to unsubscribe */
+    once(eventType, callback) {
+        const unsubscribe = this.on(eventType, (...args) => {
+            unsubscribe();
+            callback(...args);
+        });
+        return unsubscribe;
+    }
 }
 export default EventEmitter;

package/dist/index.js

@@ -127,7 +127,7 @@ export class WaveSurfer extends EventEmitter {
         if (this.channelData == null || this.duration == null) {
             throw new Error('No audio loaded');
         }
-        this.renderer.render(this.channelData, this.duration, minPxPerSec);
+        this.renderer.zoom(this.channelData, this.duration, minPxPerSec);
     }
     /** Start playing the audio */
     play() {

package/dist/player-webaudio.js

@@ -16,8 +16,7 @@ class WebAudioPlayer extends Player {
     loadUrl(url) {
         super.loadUrl(url);
         if (!this.audioCtx) {
-            this.audioCtx = new (window.AudioContext ||
-                window.webkitAudioContext)({
+            this.audioCtx = new AudioContext({
                 latencyHint: 'playback',
             });
         }

package/dist/renderer.d.ts

@@ -17,7 +17,7 @@ type RendererEvents = {
 declare class Renderer extends EventEmitter<RendererEvents> {
     private options;
     private container;
-    private shadowRoot;
+    private scrollContainer;
     private mainCanvas;
     private progressCanvas;
     private cursor;
@@ -26,8 +26,9 @@ declare class Renderer extends EventEmitter<RendererEvents> {
     destroy(): void;
     private renderLinePeaks;
     private renderBarPeaks;
-    render(channelData: Float32Array[], duration: number, minPxPerSec?: number): void;
     private createProgressMask;
+    render(channelData: Float32Array[], duration: number): void;
+    zoom(channelData: Float32Array[], duration: number, minPxPerSec: number): void;
     renderProgress(progress: number, autoCenter?: boolean): void;
     getContainer(): HTMLElement;
 }

package/dist/renderer.js

@@ -66,7 +66,7 @@ class Renderer extends EventEmitter {
       </div>
     `;
         this.container = div;
-        this.shadowRoot = shadow;
+        this.scrollContainer = shadow.querySelector('.scroll');
         this.mainCanvas = shadow.querySelector('canvas');
         this.ctx = this.mainCanvas.getContext('2d', { desynchronized: true });
         this.progressCanvas = shadow.querySelector('.progress');
@@ -150,17 +150,6 @@ class Renderer extends EventEmitter {
         ctx.fillStyle = this.options.waveColor;
         ctx.fill();
     }
-    render(channelData, duration, minPxPerSec = this.options.minPxPerSec) {
-        const { devicePixelRatio } = window;
-        const width = Math.max(this.container.clientWidth * devicePixelRatio, duration * minPxPerSec);
-        const { height } = this.options;
-        this.mainCanvas.width = width;
-        this.mainCanvas.height = height;
-        this.mainCanvas.style.width = Math.round(width / devicePixelRatio) + 'px';
-        const renderingFn = this.options.barWidth ? this.renderBarPeaks : this.renderLinePeaks;
-        renderingFn.call(this, channelData, width, height);
-        this.createProgressMask();
-    }
     createProgressMask() {
         const progressCtx = this.progressCanvas.getContext('2d', { desynchronized: true });
         if (!progressCtx) {
@@ -175,6 +164,26 @@ class Renderer extends EventEmitter {
         progressCtx.fillStyle = this.options.progressColor;
         progressCtx.fillRect(0, 0, this.progressCanvas.width, this.progressCanvas.height);
     }
+    render(channelData, duration) {
+        const { devicePixelRatio } = window;
+        const width = Math.max(this.container.clientWidth * devicePixelRatio, duration * this.options.minPxPerSec);
+        const { height } = this.options;
+        this.mainCanvas.width = width;
+        this.mainCanvas.height = height;
+        this.mainCanvas.style.width = Math.round(width / devicePixelRatio) + 'px';
+        const renderingFn = this.options.barWidth ? this.renderBarPeaks : this.renderLinePeaks;
+        renderingFn.call(this, channelData, width, height);
+        this.createProgressMask();
+    }
+    zoom(channelData, duration, minPxPerSec) {
+        // Remember the current cursor position
+        const oldCursorPosition = this.cursor.getBoundingClientRect().left;
+        this.options.minPxPerSec = minPxPerSec;
+        this.render(channelData, duration);
+        // Adjust the scroll position so that the cursor stays in the same place
+        const newCursortPosition = this.cursor.getBoundingClientRect().left;
+        this.scrollContainer.scrollLeft += newCursortPosition - oldCursorPosition;
+    }
     renderProgress(progress, autoCenter = false) {
         this.progressCanvas.style.clipPath = `inset(0 ${100 - progress * 100}% 0 0)`;
         this.cursor.style.left = `${progress * 100}%`;
@@ -182,12 +191,12 @@ class Renderer extends EventEmitter {
             const center = this.container.clientWidth / 2;
             const fullWidth = this.mainCanvas.clientWidth;
             if (fullWidth * progress >= center) {
-                this.container.scrollLeft = fullWidth * progress - center;
+                this.scrollContainer.scrollLeft = fullWidth * progress - center;
             }
         }
     }
     getContainer() {
-        return this.shadowRoot.querySelector('.scroll');
+        return this.scrollContainer;
     }
 }
 export default Renderer;

package/dist/wavesurfer.Regions.min.js

@@ -0,0 +1 @@
+!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.Regions=t():e.Regions=t()}(WaveSurfer,(()=>(()=>{"use strict";var e={d:(t,i)=>{for(var n in i)e.o(i,n)&&!e.o(t,n)&&Object.defineProperty(t,n,{enumerable:!0,get:i[n]})},o:(e,t)=>Object.prototype.hasOwnProperty.call(e,t)},t={};e.d(t,{default:()=>s});const i=class{constructor(){this.eventTarget=new EventTarget}emit(e,t){const i=new CustomEvent(String(e),{detail:t});this.eventTarget.dispatchEvent(i)}on(e,t){const i=e=>{e instanceof CustomEvent&&t(e.detail)},n=String(e);return this.eventTarget.addEventListener(n,i),()=>this.eventTarget.removeEventListener(n,i)}once(e,t){const i=this.on(e,((...e)=>{i(),t(...e)}));return i}},n=class extends i{constructor(e){super(),this.subscriptions=[],this.wavesurfer=e.wavesurfer,this.renderer=e.renderer}destroy(){this.subscriptions.forEach((e=>e()))}},s=class extends n{constructor(e){super(e),this.dragStart=NaN,this.regions=[],this.createdRegion=null,this.modifiedRegion=null,this.isResizingLeft=!1,this.isMoving=!1,this.handleMouseDown=e=>{this.dragStart=e.clientX-this.container.getBoundingClientRect().left},this.handleMouseMove=e=>{const t=e.clientX-this.container.getBoundingClientRect().left;if(this.modifiedRegion&&this.isMoving)return this.moveRegion(this.modifiedRegion,t-this.dragStart),void(this.dragStart=t);if(this.modifiedRegion)this.updateRegion(this.modifiedRegion,this.isResizingLeft?t:void 0,this.isResizingLeft?void 0:t);else if(!isNaN(this.dragStart)){const t=e.clientX-this.container.getBoundingClientRect().left;t-this.dragStart>=10&&(this.createdRegion?this.updateRegion(this.createdRegion,this.dragStart,t):(this.renderer.getContainer().style.pointerEvents="none",this.createdRegion=this.createRegion(this.dragStart,t)))}},this.handleMouseUp=()=>{this.createdRegion&&(this.addRegion(this.createdRegion),this.createdRegion=null),this.modifiedRegion=null,this.isMoving=!1,this.dragStart=NaN,this.renderer.getContainer().style.pointerEvents=""},this.container=this.initContainer();const t=this.wavesurfer.on("ready",(()=>{this.renderer.getContainer().appendChild(this.container),t()}));this.subscriptions.push(t),this.renderer.getContainer().addEventListener("mousedown",this.handleMouseDown),document.addEventListener("mousemove",this.handleMouseMove),document.addEventListener("mouseup",this.handleMouseUp)}destroy(){var e;this.renderer.getContainer().removeEventListener("mousedown",this.handleMouseDown),document.removeEventListener("mousemove",this.handleMouseMove),document.removeEventListener("mouseup",this.handleMouseUp,!0),null===(e=this.container)||void 0===e||e.remove(),super.destroy()}initContainer(){const e=document.createElement("div");return e.style.position="absolute",e.style.top="0",e.style.left="0",e.style.width="100%",e.style.height="100%",e.style.zIndex="3",e.style.pointerEvents="none",e}createRegionElement(e,t,i=""){const n=document.createElement("div");n.style.position="absolute",n.style.left=`${e}px`,n.style.width=t-e+"px",n.style.height="100%",n.style.backgroundColor="rgba(0, 0, 0, 0.1)",n.style.transition="background-color 0.2s ease",n.style.cursor="move",n.style.pointerEvents="all",n.title=i;const s=document.createElement("div");s.style.position="absolute",s.style.left="0",s.style.width="6px",s.style.height="100%",s.style.borderLeft="2px solid rgba(0, 0, 0, 0.5)",s.style.cursor="ew-resize",s.style.pointerEvents="all",n.appendChild(s);const o=document.createElement("div");return o.style.position="absolute",o.style.right="0",o.style.width="6px",o.style.height="100%",o.style.borderRight="2px solid rgba(0, 0, 0, 0.5)",o.style.cursor="ew-resize",o.style.pointerEvents="all",n.appendChild(o),s.addEventListener("mousedown",(e=>{e.stopPropagation(),this.modifiedRegion=this.regions.find((e=>e.element===n))||null,this.isResizingLeft=!0,this.isMoving=!1})),o.addEventListener("mousedown",(e=>{e.stopPropagation(),this.modifiedRegion=this.regions.find((e=>e.element===n))||null,this.isResizingLeft=!1,this.isMoving=!1})),n.addEventListener("mousedown",(()=>{this.modifiedRegion=this.regions.find((e=>e.element===n))||null,this.isMoving=!0})),n.addEventListener("click",(()=>{const e=this.regions.find((e=>e.element===n));e&&this.emit("region-clicked",{region:e})})),this.container.appendChild(n),n}createRegion(e,t,i=""){const n=this.wavesurfer.getDuration(),s=this.container.clientWidth;return{element:this.createRegionElement(e,t,i),start:e,end:t,startTime:e/s*n,endTime:t/s*n,title:i}}addRegion(e){this.regions.push(e),this.emit("region-created",{region:e})}updateRegion(e,t,i){null!=t&&(e.start=null!=t?t:e.start,e.element.style.left=`${e.start}px`,e.startTime=t/this.container.clientWidth*this.wavesurfer.getDuration()),null!=i&&(e.end=i,e.element.style.width=e.end-e.start+"px",e.endTime=i/this.container.clientWidth*this.wavesurfer.getDuration()),this.emit("region-updated",{region:e})}moveRegion(e,t){this.updateRegion(e,e.start+t,e.end+t)}addRegionAtTime(e,t,i=""){const n=this.wavesurfer.getDuration(),s=this.container.clientWidth,o=e/n*s,r=t/n*s,d=this.createRegion(o,r,i);return this.addRegion(d),d}setRegionColor(e,t){e.element.style.backgroundColor=t}};return t.default})()));

package/dist/wavesurfer.min.js

@@ -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.WaveSurfer=e():t.WaveSurfer=e()}(this,(()=>(()=>{"use strict";var t={d:(e,i)=>{for(var n in i)t.o(i,n)&&!t.o(e,n)&&Object.defineProperty(e,n,{enumerable:!0,get:i[n]})},o:(t,e)=>Object.prototype.hasOwnProperty.call(t,e)},e={};t.d(e,{default:()=>c});const i=class{constructor(){this.eventTarget=new EventTarget}emit(t,e){const i=new CustomEvent(String(t),{detail:e});this.eventTarget.dispatchEvent(i)}on(t,e){const i=t=>{t instanceof CustomEvent&&e(t.detail)},n=String(t);return this.eventTarget.addEventListener(n,i),()=>this.eventTarget.removeEventListener(n,i)}once(t,e){const i=this.on(t,((...t)=>{i(),e(...t)}));return i}},n=class extends i{constructor(t){super(),this.options=t;let e=null;if("string"==typeof this.options.container?e=document.querySelector(this.options.container):this.options.container instanceof HTMLElement&&(e=this.options.container),!e)throw new Error("Container not found");const i=document.createElement("div"),n=i.attachShadow({mode:"open"});n.innerHTML=`\n      <style>\n        :host .scroll {\n          overflow-x: auto;\n          overflow-y: visible;\n          user-select: none;\n          width: 100%;\n          height: ${this.options.height}px;\n          position: relative;\n        }\n        :host .wrapper {\n          position: relative;\n          width: fit-content;\n          min-width: 100%;\n          height: 100%;\n          z-index: 2;\n        }\n        :host canvas {\n          display: block;\n          height: 100%;\n          min-width: 100%;\n          image-rendering: pixelated;\n        }\n        :host .progress {\n          position: absolute;\n          z-index: 2;\n          top: 0;\n          left: 0;\n          height: 100%;\n          pointer-events: none;\n          clip-path: inset(100%);\n        }\n        :host .cursor {\n          position: absolute;\n          z-index: 3;\n          top: 0;\n          left: 0;\n          height: 100%;\n          border-right: 1px solid ${this.options.progressColor};\n        }\n      </style>\n\n      <div class="scroll">\n        <div class="wrapper">\n          <canvas></canvas>\n          <canvas class="progress"></canvas>\n          <div class="cursor"></div>\n        </div>\n      </div>\n    `,this.container=i,this.scrollContainer=n.querySelector(".scroll"),this.mainCanvas=n.querySelector("canvas"),this.ctx=this.mainCanvas.getContext("2d",{desynchronized:!0}),this.progressCanvas=n.querySelector(".progress"),this.cursor=n.querySelector(".cursor"),e.appendChild(i),this.mainCanvas.addEventListener("click",(t=>{const e=this.mainCanvas.getBoundingClientRect(),i=(t.clientX-e.left)/e.width;this.emit("click",{relativeX:i})}))}destroy(){this.container.remove()}renderLinePeaks(t,e,i){const{ctx:n}=this;n.clearRect(0,0,e,i),n.beginPath(),n.moveTo(0,i/2);const s=t[0],o=1===t.length,r=o?s:t[1];let a=-1,h=0;for(let t=0,o=s.length;t<o;t++){const o=Math.round(t/s.length*e),r=Math.round((1-s[t])*i/2);(o!==a||r>h)&&(n.lineTo(o,r),a=o,h=r)}a=-1,h=0;for(let t=r.length-1;t>=0;t--){const s=Math.round(t/r.length*e),l=Math.round((1+r[t])*i/2);(s!==a||(o?l<-h:l>h))&&(n.lineTo(s,l),a=s,h=l)}n.strokeStyle=n.fillStyle=this.options.waveColor,n.stroke(),n.fill()}renderBarPeaks(t,e,i){var n,s;const{devicePixelRatio:o}=window,{ctx:r}=this;r.clearRect(0,0,e,i);const a=this.options.barWidth||1,h=a*o,l=(null!==(n=this.options.barGap)&&void 0!==n?n:a/2)*o,c=null!==(s=this.options.barRadius)&&void 0!==s?s:0,d=t[0],u=1===t.length,p=u?d:t[1],v=Math.floor(e/(h+l)),m=new Float32Array(v),g=new Float32Array(v),y=v/d.length,f=d.length;for(let t=0;t<f;t++){const e=Math.round(t*y);m[e]=Math.max(m[e],d[t]),g[e]=(u?Math.min:Math.max)(g[e],p[t])}r.beginPath();for(let t=0;t<v;t++){const e=Math.max(1,Math.round(m[t]*i/2)),n=Math.max(1,Math.round(Math.abs(g[t]*i)/2));r.roundRect(t*(h+l),i/2-e,h,e+n,c)}r.fillStyle=this.options.waveColor,r.fill()}createProgressMask(){const t=this.progressCanvas.getContext("2d",{desynchronized:!0});if(!t)throw new Error("Failed to get canvas context");this.progressCanvas.width=this.mainCanvas.width,this.progressCanvas.height=this.mainCanvas.height,this.progressCanvas.style.width=this.mainCanvas.style.width,this.progressCanvas.style.height=this.mainCanvas.style.height,t.drawImage(this.mainCanvas,0,0),t.globalCompositeOperation="source-in",t.fillStyle=this.options.progressColor,t.fillRect(0,0,this.progressCanvas.width,this.progressCanvas.height)}render(t,e){const{devicePixelRatio:i}=window,n=Math.max(this.container.clientWidth*i,e*this.options.minPxPerSec),{height:s}=this.options;this.mainCanvas.width=n,this.mainCanvas.height=s,this.mainCanvas.style.width=Math.round(n/i)+"px",(this.options.barWidth?this.renderBarPeaks:this.renderLinePeaks).call(this,t,n,s),this.createProgressMask()}zoom(t,e,i){const n=this.cursor.getBoundingClientRect().left;this.options.minPxPerSec=i,this.render(t,e);const s=this.cursor.getBoundingClientRect().left;this.scrollContainer.scrollLeft+=s-n}renderProgress(t,e=!1){if(this.progressCanvas.style.clipPath=`inset(0 ${100-100*t}% 0 0)`,this.cursor.style.left=100*t+"%",e){const e=this.container.clientWidth/2,i=this.mainCanvas.clientWidth;i*t>=e&&(this.scrollContainer.scrollLeft=i*t-e)}}getContainer(){return this.scrollContainer}},s=class{constructor({media:t}){this.isExternalMedia=!1,t?(this.media=t,this.isExternalMedia=!0):this.media=document.createElement("audio")}on(t,e){return this.media.addEventListener(t,e),()=>this.media.removeEventListener(t,e)}destroy(){this.isExternalMedia||this.media.remove()}loadUrl(t){this.media.src=t}getCurrentTime(){return this.media.currentTime}play(){this.media.play()}pause(){this.media.pause()}isPlaying(){return this.media.currentTime>0&&!this.media.paused&&!this.media.ended}seekTo(t){this.media.currentTime=t}},o=class extends s{constructor(){super(...arguments),this.audioCtx=null,this.sourceNode=null}destroy(){var t,e;null===(t=this.sourceNode)||void 0===t||t.disconnect(),this.sourceNode=null,null===(e=this.audioCtx)||void 0===e||e.close(),this.audioCtx=null,super.destroy()}loadUrl(t){super.loadUrl(t),this.audioCtx||(this.audioCtx=new AudioContext({latencyHint:"playback"})),this.sourceNode&&this.sourceNode.disconnect(),this.sourceNode=this.audioCtx.createMediaElementSource(this.media),this.sourceNode.connect(this.audioCtx.destination)}},r=class extends i{constructor(){super(),this.unsubscribe=()=>{},this.unsubscribe=this.on("tick",(()=>{requestAnimationFrame((()=>{this.emit("tick")}))})),this.emit("tick")}destroy(){this.unsubscribe()}};var a;!function(t){t.WebAudio="WebAudio",t.MediaElement="MediaElement"}(a||(a={}));const h={height:128,waveColor:"#999",progressColor:"#555",minPxPerSec:0,backend:"MediaElement"};class l extends i{static create(t){return new l(t)}constructor(t){var e;super(),this.plugins=[],this.subscriptions=[],this.channelData=null,this.duration=0,this.options=Object.assign({},h,t),this.fetcher=new class{load(t){return e=this,i=void 0,s=function*(){return fetch(t).then((t=>t.arrayBuffer()))},new((n=void 0)||(n=Promise))((function(t,o){function r(t){try{h(s.next(t))}catch(t){o(t)}}function a(t){try{h(s.throw(t))}catch(t){o(t)}}function h(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(t){t(i)}))).then(r,a)}h((s=s.apply(e,i||[])).next())}));var e,i,n,s}},this.decoder=new class{constructor(){this.audioCtx=null,this.audioCtx=new AudioContext({latencyHint:"playback",sampleRate:3e3})}decode(t){return e=this,i=void 0,s=function*(){if(!this.audioCtx)throw new Error("AudioContext is not initialized");const e=yield this.audioCtx.decodeAudioData(t),i=[e.getChannelData(0)];return e.numberOfChannels>1&&i.push(e.getChannelData(1)),{duration:e.duration,channelData:i}},new((n=void 0)||(n=Promise))((function(t,o){function r(t){try{h(s.next(t))}catch(t){o(t)}}function a(t){try{h(s.throw(t))}catch(t){o(t)}}function h(e){var i;e.done?t(e.value):(i=e.value,i instanceof n?i:new n((function(t){t(i)}))).then(r,a)}h((s=s.apply(e,i||[])).next())}));var e,i,n,s}destroy(){var t;null===(t=this.audioCtx)||void 0===t||t.close(),this.audioCtx=null}},this.timer=new r,this.player=new(this.options.backend===a.WebAudio?o:s)({media:this.options.media}),this.renderer=new n({container:this.options.container,height:this.options.height,waveColor:this.options.waveColor,progressColor:this.options.progressColor,minPxPerSec:this.options.minPxPerSec,barWidth:this.options.barWidth,barGap:this.options.barGap,barRadius:this.options.barRadius}),this.initPlayerEvents(),this.initRendererEvents(),this.initTimerEvents();const i=this.options.url||(null===(e=this.options.media)||void 0===e?void 0:e.src);i&&this.load(i,this.options.channelData,this.options.duration)}initPlayerEvents(){this.subscriptions.push(this.player.on("timeupdate",(()=>{const t=this.getCurrentTime();this.renderer.renderProgress(t/this.duration,this.isPlaying()),this.emit("audioprocess",{currentTime:t})})),this.player.on("play",(()=>{this.emit("play")})),this.player.on("pause",(()=>{this.emit("pause")})),this.player.on("canplay",(()=>{this.emit("canplay")})),this.player.on("seeking",(()=>{this.emit("seek",{time:this.getCurrentTime()})})))}initRendererEvents(){this.subscriptions.push(this.renderer.on("click",(({relativeX:t})=>{const e=this.getDuration()*t;this.seekTo(e)})))}initTimerEvents(){this.subscriptions.push(this.timer.on("tick",(()=>{if(this.isPlaying()){const t=this.getCurrentTime();this.renderer.renderProgress(t/this.duration,!0),this.emit("audioprocess",{currentTime:t})}})))}destroy(){this.subscriptions.forEach((t=>t())),this.plugins.forEach((t=>t.destroy())),this.timer.destroy(),this.player.destroy(),this.decoder.destroy(),this.renderer.destroy()}load(t,e,i){return n=this,s=void 0,r=function*(){if(this.player.loadUrl(t),null==e||null==i){const n=yield this.fetcher.load(t),s=yield this.decoder.decode(n);e=s.channelData,i=s.duration}this.channelData=e,this.duration=i,this.renderer.render(this.channelData,this.duration),this.emit("ready",{duration:this.duration})},new((o=void 0)||(o=Promise))((function(t,e){function i(t){try{h(r.next(t))}catch(t){e(t)}}function a(t){try{h(r.throw(t))}catch(t){e(t)}}function h(e){var n;e.done?t(e.value):(n=e.value,n instanceof o?n:new o((function(t){t(n)}))).then(i,a)}h((r=r.apply(n,s||[])).next())}));var n,s,o,r}zoom(t){if(null==this.channelData||null==this.duration)throw new Error("No audio loaded");this.renderer.zoom(this.channelData,this.duration,t)}play(){this.player.play()}pause(){this.player.pause()}seekTo(t){this.player.seekTo(t)}isPlaying(){return this.player.isPlaying()}getDuration(){return this.duration}getCurrentTime(){return this.player.getCurrentTime()}registerPlugin(t){const e=new t({wavesurfer:this,renderer:this.renderer});return this.plugins.push(e),e}}const c=l;return e.default})()));

package/package.json

@@ -1,15 +1,19 @@
 {
   "name": "wavesurfer.js",
-  "version": "7.0.0-alpha.1",
-  "description": "",
+  "version": "7.0.0-alpha.3",
+  "description": "wavesurfer.js is an audio library that draws waveforms and plays audio in the browser.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
+  "files": ["dist/"],
   "scripts": {
-    "build": "tsc",
+    "build:dev": "tsc -w",
+    "build:umd": "webpack && webpack --config webpack.config.plugins.js",
+    "prepublishOnly": "npm run build:umd",
     "test": "echo \"Error: no test specified\" && exit 1",
     "lint": "eslint --ext .ts src --fix",
     "prettier": "prettier -w src",
-    "docs": "npx typedoc src/index.ts"
+    "docs": "npx typedoc src/index.ts",
+    "serve": "python3 -m http.server --cgi 8080"
   },
   "author": "katspaugh <katspaugh@gmail.com>",
   "license": "ISC",
@@ -20,7 +24,11 @@
     "eslint-config-prettier": "^8.7.0",
     "eslint-plugin-prettier": "^4.2.1",
     "prettier": "^2.8.4",
+    "ts-loader": "^9.4.2",
     "typedoc": "^0.23.26",
-    "typescript": "^4.9.5"
-  }
+    "typescript": "^4.9.5",
+    "webpack": "^5.76.1",
+    "webpack-cli": "^5.0.1"
+  },
+  "dependencies": {}
 }

package/.eslintrc.json

@@ -1,24 +0,0 @@
-{
-  "env": {
-    "browser": true,
-    "es2021": true
-  },
-  "extends": [
-    "eslint:recommended",
-    "plugin:@typescript-eslint/recommended",
-    "prettier",
-    "plugin:prettier/recommended"
-  ],
-  "overrides": [
-  ],
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "ecmaVersion": "latest",
-    "sourceType": "module"
-  },
-  "plugins": [
-    "@typescript-eslint"
-  ],
-  "rules": {
-  }
-}

package/.prettierrc

@@ -1,8 +0,0 @@
-{
-  "tabWidth": 2,
-  "printWidth": 120,
-  "trailingComma": "all",
-  "singleQuote": true,
-  "semi": false,
-  "endOfLine": "auto"
-}

package/examples/bars.js

@@ -1,19 +0,0 @@
-import WaveSurfer from '/dist/index.js'
-
-const wavesurfer = WaveSurfer.create({
-  container: document.body,
-  waveColor: 'rgb(200, 0, 200)',
-  progressColor: 'rgb(100, 0, 100)',
-  url: 'https://wavesurfer-js.org/example/media/demo.wav',
-
-  // Set a bar width
-  barWidth: 2,
-  // Optionally, specify the spacing between bars
-  barGap: 1,
-  // And the bar radius
-  barRadius: 2,
-})
-
-wavesurfer.on('seek', function () {
-  wavesurfer.play()
-})

package/examples/basic.js

@@ -1,8 +0,0 @@
-import WaveSurfer from '/dist/index.js'
-
-const wavesurfer = WaveSurfer.create({
-  container: document.body,
-  waveColor: 'rgb(200, 0, 200)',
-  progressColor: 'rgb(100, 0, 100)',
-  url: 'https://wavesurfer-js.org/example/media/demo.wav'
-})

package/examples/gradient.js

@@ -1,28 +0,0 @@
-import WaveSurfer from '/dist/index.js'
-
-// Create a canvas gradient
-const ctx = document.createElement('canvas').getContext('2d')
-const gradient = ctx.createLinearGradient(0, 0, 0, 150)
-gradient.addColorStop(0, 'rgb(200, 0, 200)')
-gradient.addColorStop(0.7, 'rgb(100, 0, 100)')
-gradient.addColorStop(1, 'rgb(0, 0, 0)')
-
-// Default style with a gradient
-WaveSurfer.create({
-  container: document.body,
-  waveColor: gradient,
-  height: 200,
-  progressColor: 'rgba(0, 0, 100, 0.5)',
-  url: 'https://wavesurfer-js.org/example/media/demo.wav'
-})
-
-
-// SoundCloud-style bars
-WaveSurfer.create({
-  container: document.body,
-  waveColor: gradient,
-  height: 200,
-  barWidth: 2,
-  progressColor: 'rgba(0, 0, 100, 0.5)',
-  url: 'https://wavesurfer-js.org/example/media/demo.wav'
-})

package/examples/regions.js

@@ -1,63 +0,0 @@
-import WaveSurfer from '/dist/index.js'
-import RegionsPlugin from '/dist/plugins/regions.js'
-
-// Create an instance of WaveSurfer
-const ws = WaveSurfer.create({
-  container: document.body,
-  waveColor: 'rgb(200, 0, 200)',
-  progressColor: 'rgb(100, 0, 100)',
-  url: 'https://wavesurfer-js.org/example/media/demo.wav'
-})
-
-// Initialize the Regions plugin
-const wsRegions = ws.registerPlugin(RegionsPlugin)
-
-// Give regions a random color when they are created
-const random = (min, max) => Math.random() * (max - min) + min
-wsRegions.on('region-created', ({ region }) => {
-  wsRegions.setRegionColor(region, `rgba(${random(0, 255)}, ${random(0, 255)}, ${random(0, 255)}, 0.5)`)
-})
-
-// Create some regions at specific time ranges
-ws.on('ready', () => {
-  wsRegions.addRegionAtTime(4, 7, 'First region')
-  wsRegions.addRegionAtTime(9, 10, 'Middle region')
-  wsRegions.addRegionAtTime(12, 17, 'Last region')
-})
-
-// Loop a region on click
-let loop = true
-let activeRegion = null
-
-wsRegions.on('region-clicked', ({ region }) => {
-  ws.seekTo(region.startTime)
-  ws.play()
-  activeRegion = region
-})
-
-// Track the time
-ws.on('audioprocess', ({ currentTime }) => {
-  // When the end of the region is reached
-  if (activeRegion && ws.isPlaying() && (currentTime >= activeRegion.endTime)) {
-    if (loop) {
-      // If looping, jump to the start of the region
-      ws.seekTo(activeRegion.startTime)
-    } else {
-      // Otherwise, stop playing
-      ws.pause()
-      ws.seekTo(activeRegion.endTime)
-      activeRegion = null
-    }
-  }
-})
-
-// Toggle looping with a checkbox
-const p = document.createElement('p')
-p.innerHTML = `
-  <label>
-    <input type="checkbox" checked="${loop}" style="vertical-align: text-top" />
-    Loop regions on click
-  </label>
-`
-document.body.appendChild(p)
-document.querySelector('input').onclick = (e) => { loop = e.target.checked }

package/examples/video.js

@@ -1,19 +0,0 @@
-import WaveSurfer from '/dist/index.js'
-
-// Create a video element and add it to the DOM.
-// The video can also be defined in HTML, in which case we just get it by a selector.
-const video = document.createElement('video')
-video.crossOrigin = 'anonymous'
-video.controls = true
-video.style.width = '100%'
-video.src = 'https://wavesurfer-js.org/example/media/nasa.mp4'
-document.body.appendChild(video)
-
-// Initialize wavesurfer.js
-const ws = WaveSurfer.create({
-  container: document.body,
-  waveColor: 'rgb(200, 0, 200)',
-  progressColor: 'rgb(100, 0, 100)',
-  // Pass the video element in the `media` param
-  media: document.querySelector('video'),
-})

package/examples/webaudio.js

@@ -1,14 +0,0 @@
-import WaveSurfer from '/dist/index.js'
-
-const audio = new Audio()
-audio.controls = true
-audio.src = '/examples/audio.ogg'
-document.body.appendChild(audio)
-
-const wavesurfer = WaveSurfer.create({
-  container: document.body,
-  waveColor: 'rgb(200, 0, 200)',
-  progressColor: 'rgb(100, 0, 100)',
-  backend: 'WebAudio',
-  media: audio,
-})

package/src/base-plugin.ts

@@ -1,20 +0,0 @@
-import EventEmitter, { type GeneralEventTypes } from './event-emitter.js'
-import type { WaveSurfer, WaveSurferPluginParams } from './index.js'
-
-export class BasePlugin<EventTypes extends GeneralEventTypes> extends EventEmitter<EventTypes> {
-  protected wavesurfer: WaveSurfer
-  protected renderer: WaveSurfer['renderer']
-  protected subscriptions: (() => void)[] = []
-
-  constructor(params: WaveSurferPluginParams) {
-    super()
-    this.wavesurfer = params.wavesurfer
-    this.renderer = params.renderer
-  }
-
-  destroy() {
-    this.subscriptions.forEach((unsubscribe) => unsubscribe())
-  }
-}
-
-export default BasePlugin

package/src/decoder.ts

@@ -1,41 +0,0 @@
-// Web Audio decodeAudioData with a minimum allowed sample rate
-const SAMPLE_RATE = 3000
-
-class Decoder {
-  audioCtx: AudioContext | null = null
-
-  constructor() {
-    this.audioCtx = new (window.AudioContext ||
-      (window as unknown as { webkitAudioContext: AudioContext }).webkitAudioContext)({
-      latencyHint: 'playback',
-      sampleRate: SAMPLE_RATE,
-    })
-  }
-
-  public async decode(audioData: ArrayBuffer): Promise<{
-    duration: number
-    channelData: Float32Array[]
-  }> {
-    if (!this.audioCtx) {
-      throw new Error('AudioContext is not initialized')
-    }
-
-    const buffer = await this.audioCtx.decodeAudioData(audioData)
-    const channelData = [buffer.getChannelData(0)]
-    if (buffer.numberOfChannels > 1) {
-      channelData.push(buffer.getChannelData(1))
-    }
-
-    return {
-      duration: buffer.duration,
-      channelData,
-    }
-  }
-
-  destroy() {
-    this.audioCtx?.close()
-    this.audioCtx = null
-  }
-}
-
-export default Decoder

package/src/event-emitter.ts

@@ -1,35 +0,0 @@
-export interface GeneralEventTypes {
-  // the name of the event and the data it dispatches with
-  // e.g. 'entryCreated': { count: 1 }
-  [eventType: string]: unknown
-}
-
-class EventEmitter<EventTypes extends GeneralEventTypes> {
-  private eventTarget: EventTarget
-
-  constructor() {
-    this.eventTarget = new EventTarget()
-  }
-
-  protected emit<T extends keyof EventTypes>(eventType: T, detail?: EventTypes[T]): void {
-    const e = new CustomEvent(String(eventType), { detail })
-    this.eventTarget.dispatchEvent(e)
-  }
-
-  /** Subscribe to an event and return a function to unsubscribe */
-  on<T extends keyof EventTypes>(eventType: T, callback: (detail: EventTypes[T]) => void): () => void {
-    const handler = (e: Event) => {
-      if (e instanceof CustomEvent) {
-        callback(e.detail)
-      }
-    }
-
-    const eventName = String(eventType)
-
-    this.eventTarget.addEventListener(eventName, handler)
-
-    return () => this.eventTarget.removeEventListener(eventName, handler)
-  }
-}
-
-export default EventEmitter

package/src/fetcher.ts

@@ -1,7 +0,0 @@
-class Fetcher {
-  public async load(url: string): Promise<ArrayBuffer> {
-    return fetch(url).then((response) => response.arrayBuffer())
-  }
-}
-
-export default Fetcher