wavesurfer.js 7.0.0-beta.5 → 7.0.0-beta.6

package/dist/src/wavesurfer.js

@@ -0,0 +1,229 @@
+import Decoder from './decoder.js';
+import Fetcher from './fetcher.js';
+import Player from './player.js';
+import Renderer from './renderer.js';
+import Timer from './timer.js';
+const defaultOptions = {
+    height: 128,
+    waveColor: '#999',
+    progressColor: '#555',
+    cursorWidth: 1,
+    minPxPerSec: 0,
+    fillParent: true,
+    interact: true,
+    autoScroll: true,
+    autoCenter: true,
+    sampleRate: 8000,
+};
+class WaveSurfer extends Player {
+    options;
+    renderer;
+    timer;
+    plugins = [];
+    decodedData = null;
+    subscriptions = [];
+    /** Create a new WaveSurfer instance */
+    static create(options) {
+        return new WaveSurfer(options);
+    }
+    /** Create a new WaveSurfer instance */
+    constructor(options) {
+        super({
+            media: options.media,
+            autoplay: options.autoplay,
+            playbackRate: options.audioRate,
+        });
+        this.options = Object.assign({}, defaultOptions, options);
+        this.timer = new Timer();
+        this.renderer = new Renderer(this.options);
+        this.initPlayerEvents();
+        this.initRendererEvents();
+        this.initTimerEvents();
+        this.initPlugins();
+        const url = this.options.url || this.options.media?.currentSrc || this.options.media?.src;
+        if (url) {
+            this.load(url, this.options.peaks, this.options.duration);
+        }
+    }
+    setOptions(options) {
+        this.options = { ...this.options, ...options };
+        this.renderer.setOptions(this.options);
+        if (options.audioRate) {
+            this.setPlaybackRate(options.audioRate);
+        }
+    }
+    initPlayerEvents() {
+        this.subscriptions.push(this.onMediaEvent('timeupdate', () => {
+            const currentTime = this.getCurrentTime();
+            this.renderer.renderProgress(currentTime / this.getDuration(), this.isPlaying());
+            this.emit('timeupdate', currentTime);
+        }), 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(
+        // Seek on click
+        this.renderer.on('click', (relativeX) => {
+            if (this.options.interact) {
+                this.seekTo(relativeX);
+                this.emit('interaction');
+                this.emit('click', relativeX);
+            }
+        }), 
+        // Scroll
+        this.renderer.on('scroll', (startX, endX) => {
+            const duration = this.getDuration();
+            this.emit('scroll', startX * duration, endX * duration);
+        }), 
+        // Redraw
+        this.renderer.on('render', () => {
+            this.emit('redraw');
+        }));
+        // Drag
+        {
+            let debounce;
+            this.subscriptions.push(this.renderer.on('drag', (relativeX) => {
+                if (!this.options.interact)
+                    return;
+                // Update the visual position
+                this.renderer.renderProgress(relativeX);
+                // Set the audio position with a debounce
+                clearTimeout(debounce);
+                debounce = setTimeout(() => {
+                    this.seekTo(relativeX);
+                }, this.isPlaying() ? 0 : 200);
+                this.emit('interaction');
+                this.emit('drag', relativeX);
+            }));
+        }
+    }
+    initTimerEvents() {
+        // The timer fires every 16ms for a smooth progress animation
+        this.subscriptions.push(this.timer.on('tick', () => {
+            const currentTime = this.getCurrentTime();
+            this.renderer.renderProgress(currentTime / this.getDuration(), true);
+            this.emit('timeupdate', currentTime);
+            this.emit('audioprocess', currentTime);
+        }));
+    }
+    initPlugins() {
+        if (!this.options.plugins?.length)
+            return;
+        this.options.plugins.forEach((plugin) => {
+            this.registerPlugin(plugin);
+        });
+    }
+    /** Register a wavesurfer.js plugin */
+    registerPlugin(plugin) {
+        plugin.init(this);
+        this.plugins.push(plugin);
+        return plugin;
+    }
+    /** For plugins only: get the waveform wrapper div */
+    getWrapper() {
+        return this.renderer.getWrapper();
+    }
+    /** Get the current scroll position in pixels */
+    getScroll() {
+        return this.renderer.getScroll();
+    }
+    /** Get all registered plugins */
+    getActivePlugins() {
+        return this.plugins;
+    }
+    /** Load an audio file by URL, with optional pre-decoded audio data */
+    async load(url, channelData, duration) {
+        this.decodedData = null;
+        this.emit('load', url);
+        if (channelData) {
+            // Set the mediaelement source to the URL
+            this.setSrc(url);
+            // Pre-decoded audio data
+            if (!duration) {
+                // Wait for the audio duration
+                duration =
+                    (await new Promise((resolve) => {
+                        this.onceMediaEvent('loadedmetadata', () => resolve(this.getMediaElement().duration));
+                    })) || 0;
+            }
+            this.decodedData = Decoder.createBuffer(channelData, duration);
+        }
+        else {
+            // Fetch and decode the audio of no pre-computed audio data is provided
+            const audio = await Fetcher.fetchArrayBuffer(url);
+            this.setSrc(url);
+            this.decodedData = await Decoder.decode(audio, this.options.sampleRate);
+        }
+        this.emit('decode', this.getDuration());
+        this.emit('ready', this.getDuration());
+        this.renderer.render(this.decodedData);
+    }
+    /** Zoom in or out */
+    zoom(minPxPerSec) {
+        if (!this.decodedData) {
+            throw new Error('No audio loaded');
+        }
+        this.renderer.zoom(minPxPerSec);
+        this.emit('zoom', minPxPerSec);
+    }
+    /** Get the decoded audio data */
+    getDecodedData() {
+        return this.decodedData;
+    }
+    /** Get the duration of the audio in seconds */
+    getDuration() {
+        const audioDuration = super.getDuration();
+        return audioDuration > 0 && audioDuration < Infinity ? audioDuration : this.decodedData?.duration || 0;
+    }
+    /** Toggle if the waveform should react to clicks */
+    toggleInteraction(isInteractive) {
+        this.options.interact = isInteractive;
+    }
+    /** Seeks to a percentage of audio as [0..1] (0 = beginning, 1 = end) */
+    seekTo(progress) {
+        const time = this.getDuration() * progress;
+        this.setTime(time);
+    }
+    /** Play or pause the audio */
+    playPause() {
+        if (this.isPlaying()) {
+            this.pause();
+            return Promise.resolve();
+        }
+        else {
+            return this.play();
+        }
+    }
+    /** Stop the audio and go to the beginning */
+    stop() {
+        this.pause();
+        this.setTime(0);
+    }
+    /** Skip N or -N seconds from the current positions */
+    skip(seconds) {
+        this.setTime(this.getCurrentTime() + seconds);
+    }
+    /** Empty the waveform by loading a tiny silent audio */
+    empty() {
+        this.load('', [[0]], 0.001);
+    }
+    /** Unmount wavesurfer */
+    destroy() {
+        this.emit('destroy');
+        this.subscriptions.forEach((unsubscribe) => unsubscribe());
+        this.plugins.forEach((plugin) => plugin.destroy());
+        this.timer.destroy();
+        this.renderer.destroy();
+        super.destroy();
+    }
+}
+export default WaveSurfer;

package/dist/wavesurfer.d.ts

@@ -29,7 +29,7 @@ export type WaveSurferOptions = {
     /** Audio URL */
     url?: string;
     /** Pre-computed audio data */
-    peaks?: Float32Array[] | Array<number[]>;
+    peaks?: Array<Float32Array | number[]>;
     /** Pre-computed duration */
     duration?: number;
     /** Use an existing media element instead of creating one */
@@ -50,8 +50,12 @@ export type WaveSurferOptions = {
     sampleRate?: number;
     /** Render each audio channel as a separate waveform */
     splitChannels?: WaveSurferOptions[];
+    /** Stretch the waveform to the full height */
+    normalize?: boolean;
     /** The list of plugins to initialize on start */
     plugins?: GenericPlugin[];
+    /** Custom render function */
+    renderFunction?: (peaks: Array<Float32Array | number[]>, ctx: CanvasRenderingContext2D) => void;
 };
 declare const defaultOptions: {
     height: number;

package/dist/wavesurfer.js

@@ -191,14 +191,8 @@ class WaveSurfer extends Player {
         this.setTime(time);
     }
     /** Play or pause the audio */
-    playPause() {
-        if (this.isPlaying()) {
-            this.pause();
-            return Promise.resolve();
-        }
-        else {
-            return this.play();
-        }
+    async playPause() {
+        return this.isPlaying() ? this.pause() : this.play();
     }
     /** Stop the audio and go to the beginning */
     stop() {

package/dist/wavesurfer.min.js

@@ -1 +1 @@
-!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.WaveSurfer=e():t.WaveSurfer=e()}(this,(()=>(()=>{"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:()=>d});const i={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}}},s=async function(t){return fetch(t).then((t=>t.arrayBuffer()))},r=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)))}},n=class extends r{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?URL.createObjectURL(new Blob([e],{type:"audio/wav"})):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 o extends r{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");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(){this.wrapper.addEventListener("mousedown",(t=>{const e=t.clientX,i=t=>{if(Math.abs(t.clientX-e)>=5){this.isDragging=!0;const e=this.wrapper.getBoundingClientRect();this.emit("drag",Math.max(0,Math.min(1,(t.clientX-e.left)/e.width)))}},s=()=>{document.removeEventListener("mousemove",i),document.removeEventListener("mouseup",s),this.isDragging=!1};document.addEventListener("mousemove",i),document.addEventListener("mouseup",s)}))}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.options.height}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"></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 1===t.length?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}renderSingleCanvas(t,e,i,s,r,n,o){const a=window.devicePixelRatio||1,h=e.height||0,l=null==e.barWidth||isNaN(e.barWidth)?1:e.barWidth*a,c=null==e.barGap||isNaN(e.barGap)?e.barWidth?l/2:0:e.barGap*a,d=e.barRadius||0,u=e.barHeight||1,p=1===t.length,m=t[0],g=p?m:t[1],f=p&&g.some((t=>t<0)),v=m.length,y=Math.floor(i/(l+c))/v,b=h/2;let C=0,w=0,S=0;const E=document.createElement("canvas");E.width=Math.round(i*(r-s)/v),E.height=h,E.style.width=`${Math.floor(E.width/a)}px`,E.style.height=`${e.height}px`,E.style.left=`${Math.floor(s*i/a/v)}px`,n.appendChild(E);const M=E.getContext("2d",{desynchronized:!0});M.beginPath(),M.fillStyle=this.convertColorValues(e.waveColor),M.roundRect||(M.roundRect=M.fillRect);for(let t=s;t<r;t++){const e=Math.round((t-s)*y);if(e>C){const t=Math.round(w*b*u),i=Math.round(S*b*u);M.roundRect(C*(l+c),b-t,l,t+(i||1),d),C=e,w=0,S=0}const i=f?m[t]:Math.abs(m[t]),r=f?g[t]:Math.abs(g[t]);i>w&&(w=i),(f?r<-S:r>S)&&(S=r<0?-r:r)}M.fill(),M.closePath();const D=E.cloneNode();o.appendChild(D);const R=D.getContext("2d",{desynchronized:!0});E.width>0&&E.height>0&&R.drawImage(E,0,0),R.globalCompositeOperation="source-in",R.fillStyle=this.convertColorValues(e.progressColor),R.fillRect(0,0,E.width,E.height)}renderWaveform(t,e,i){const s=document.createElement("div");s.style.height=`${e.height}px`,this.canvasWrapper.appendChild(s);const r=s.cloneNode();this.progressWrapper.appendChild(r);const{scrollLeft:n,scrollWidth:a,clientWidth:h}=this.scrollContainer,l=t[0].length,c=l/a,d=Math.min(o.MAX_CANVAS_WIDTH,h),u=Math.floor(Math.abs(n)*c),p=Math.ceil(u+d*c),m=p-u,g=(n,o)=>{this.renderSingleCanvas(t,e,i,Math.max(0,n),Math.min(o,l),s,r)},f=this.createDelay(),v=this.createDelay(),y=(t,e)=>{g(t,e),t>0&&f((()=>{y(t-m,e-m)}))},b=(t,e)=>{g(t,e),e<l&&v((()=>{b(t+m,e+m)}))};y(u,p),p<l&&b(p,p+m)}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))}}o.MAX_CANVAS_WIDTH=4e3;const a=o,h=class extends r{constructor(){super(...arguments),this.unsubscribe=()=>{}}start(){this.unsubscribe=this.on("tick",(()=>{requestAnimationFrame((()=>{this.emit("tick")}))})),this.emit("tick")}stop(){this.unsubscribe()}destroy(){this.unsubscribe()}},l={height:128,waveColor:"#999",progressColor:"#555",cursorWidth:1,minPxPerSec:0,fillParent:!0,interact:!0,autoScroll:!0,autoCenter:!0,sampleRate:8e3};class c extends n{static create(t){return new c(t)}constructor(t){super({media:t.media,autoplay:t.autoplay,playbackRate:t.audioRate}),this.plugins=[],this.decodedData=null,this.subscriptions=[],this.options=Object.assign({},l,t),this.timer=new h,this.renderer=new a(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={...this.options,...t},this.renderer.setOptions(this.options),t.audioRate&&this.setPlaybackRate(t.audioRate)}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.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"),this.emit("drag",e))})))}}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)})))}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,r){if(this.decodedData=null,this.emit("load",t),e)this.setSrc(t),r||(r=await new Promise((t=>{this.onceMediaEvent("loadedmetadata",(()=>t(this.getMediaElement().duration)))}))||0),this.decodedData=i.createBuffer(e,r);else{const e=await s(t);this.setSrc(t,e),this.decodedData=await i.decode(e,this.options.sampleRate)}this.emit("decode",this.getDuration()),this.emit("ready",this.getDuration()),this.renderer.render(this.decodedData)}zoom(t){if(!this.decodedData)throw new Error("No audio loaded");this.renderer.zoom(t),this.emit("zoom",t)}getDecodedData(){return this.decodedData}getDuration(){const t=super.getDuration();return t>0&&t<1/0?t:this.decodedData?.duration||0}toggleInteraction(t){this.options.interact=t}seekTo(t){const e=this.getDuration()*t;this.setTime(e)}playPause(){return this.isPlaying()?(this.pause(),Promise.resolve()):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 d=c;return e.default})()));
+!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.WaveSurfer=e():t.WaveSurfer=e()}(this,(()=>(()=>{"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:()=>d});const i={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}}},s=async function(t){return fetch(t).then((t=>t.arrayBuffer()))},n=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)))}},r=class extends n{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?URL.createObjectURL(new Blob([e],{type:"audio/wav"})):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 o extends n{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");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,n=(t+i)/e;this.emit("scroll",s,n)}));const t=this.createDelay(100);this.resizeObserver=new ResizeObserver((()=>{t((()=>this.reRender()))})),this.resizeObserver.observe(this.scrollContainer)}initDrag(){!function(t,e,i,s,n=5){let r=()=>{};if(!t)return r;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 r=s.clientX,o=s.clientY;if(l||Math.abs(r-a)>=n||Math.abs(o-h)>=n){l||(l=!0,i?.(a,h));const{left:s,top:n}=t.getBoundingClientRect();e(r-a,o-h,r-s,o-n),a=r,h=o}},d=t=>{l&&(t.preventDefault(),t.stopPropagation())};r=()=>{document.removeEventListener("pointermove",c),document.removeEventListener("pointerup",u),setTimeout((()=>{document.removeEventListener("click",d,!0)}),10)};const u=()=>{l&&s?.(),r()};document.addEventListener("pointermove",c),document.addEventListener("pointerup",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))}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.options.height}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"></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 1===t.length?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 n=e*s;i.addColorStop(n,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],n=t[1]||t[0],r=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)/r;let g=1;if(e.normalize){g=0;for(let t=0;t<r;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<=r;t++){const e=Math.round(t*m);if(e>f){const t=Math.round(y*v),s=Math.round(b*v);i.roundRect(f*(d+u),l-t,d,t+s||1,p),f=e,y=0,b=0}const r=Math.abs(s[t]||0),o=Math.abs(n[t]||0);r>y&&(y=r),o>b&&(b=o)}i.fill(),i.closePath()}renderSingleCanvas(t,e,i,s,n,r,o){const a=window.devicePixelRatio||1,h=e.height||0,l=document.createElement("canvas"),c=t[0].length;l.width=Math.round(i*(n-s)/c),l.height=h,l.style.width=`${Math.floor(l.width/a)}px`,l.style.height=`${e.height}px`,l.style.left=`${Math.floor(s*i/a/c)}px`,r.appendChild(l);const d=l.getContext("2d",{desynchronized:!0});this.renderBars(t.map((t=>t.slice(s,n))),e,d);const u=l.cloneNode();o.appendChild(u);const p=u.getContext("2d",{desynchronized:!0});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");s.style.height=`${e.height}px`,this.canvasWrapper.appendChild(s);const n=s.cloneNode();this.progressWrapper.appendChild(n);const{scrollLeft:r,scrollWidth:a,clientWidth:h}=this.scrollContainer,l=t[0].length,c=l/a,d=Math.min(o.MAX_CANVAS_WIDTH,h),u=Math.floor(Math.abs(r)*c),p=Math.ceil(u+d*c),m=p-u,g=(r,o)=>{this.renderSingleCanvas(t,e,i,Math.max(0,r),Math.min(o,l),s,n)},v=this.createDelay(),f=this.createDelay(),y=(t,e)=>{g(t,e),t>0&&v((()=>{y(t-m,e-m)}))},b=(t,e)=>{g(t,e),e<l&&f((()=>{b(t+m,e+m)}))};y(u,p),p<l&&b(p,p+m)}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 n=this.options.fillParent&&!this.isScrolling,r=(n?i:s)*e;if(this.wrapper.style.width=n?"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,r)}else{const e=[t.getChannelData(0)];t.numberOfChannels>1&&e.push(t.getChannelData(1)),this.renderWaveform(e,this.options,r)}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:n}=this.scrollContainer,r=n*t,o=i/2;if(r>s+(e&&this.options.autoCenter&&!this.isDragging?o:i)||r<s)if(this.options.autoCenter&&!this.isDragging){const t=o/20;r-(s+o)>=t&&r<s+i?this.scrollContainer.scrollLeft+=t:this.scrollContainer.scrollLeft=r-o}else if(this.isDragging){const t=10;this.scrollContainer.scrollLeft=r<s?r-t:r-i+t}else this.scrollContainer.scrollLeft=r;{const{scrollLeft:t}=this.scrollContainer,e=t/n,s=(t+i)/n;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))}}o.MAX_CANVAS_WIDTH=4e3;const a=o,h=class extends n{constructor(){super(...arguments),this.unsubscribe=()=>{}}start(){this.unsubscribe=this.on("tick",(()=>{requestAnimationFrame((()=>{this.emit("tick")}))})),this.emit("tick")}stop(){this.unsubscribe()}destroy(){this.unsubscribe()}},l={height:128,waveColor:"#999",progressColor:"#555",cursorWidth:1,minPxPerSec:0,fillParent:!0,interact:!0,autoScroll:!0,autoCenter:!0,sampleRate:8e3};class c extends r{static create(t){return new c(t)}constructor(t){super({media:t.media,autoplay:t.autoplay,playbackRate:t.audioRate}),this.plugins=[],this.decodedData=null,this.subscriptions=[],this.options=Object.assign({},l,t),this.timer=new h,this.renderer=new a(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={...this.options,...t},this.renderer.setOptions(this.options),t.audioRate&&this.setPlaybackRate(t.audioRate)}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.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"),this.emit("drag",e))})))}}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)})))}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,n){if(this.decodedData=null,this.emit("load",t),e)this.setSrc(t),n||(n=await new Promise((t=>{this.onceMediaEvent("loadedmetadata",(()=>t(this.getMediaElement().duration)))}))||0),this.decodedData=i.createBuffer(e,n);else{const e=await s(t);this.setSrc(t,e),this.decodedData=await i.decode(e,this.options.sampleRate)}this.emit("decode",this.getDuration()),this.emit("ready",this.getDuration()),this.renderer.render(this.decodedData)}zoom(t){if(!this.decodedData)throw new Error("No audio loaded");this.renderer.zoom(t),this.emit("zoom",t)}getDecodedData(){return this.decodedData}getDuration(){const t=super.getDuration();return t>0&&t<1/0?t:this.decodedData?.duration||0}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 d=c;return e.default})()));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wavesurfer.js",
-  "version": "7.0.0-beta.5",
+  "version": "7.0.0-beta.6",
   "license": "BSD-3-Clause",
   "author": "katspaugh",
   "description": "Navigable audio waveform player",
@@ -28,6 +28,9 @@
       "import": "./dist/wavesurfer.js",
       "require": "./dist/wavesurfer.min.js"
     },
+    "./dist/*": {
+      "import": "./dist/*"
+    },
     "./dist/plugins/*": {
       "import": "./dist/plugins/*.js",
       "require": "./dist/plugins/*.min.js"