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

package/README.md

@@ -1,50 +1,82 @@
-# wavesurfer.ts
+# <img src="https://user-images.githubusercontent.com/381895/226091100-f5567a28-7736-4d37-8f84-e08f297b7e1a.png" alt="logo" height="60" valign="middle" /> wavesurfer.ts
 
-An experimental rewrite of [wavesufer.js](https://github.com/wavesurfer-js/wavesurfer.js) to play around with new ideas.
+A rewrite of [wavesufer.js](https://github.com/wavesurfer-js/wavesurfer.js) in TypeScript with better performance.
 
-## Goals
+<img alt="screenshot" src="https://user-images.githubusercontent.com/381895/225539680-fc724acd-8657-458e-a558-ff1c6758ba30.png" width="800" />
 
- * TypeScript API
- * Better architecture
- * Minimize the available options and provide sensible defaults
- * Improve the decoding and rendering performance
+Try it out:
+```
+npm install --save wavesurfer.js@alpha
+```
+
+Import like this:
+
+```
+import WaveSurfer from 'wavesurfer.js'
+```
+
+TypeScript types are included in the package, so there's no need to install `@types/wavesurfer.js`.
+
+## Why upgrade to wavesurfer.ts?
+
+wavesurfer.js v7 (aka wavesurfer.ts) brings several improvements:
 
-## Non-goals
+ * Typed API for better development experience
+ * Enhanced decoding and rendering performance
+ * New and improved plugins
 
-Keeping backwards compatibility with earlier versions of wavesurfer.js.
+## Plugins
+The "official" plugins have been completely rewritten and enhanced:
 
-## Architecture
+ * [Regions](https://wavesurfer-ts.pages.dev/tutorial/#/examples/regions.js) – now also replaces the old Markers plugin
+ * [Timeline](https://wavesurfer-ts.pages.dev/tutorial/#/examples/timeline.js) – displays notches and time labels below the waveform
+ * [Minimap](https://wavesurfer-ts.pages.dev/tutorial/#/examples/minimap.js) – a small waveform that serves as a scrollbar for the main waveform
+ * [Envelope](https://wavesurfer-ts.pages.dev/tutorial/#/examples/envelope.js) – a graphical interface to add fade-in and -out effects and control volume
+ * [Record](https://wavesurfer-ts.pages.dev/tutorial/#/examples/record.js) – records audio from the microphone and renders a waveform
 
-Principles:
- * Modular and event-driven
- * Allow swapping the decoding, rendering and playback mechanisms
- * Extensible with plugins
+## Migrating from v6 and lower
 
-![diagram](https://user-images.githubusercontent.com/381895/222349436-38b550e5-24dc-4143-9cdb-efbe00540213.png)
+Most options, events, and methods are similar to those in previous versions.
+
+### Notable differences
+ * The `backend` option is removed – HTML5 audio (or video) is the only playback mechanism. However, you can still connect wavesurfer to Web Audio via `MediaElementSourceNode`. See this [example](https://wavesurfer-ts.pages.dev/tutorial/#/examples/webaudio.js).
+ * The Markers plugin is removed – use the Regions plugin with `startTime` equal to `endTime`
+ * Plugins now have different APIs
+
+### Removed methods
+ * `getFilters`, `setFilter` – as there's no Web Audio "backend"
+ * `cancelAjax` – ajax is replaced by `fetch`
+ * `loadBlob` – use `URL.createObjectURL()` to convert a blob to a URL and call `load(url)` instead
+ * `un`, `unAll` – the `on` method now returns an unsubscribe function. E.g., `const unsubscribe = wavesurfer.on('ready', () => ...)`
+ * `skipForward`, `skipBackward`, `setPlayEnd` – can be implemented using `setTime(time)`
+ * `exportPCM` is renamed to `getDecodedData` and doesn't take any params
+ * `toggleMute` is now called `setMute(true | false)`
+ * `setHeight`, `setWaveColor`, `setCursorColor`, etc. – use `setOptions` with the corresponding params instead. E.g., `wavesurfer.setOptions({ height: 300, waveColor: '#abc' })`
+
+See the complete [documentation of the new API](https://wavesurfer-ts.pages.dev/docs/classes/wavesurfer.WaveSurfer).
 
 ## Development
 
-Install dev dependencies:
+To get started with development, follow these steps:
+
+ 1. Install dev dependencies:
 
 ```
 yarn
 ```
 
-Start the TypeScript compiler in watch mode:
+ 2. Start the TypeScript compiler in watch mode and launch an HTTP server:
 
 ```
-yarn build:dev
+yarn start
 ```
 
-Run an HTTP server to view the examples:
+This command will open http://localhost:9090/tutorial in your browser with live reload, allowing you to see the changes as you develop.
 
-```
-python3 -m http.server --cgi 8080
-```
+## Feedback
 
-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.
+We appreciate your feedback and contributions! Join the conversation and share your thoughts here: https://github.com/wavesurfer-js/wavesurfer.js/discussions/2684
 
-## Feedback
+If you encounter any issues or have suggestions for improvements, please don't hesitate to open an issue or submit a pull request on the GitHub repository.
 
-See https://github.com/wavesurfer-js/wavesurfer.js/discussions/2684
+We hope you enjoy using wavesurfer.ts and look forward to hearing about your experiences with the library!

package/dist/base-plugin.d.ts

@@ -1,10 +1,14 @@
 import EventEmitter, { type GeneralEventTypes } from './event-emitter.js';
-import type { WaveSurfer, WaveSurferPluginParams } from './index.js';
-export declare class BasePlugin<EventTypes extends GeneralEventTypes> extends EventEmitter<EventTypes> {
-    protected wavesurfer: WaveSurfer;
-    protected renderer: WaveSurfer['renderer'];
+import WaveSurfer, { type WaveSurferPluginParams } from './wavesurfer.js';
+export type GenericPlugin = BasePlugin<GeneralEventTypes, unknown>;
+export declare class BasePlugin<EventTypes extends GeneralEventTypes, Options> extends EventEmitter<EventTypes> {
+    protected wavesurfer?: WaveSurfer;
+    protected container?: HTMLElement;
+    protected wrapper?: HTMLElement;
     protected subscriptions: (() => void)[];
-    constructor(params: WaveSurferPluginParams);
+    protected options: Options;
+    constructor(options: Options);
+    init(params: WaveSurferPluginParams): void;
     destroy(): void;
 }
 export default BasePlugin;

package/dist/base-plugin.js

@@ -1,10 +1,18 @@
 import EventEmitter from './event-emitter.js';
 export class BasePlugin extends EventEmitter {
-    constructor(params) {
+    wavesurfer;
+    container;
+    wrapper;
+    subscriptions = [];
+    options;
+    constructor(options) {
         super();
-        this.subscriptions = [];
+        this.options = options;
+    }
+    init(params) {
         this.wavesurfer = params.wavesurfer;
-        this.renderer = params.renderer;
+        this.container = params.container;
+        this.wrapper = params.wrapper;
     }
     destroy() {
         this.subscriptions.forEach((unsubscribe) => unsubscribe());

package/dist/decoder.d.ts

@@ -1,10 +1,8 @@
 declare class Decoder {
     audioCtx: AudioContext | null;
+    private initAudioContext;
     constructor();
-    decode(audioData: ArrayBuffer): Promise<{
-        duration: number;
-        channelData: Float32Array[];
-    }>;
+    decode(audioData: ArrayBuffer): Promise<AudioBuffer>;
     destroy(): void;
 }
 export default Decoder;

package/dist/decoder.js

@@ -1,41 +1,30 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
-// Web Audio decodeAudioData with a minimum allowed sample rate
-const SAMPLE_RATE = 3000;
 class Decoder {
-    constructor() {
-        this.audioCtx = null;
+    audioCtx = null;
+    initAudioContext(sampleRate) {
         this.audioCtx = new AudioContext({
             latencyHint: 'playback',
-            sampleRate: SAMPLE_RATE,
+            sampleRate,
         });
     }
-    decode(audioData) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this.audioCtx) {
-                throw new Error('AudioContext is not initialized');
-            }
-            const buffer = yield this.audioCtx.decodeAudioData(audioData);
-            const channelData = [buffer.getChannelData(0)];
-            if (buffer.numberOfChannels > 1) {
-                channelData.push(buffer.getChannelData(1));
-            }
-            return {
-                duration: buffer.duration,
-                channelData,
-            };
-        });
+    constructor() {
+        // Minimum sample rate supported by Web Audio API
+        const DEFAULT_SAMPLE_RATE = 3000; // Chrome, Safari
+        const FALLBACK_SAMPLE_RATE = 8000; // Firefox
+        try {
+            this.initAudioContext(DEFAULT_SAMPLE_RATE);
+        }
+        catch (e) {
+            this.initAudioContext(FALLBACK_SAMPLE_RATE);
+        }
+    }
+    async decode(audioData) {
+        if (!this.audioCtx) {
+            throw new Error('AudioContext is not initialized');
+        }
+        return this.audioCtx.decodeAudioData(audioData);
     }
     destroy() {
-        var _a;
-        (_a = this.audioCtx) === null || _a === void 0 ? void 0 : _a.close();
+        this.audioCtx?.close();
         this.audioCtx = null;
     }
 }

package/dist/event-emitter.d.ts

@@ -6,7 +6,7 @@ declare class EventEmitter<EventTypes extends GeneralEventTypes> {
     constructor();
     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;
+    on<T extends keyof EventTypes>(eventType: T, callback: (detail: EventTypes[T]) => void, once?: boolean): () => 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;
 }

package/dist/event-emitter.js

@@ -1,4 +1,5 @@
 class EventEmitter {
+    eventTarget;
     constructor() {
         this.eventTarget = new EventTarget();
     }
@@ -7,23 +8,19 @@ class EventEmitter {
         this.eventTarget.dispatchEvent(e);
     }
     /** Subscribe to an event and return a function to unsubscribe */
-    on(eventType, callback) {
+    on(eventType, callback, once) {
         const handler = (e) => {
             if (e instanceof CustomEvent) {
                 callback(e.detail);
             }
         };
         const eventName = String(eventType);
-        this.eventTarget.addEventListener(eventName, handler);
+        this.eventTarget.addEventListener(eventName, handler, { once });
         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;
+        return this.on(eventType, callback, true);
     }
 }
 export default EventEmitter;

package/dist/fetcher.js

@@ -1,17 +1,6 @@
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 class Fetcher {
-    load(url) {
-        return __awaiter(this, void 0, void 0, function* () {
-            return fetch(url).then((response) => response.arrayBuffer());
-        });
+    async load(url) {
+        return fetch(url).then((response) => response.arrayBuffer());
     }
 }
 export default Fetcher;

package/dist/legacy-adapter.d.ts

@@ -0,0 +1,7 @@
+import type WaveSurfer from "./wavesurfer";
+type LegacyWavesurferMethodsType = Partial<WaveSurfer> & {
+    skip(offset: number): void;
+    stop(): void;
+};
+declare const LegacyWavesurferMethods: LegacyWavesurferMethodsType;
+export default LegacyWavesurferMethods;

package/dist/legacy-adapter.js

@@ -0,0 +1,15 @@
+const LegacyWavesurferMethods = {
+    /** Skip a number of seconds from the current position (use a negative value to go backwards) */
+    skip(seconds) {
+        console.warn('Deprecated, please use `wavesurfer.setTime(wavesurfer.getCurrentTime() + seconds)` instead');
+        const time = this.getCurrentTime() + seconds;
+        this.setTime(time);
+    },
+    /** Stop the audio and go to the beginning */
+    stop() {
+        console.warn('Deprecated, please use `wavesurfer.pause(); wavesurfer.setTime(0)` instead');
+        this.pause();
+        this.setTime(0);
+    }
+};
+export default LegacyWavesurferMethods;

package/dist/player.d.ts

@@ -1,16 +1,46 @@
-declare class Player {
+import EventEmitter, { type GeneralEventTypes } from './event-emitter.js';
+type PlayerOptions = {
+    media?: HTMLMediaElement;
+    autoplay?: boolean;
+    playbackRate?: number;
+};
+declare class Player<T extends GeneralEventTypes> extends EventEmitter<T> {
     protected media: HTMLMediaElement;
+    protected subscriptions: Array<() => void>;
     private isExternalMedia;
-    constructor({ media }: {
-        media?: HTMLMediaElement;
-    });
-    on(event: keyof HTMLMediaElementEventMap, callback: () => void): () => void;
+    private hasPlayedOnce;
+    constructor(options: PlayerOptions);
+    protected onMediaEvent(event: keyof HTMLMediaElementEventMap, callback: () => void, options?: AddEventListenerOptions): () => void;
+    protected onceMediaEvent(event: keyof HTMLMediaElementEventMap, callback: () => void): () => void;
+    protected loadUrl(src: string): void;
     destroy(): void;
-    loadUrl(src: string): void;
-    getCurrentTime(): number;
-    play(): void;
+    /** Start playing the audio */
+    play(): Promise<void>;
+    /** Pause the audio */
     pause(): void;
+    /** Check if the audio is playing */
     isPlaying(): boolean;
-    seekTo(time: number): void;
+    /** Jumpt to a specific time in the audio (in seconds) */
+    setTime(time: number): void;
+    /** Get the duration of the audio in seconds */
+    getDuration(): number;
+    /** Get the current audio position in seconds */
+    getCurrentTime(): number;
+    /** Get the audio volume */
+    getVolume(): number;
+    /** Set the audio volume */
+    setVolume(volume: number): void;
+    /** Get the audio muted state */
+    getMuted(): boolean;
+    /** Mute or unmute the audio */
+    setMuted(muted: boolean): void;
+    /** Get the playback speed */
+    getPlaybackRate(): number;
+    /** Set the playback speed, pass an optional false to NOT preserve the pitch */
+    setPlaybackRate(rate: number, preservePitch?: boolean): void;
+    /** Get the HTML media element */
+    getMediaElement(): HTMLMediaElement;
+    /** Set a sink id to change the audio output device */
+    setSinkId(sinkId: string): Promise<void>;
 }
 export default Player;

package/dist/player.js

@@ -1,40 +1,115 @@
-class Player {
-    constructor({ media }) {
-        this.isExternalMedia = false;
-        if (media) {
-            this.media = media;
+import EventEmitter from './event-emitter.js';
+class Player extends EventEmitter {
+    media;
+    subscriptions = [];
+    isExternalMedia = false;
+    hasPlayedOnce = false;
+    constructor(options) {
+        super();
+        if (options.media) {
+            this.media = options.media;
             this.isExternalMedia = true;
         }
         else {
             this.media = document.createElement('audio');
         }
+        this.subscriptions.push(
+        // Track the first play() call
+        this.onceMediaEvent('play', () => {
+            this.hasPlayedOnce = true;
+        }));
+        // Autoplay
+        if (options.autoplay) {
+            this.media.autoplay = true;
+        }
+        // Speed
+        if (options.playbackRate != null) {
+            this.media.playbackRate = options.playbackRate;
+        }
     }
-    on(event, callback) {
-        this.media.addEventListener(event, callback);
+    onMediaEvent(event, callback, options) {
+        this.media.addEventListener(event, callback, options);
         return () => this.media.removeEventListener(event, callback);
     }
-    destroy() {
-        if (!this.isExternalMedia) {
-            this.media.remove();
-        }
+    onceMediaEvent(event, callback) {
+        return this.onMediaEvent(event, callback, { once: true });
     }
     loadUrl(src) {
         this.media.src = src;
     }
-    getCurrentTime() {
-        return this.media.currentTime;
+    destroy() {
+        this.media.pause();
+        this.subscriptions.forEach((unsubscribe) => unsubscribe());
+        if (!this.isExternalMedia) {
+            this.media.remove();
+        }
     }
+    /** Start playing the audio */
     play() {
-        this.media.play();
+        return this.media.play();
     }
+    /** Pause the audio */
     pause() {
         this.media.pause();
     }
+    /** Check if the audio is playing */
     isPlaying() {
         return this.media.currentTime > 0 && !this.media.paused && !this.media.ended;
     }
-    seekTo(time) {
+    /** Jumpt to a specific time in the audio (in seconds) */
+    setTime(time) {
+        if (!this.hasPlayedOnce) {
+            this.media.play()?.then?.(() => {
+                setTimeout(() => this.media.pause(), 10);
+            });
+        }
         this.media.currentTime = time;
     }
+    /** Get the duration of the audio in seconds */
+    getDuration() {
+        return this.media.duration;
+    }
+    /** Get the current audio position in seconds */
+    getCurrentTime() {
+        return this.media.currentTime;
+    }
+    /** Get the audio volume */
+    getVolume() {
+        return this.media.volume;
+    }
+    /** Set the audio volume */
+    setVolume(volume) {
+        this.media.volume = volume;
+    }
+    /** Get the audio muted state */
+    getMuted() {
+        return this.media.muted;
+    }
+    /** Mute or unmute the audio */
+    setMuted(muted) {
+        this.media.muted = muted;
+    }
+    /** Get the playback speed */
+    getPlaybackRate() {
+        return this.media.playbackRate;
+    }
+    /** Set the playback speed, pass an optional false to NOT preserve the pitch */
+    setPlaybackRate(rate, preservePitch) {
+        // preservePitch is true by default in most browsers
+        if (preservePitch != null) {
+            this.media.preservesPitch = preservePitch;
+        }
+        this.media.playbackRate = rate;
+    }
+    /** Get the HTML media element */
+    getMediaElement() {
+        return this.media;
+    }
+    /** Set a sink id to change the audio output device */
+    setSinkId(sinkId) {
+        // See https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/setSinkId
+        const media = this.media;
+        return media.setSinkId(sinkId);
+    }
 }
 export default Player;

package/dist/plugin/wavesurfer.envelope.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.Envelope=e():t.Envelope=e()}(WaveSurfer,(()=>(()=>{"use strict";var t={284:(t,e,i)=>{i.d(e,{Z:()=>o});var s=i(139);class n extends s.Z{wavesurfer;container;wrapper;subscriptions=[];options;constructor(t){super(),this.options=t}init(t){this.wavesurfer=t.wavesurfer,this.container=t.container,this.wrapper=t.wrapper}destroy(){this.subscriptions.forEach((t=>t()))}}const o=n},139:(t,e,i)=>{i.d(e,{Z:()=>s});const s=class{eventTarget;constructor(){this.eventTarget=new EventTarget}emit(t,e){const i=new CustomEvent(String(t),{detail:e});this.eventTarget.dispatchEvent(i)}on(t,e,i){const s=t=>{t instanceof CustomEvent&&e(t.detail)},n=String(t);return this.eventTarget.addEventListener(n,s,{once:i}),()=>this.eventTarget.removeEventListener(n,s)}once(t,e){return this.on(t,e,!0)}}}},e={};function i(s){var n=e[s];if(void 0!==n)return n.exports;var o=e[s]={exports:{}};return t[s](o,o.exports,i),o.exports}i.d=(t,e)=>{for(var s in e)i.o(e,s)&&!i.o(t,s)&&Object.defineProperty(t,s,{enumerable:!0,get:e[s]})},i.o=(t,e)=>Object.prototype.hasOwnProperty.call(t,e);var s={};return(()=>{i.d(s,{default:()=>o});var t=i(284);const e={startTime:0,endTime:0,fadeInEnd:0,fadeOutStart:0,lineWidth:4,lineColor:"rgba(0, 0, 255, 0.5)",dragPointSize:10,dragPointFill:"rgba(255, 255, 255, 0.8)",dragPointStroke:"rgba(255, 255, 255, 0.8)"};class n extends t.Z{options;svg=null;audioContext=null;gainNode=null;volume=1;isFadingIn=!1;isFadingOut=!1;constructor(t){super(t),this.options=Object.assign({},e,t),this.options.lineColor=this.options.lineColor||e.lineColor,this.options.dragPointFill=this.options.dragPointFill||e.dragPointFill,this.options.dragPointStroke=this.options.dragPointStroke||e.dragPointStroke,this.volume=this.options.volume??1}static create(t){return new n(t)}init(t){if(super.init(t),!this.wavesurfer)throw Error("WaveSurfer is not initialized");let e;this.subscriptions.push(this.wavesurfer.once("decode",(({duration:t})=>{this.options.startTime=this.options.startTime||0,this.options.endTime=this.options.endTime||t,this.options.fadeInEnd=this.options.fadeInEnd||this.options.startTime,this.options.fadeOutStart=this.options.fadeOutStart||this.options.endTime,this.initWebAudio(),this.initSvg(),this.initFadeEffects()}))),this.subscriptions.push(this.wavesurfer.on("zoom",(()=>{e&&clearTimeout(e),e=setTimeout((()=>{this.svg?.remove(),this.initSvg()}),100)})))}makeDraggable(t,e){t.addEventListener("mousedown",(t=>{let i=t.clientX,s=t.clientY;const n=this.wavesurfer?.options.interact||!0;let o;this.wavesurfer?.toggleInteractive(!1);const r=t=>{const n=t.clientX-i,o=t.clientY-s;i=t.clientX,s=t.clientY,e(n,o)},a=()=>{document.removeEventListener("mousemove",r),document.removeEventListener("mouseup",a),o&&clearTimeout(o),o=setTimeout((()=>{this.wavesurfer?.toggleInteractive(n)}),100)};document.addEventListener("mousemove",r),document.addEventListener("mouseup",a),t.preventDefault(),t.stopPropagation()}))}renderPolyline(){if(!this.svg||!this.wrapper||!this.wavesurfer)return;const t=this.svg.querySelector("polyline"),e=t.points,i=e.getItem(1).y,s=this.wrapper.clientWidth,n=this.wavesurfer.getDuration();e.getItem(0).x=this.options.startTime/n*s,e.getItem(3).x=this.options.endTime/n*s;const o=this.svg.querySelector("line");o.setAttribute("x1",e.getItem(1).x.toString()),o.setAttribute("x2",e.getItem(2).x.toString()),o.setAttribute("y1",i.toString()),o.setAttribute("y2",i.toString());const r=this.svg.querySelectorAll("circle");for(let e=0;e<r.length;e++){const s=r[e],n=t.points.getItem(e+1);s.setAttribute("cx",n.x.toString()),s.setAttribute("cy",i.toString())}}initSvg(){if(!this.wrapper||!this.wavesurfer)return;const t=this.wrapper.clientWidth,e=this.wrapper.clientHeight,i=this.wavesurfer.getDuration(),s=document.createElementNS("http://www.w3.org/2000/svg","svg");s.setAttribute("width","100%"),s.setAttribute("height","100%"),s.setAttribute("viewBox",`0 0 ${t} ${e}`),s.setAttribute("preserveAspectRatio","none"),s.setAttribute("style","position: absolute; left: 0; top: 0; z-index: 4; pointer-events: none;"),this.svg=s;const n=document.createElementNS("http://www.w3.org/2000/svg","polyline");n.setAttribute("points","0,0 0,0 0,0 0,0"),n.setAttribute("stroke",this.options.lineColor),n.setAttribute("stroke-width",this.options.lineWidth),n.setAttribute("fill","none"),n.setAttribute("style","pointer-events: none"),s.appendChild(n);const o=document.createElementNS("http://www.w3.org/2000/svg","line");o.setAttribute("stroke","none"),o.setAttribute("stroke-width",(3*this.options.lineWidth).toString()),o.setAttribute("style","cursor: ns-resize; pointer-events: all;"),s.appendChild(o);const r=n.points,a=this.options.dragPointSize/2,u=e-this.volume*e+a;r.getItem(0).x=this.options.startTime/i*t,r.getItem(0).y=e,r.getItem(1).x=this.options.fadeInEnd/i*t,r.getItem(1).y=u,r.getItem(2).x=this.options.fadeOutStart/i*t,r.getItem(2).y=u,r.getItem(3).x=this.options.endTime/i*t,r.getItem(3).y=e,[1,2].forEach((()=>{const t=document.createElementNS("http://www.w3.org/2000/svg","circle");t.setAttribute("r",(this.options.dragPointSize/2).toString()),t.setAttribute("fill",this.options.dragPointFill),t.setAttribute("stroke",this.options.dragPointStroke||this.options.dragPointFill),t.setAttribute("stroke-width","2"),t.setAttribute("style","cursor: ew-resize; pointer-events: all;"),s.appendChild(t)})),this.wrapper.appendChild(s),this.renderPolyline();const h=t=>{const i=r.getItem(1).y+t-a;if(i<-.5||i>e)return;r.getItem(1).y=i+a,r.getItem(2).y=i+a,this.renderPolyline();const s=Math.min(1,Math.max(0,(e-i)/e));this.onVolumeChange(s),this.renderPolyline()},d=(e,s,o)=>{const r=n.points.getItem(o),a=r.x+e,u=a/t*i;1===o&&u>this.options.fadeOutStart||u<this.options.startTime||2===o&&u<this.options.fadeInEnd||u>this.options.endTime||(r.x=a,1===o?(this.options.fadeInEnd=u,this.emit("fade-in-change",{time:u})):2===o&&(this.options.fadeOutStart=u,this.emit("fade-out-change",{time:u})),s>1||s<-1?h(s):this.renderPolyline())};this.makeDraggable(o,((t,e)=>h(e)));const l=s.querySelectorAll("circle");for(let t=0;t<l.length;t++){const e=t+1;this.makeDraggable(l[t],((t,i)=>d(t,i,e)))}}destroy(){this.svg?.remove(),super.destroy()}initWebAudio(){const t=this.wavesurfer?.getMediaElement();if(!t)return null;this.volume=this.options.volume??t.volume;const e=new window.AudioContext;this.gainNode=e.createGain(),this.gainNode.gain.value=this.volume,e.createMediaElementSource(t).connect(this.gainNode),this.gainNode.connect(e.destination),this.audioContext=e}naturalVolume(t){return 1e-4+.9999*Math.pow(t,3)}onVolumeChange(t){t=this.naturalVolume(t),this.volume=t,this.emit("volume-change",{volume:t}),this.gainNode&&(this.gainNode.gain.value=t)}initFadeEffects(){if(!this.audioContext||!this.wavesurfer)return;const t=this.wavesurfer.on("timeupdate",(({currentTime:t})=>{if(!this.audioContext||!this.gainNode)return;if(!this.wavesurfer?.isPlaying())return;if("suspended"===this.audioContext.state&&this.audioContext.resume(),!this.isFadingIn&&t>=this.options.startTime&&t<=this.options.fadeInEnd)return this.isFadingIn=!0,this.gainNode.gain.setValueAtTime(0,this.audioContext.currentTime),void this.gainNode.gain.linearRampToValueAtTime(this.volume,this.audioContext.currentTime+(this.options.fadeInEnd-t));if(!this.isFadingOut&&t>=this.options.fadeOutStart&&t<=this.options.endTime)return this.isFadingOut=!0,void this.gainNode.gain.linearRampToValueAtTime(0,this.audioContext.currentTime+(this.options.endTime-t));let e=!1;this.isFadingIn&&(t<this.options.startTime||t>this.options.fadeInEnd)&&(this.isFadingIn=!1,e=!0),this.isFadingOut&&(t<this.options.fadeOutStart||t>=this.options.endTime)&&(this.isFadingOut=!1,e=!0),e&&(this.gainNode.gain.cancelScheduledValues(this.audioContext.currentTime),this.gainNode.gain.value=this.volume)}));this.subscriptions.push(t)}getCurrentVolume(){return this.gainNode?this.gainNode.gain.value:this.volume}setStartTime(t){this.options.startTime=t,this.renderPolyline()}setEndTime(t){this.options.endTime=t,this.renderPolyline()}}const o=n})(),s.default})()));

package/dist/plugin/wavesurfer.minimap.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.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:()=>p});const i=class{eventTarget;constructor(){this.eventTarget=new EventTarget}emit(t,e){const i=new CustomEvent(String(t),{detail:e});this.eventTarget.dispatchEvent(i)}on(t,e,i){const s=t=>{t instanceof CustomEvent&&e(t.detail)},r=String(t);return this.eventTarget.addEventListener(r,s,{once:i}),()=>this.eventTarget.removeEventListener(r,s)}once(t,e){return this.on(t,e,!0)}},s=class extends i{wavesurfer;container;wrapper;subscriptions=[];options;constructor(t){super(),this.options=t}init(t){this.wavesurfer=t.wavesurfer,this.container=t.container,this.wrapper=t.wrapper}destroy(){this.subscriptions.forEach((t=>t()))}},r=class extends i{options;container;scrollContainer;wrapper;canvasWrapper;progressWrapper;timeout=null;isScrolling=!1;audioData=null;resizeObserver=null;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"),s=i.attachShadow({mode:"open"});s.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          ${this.options.hideScrollbar?"scrollbar-color: transparent;":""}\n        }\n        :host ::-webkit-scrollbar {\n          display: ${this.options.hideScrollbar?"none":"auto"};\n        }\n        :host .wrapper {\n          position: relative;\n          min-width: 100%;\n          z-index: 2;\n        }\n        :host .canvases {\n          position: relative;\n          height: ${this.options.height}px;\n        }\n        :host canvas {\n          display: block;\n          position: absolute;\n          top: 0;\n          height: ${this.options.height}px;\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: ${this.options.height}px;\n          overflow: hidden;\n          box-sizing: border-box;\n          border-right-style: solid;\n          border-right-width: ${this.options.cursorWidth}px;\n          border-right-color: ${this.options.cursorColor||this.options.progressColor};\n        }\n      </style>\n\n      <div class="scroll">\n        <div class="wrapper">\n          <div class="canvases"></div>\n          <div class="progress"></div>\n        </div>\n      </div>\n    `,this.container=i,this.scrollContainer=s.querySelector(".scroll"),this.wrapper=s.querySelector(".wrapper"),this.canvasWrapper=s.querySelector(".canvases"),this.progressWrapper=s.querySelector(".progress"),e.appendChild(i),this.wrapper.addEventListener("click",(t=>{const e=this.wrapper.getBoundingClientRect(),i=(t.clientX-e.left)/e.width;this.emit("click",{relativeX:i})})),this.resizeObserver=new ResizeObserver((()=>{this.delay((()=>this.audioData&&this.zoom(this.audioData,this.options.minPxPerSec)),100)})),this.resizeObserver.observe(this.scrollContainer)}getContainer(){return this.scrollContainer}getWrapper(){return this.wrapper}destroy(){this.container.remove(),this.resizeObserver?.disconnect()}delay(t,e=10){return this.timeout&&clearTimeout(this.timeout),new Promise((i=>{this.timeout=setTimeout((()=>{i(t())}),e)}))}async renderPeaks(t,e,i,s){const r=null!=this.options.barWidth?this.options.barWidth*s:1,n=null!=this.options.barGap?this.options.barGap*s:this.options.barWidth?r/2:0,o=this.options.barRadius??0,a=t[0],h=a.length,d=Math.floor(e/(r+n))/h,l=i/2,c=1===t.length,p=c?a:t[1],u=c&&p.some((t=>t<0)),m=(t,i)=>{let c=0,m=0,g=0;const v=document.createElement("canvas");v.width=Math.round(e*(i-t)/h),v.height=this.options.height,v.style.width=`${Math.floor(v.width/s)}px`,v.style.left=`${Math.floor(t*e/s/h)}px`,this.canvasWrapper.appendChild(v);const y=v.getContext("2d",{desynchronized:!0});y.beginPath(),y.fillStyle=this.options.waveColor,y.roundRect||(y.roundRect=y.fillRect);for(let e=t;e<i;e++){const i=Math.round((e-t)*d);if(i>c){const t=Math.round(m*l),e=Math.round(g*l);y.roundRect(c*(r+n),l-t,r,t+e||1,o),c=i,m=0,g=0}const s=u?a[e]:Math.abs(a[e]),h=u?p[e]:Math.abs(p[e]);s>m&&(m=s),(u?h<-g:h>g)&&(g=h<0?-h:h)}y.fill(),y.closePath();const f=v.cloneNode();this.progressWrapper.appendChild(f);const b=f.getContext("2d",{desynchronized:!0});b.drawImage(v,0,0),b.globalCompositeOperation="source-in",b.fillStyle=this.options.progressColor,b.fillRect(0,0,v.width,v.height)};this.canvasWrapper.innerHTML="",this.progressWrapper.innerHTML="";const{scrollLeft:g,scrollWidth:v,clientWidth:y}=this.scrollContainer,f=h/v,b=Math.floor(g*f),w=Math.ceil(Math.min(v,g+y)*f);m(b,w);const C=w-b;for(let t=w;t<h;t+=C)await this.delay((()=>{m(t,Math.min(h,t+C))}));for(let t=b-1;t>=0;t-=C)await this.delay((()=>{m(Math.max(0,t-C),t)}))}render(t){const e=window.devicePixelRatio||1,i=this.options.fillParent?this.scrollContainer.clientWidth*e:0,s=Math.max(1,t.duration*this.options.minPxPerSec),r=s>i?s:i,{height:n}=this.options;this.isScrolling=r>i,this.scrollContainer.style.overflowX=this.isScrolling?"auto":"hidden",this.wrapper.style.width=`${Math.floor(r/e)}px`;const o=[t.getChannelData(0)];t.numberOfChannels>1&&o.push(t.getChannelData(1)),this.renderPeaks(o,r,n,e),this.audioData=t}zoom(t,e){const i=this.progressWrapper.clientWidth;this.options.minPxPerSec=e,this.render(t);const s=this.progressWrapper.clientWidth;this.scrollContainer.scrollLeft+=s-i}renderProgress(t,e=!1){if(this.progressWrapper.style.width=100*t+"%",this.isScrolling){const t=this.scrollContainer.clientWidth,i=t/2,s=this.progressWrapper.clientWidth,r=e?i:t;s>this.scrollContainer.scrollLeft+r&&(this.scrollContainer.scrollLeft=s-i)}}},n=class extends i{media;subscriptions=[];isExternalMedia=!1;hasPlayedOnce=!1;constructor(t){super(),t.media?(this.media=t.media,this.isExternalMedia=!0):this.media=document.createElement("audio"),this.subscriptions.push(this.onceMediaEvent("play",(()=>{this.hasPlayedOnce=!0}))),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})}loadUrl(t){this.media.src=t}destroy(){this.media.pause(),this.subscriptions.forEach((t=>t())),this.isExternalMedia||this.media.remove()}play(){this.media.play()}pause(){this.media.pause()}isPlaying(){return this.media.currentTime>0&&!this.media.paused&&!this.media.ended}seekTo(t){!this.hasPlayedOnce&&navigator.userAgent.match(/(iPad|iPhone|iPod)/g)&&this.media.play()?.then?.((()=>{setTimeout((()=>this.media.pause()),10)})),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}},o=class extends i{unsubscribe=()=>{};start(){this.unsubscribe=this.on("tick",(()=>{requestAnimationFrame((()=>{this.emit("tick")}))})),this.emit("tick")}stop(){this.unsubscribe()}destroy(){this.unsubscribe()}},a={height:128,waveColor:"#999",progressColor:"#555",cursorWidth:1,minPxPerSec:0,fillParent:!0,interact:!0,autoCenter:!0};class h extends n{options;fetcher;decoder;renderer;timer;plugins=[];decodedData=null;canPlay=!1;static create(t){return new h(t)}constructor(t){super({media:t.media,autoplay:t.autoplay,playbackRate:t.audioRate}),this.options=Object.assign({},a,t),this.fetcher=new class{async load(t){return fetch(t).then((t=>t.arrayBuffer()))}},this.decoder=new class{audioCtx=null;initAudioContext(t){this.audioCtx=new AudioContext({latencyHint:"playback",sampleRate:t})}constructor(){try{this.initAudioContext(3e3)}catch(t){this.initAudioContext(8e3)}}async decode(t){if(!this.audioCtx)throw new Error("AudioContext is not initialized");return this.audioCtx.decodeAudioData(t)}destroy(){this.audioCtx?.close(),this.audioCtx=null}},this.timer=new o,this.renderer=new r({container:this.options.container,height:this.options.height,waveColor:this.options.waveColor,progressColor:this.options.progressColor,cursorColor:this.options.cursorColor,cursorWidth:this.options.cursorWidth,minPxPerSec:this.options.minPxPerSec,fillParent:this.options.fillParent,barWidth:this.options.barWidth,barGap:this.options.barGap,barRadius:this.options.barRadius,hideScrollbar:this.options.hideScrollbar}),this.initPlayerEvents(),this.initRendererEvents(),this.initTimerEvents(),this.initReadyEvent(),this.initPlugins();const e=this.options.url||this.options.media?.src;e&&this.load(e,this.options.peaks,this.options.duration)}initPlayerEvents(){this.subscriptions.push(this.onMediaEvent("timeupdate",(()=>{const t=this.getCurrentTime();this.renderer.renderProgress(t/this.getDuration(),this.options.autoCenter&&this.isPlaying()),this.emit("timeupdate",{currentTime:t})})),this.onMediaEvent("play",(()=>{this.emit("play"),this.timer.start()})),this.onMediaEvent("pause",(()=>{this.emit("pause"),this.timer.stop()})),this.onMediaEvent("canplay",(()=>{this.canPlay=!0,this.emit("canplay",{duration:this.getDuration()})})),this.onMediaEvent("seeking",(()=>{this.emit("seeking",{currentTime:this.getCurrentTime()})})))}initRendererEvents(){this.subscriptions.push(this.renderer.on("click",(({relativeX:t})=>{if(this.options.interact){const e=this.getDuration()*t;this.seekTo(e),this.emit("seekClick",{currentTime:this.getCurrentTime()})}})))}initTimerEvents(){this.subscriptions.push(this.timer.on("tick",(()=>{const t=this.getCurrentTime();this.renderer.renderProgress(t/this.getDuration(),!0),this.emit("timeupdate",{currentTime:t})})))}initReadyEvent(){const t=()=>{this.decodedData&&this.canPlay&&this.emit("ready",{duration:this.getDuration()})};this.subscriptions.push(this.on("decode",t),this.on("canplay",t))}initPlugins(){this.options.plugins?.length&&this.options.plugins.forEach((t=>{this.registerPlugin(t)}))}registerPlugin(t){return t.init({wavesurfer:this,container:this.renderer.getContainer(),wrapper:this.renderer.getWrapper()}),this.plugins.push(t),t.once("destroy",(()=>{this.plugins=this.plugins.filter((e=>e!==t))})),t}async load(t,e,i){if(this.decodedData=null,this.canPlay=!1,this.loadUrl(t),null==e){const e=await this.fetcher.load(t),i=await this.decoder.decode(e);this.decodedData=i}else i||(i=await new Promise((t=>{this.onceMediaEvent("loadedmetadata",(()=>t(this.getDuration())))}))||0),this.decodedData={duration:i,numberOfChannels:e.length,sampleRate:e[0].length/i,getChannelData:t=>e[t]};this.renderer.render(this.decodedData),this.emit("decode",{duration:this.decodedData.duration})}zoom(t){if(!this.decodedData)throw new Error("No audio loaded");this.renderer.zoom(this.decodedData,t),this.emit("zoom",{minPxPerSec:t})}getDecodedData(){return this.decodedData}getDuration(){return this.decodedData?.duration||this.getMediaElement()?.duration||0}toggleInteractive(t){this.options.interact=t}destroy(){this.emit("destroy"),this.plugins.forEach((t=>t.destroy())),this.timer.destroy(),this.decoder.destroy(),this.renderer.destroy(),super.destroy()}}const d=h,l={height:50,overlayColor:"rgba(100, 100, 100, 0.1)"};class c extends s{options;minimapWrapper;miniWavesurfer=null;overlay;constructor(t){super(t),this.options=Object.assign({},l,t),this.minimapWrapper=this.initMinimapWrapper(),this.overlay=this.initOverlay()}static create(t){return new c(t)}init(t){if(super.init(t),!this.wavesurfer)throw Error("WaveSurfer is not initialized");this.container?.insertAdjacentElement("afterend",this.minimapWrapper),this.subscriptions.push(this.wavesurfer.on("decode",(()=>{this.initMinimap()})))}initMinimapWrapper(){const t=document.createElement("div");return t.style.position="relative",t}initOverlay(){const t=document.createElement("div");return t.setAttribute("style","position: absolute; z-index: 2; left: 0; top: 0; bottom: 0;"),t.style.backgroundColor=this.options.overlayColor,this.minimapWrapper.appendChild(t),t}initMinimap(){if(!this.wavesurfer||!this.wrapper)return;const t=this.wavesurfer.getDecodedData(),e=this.wavesurfer.getMediaElement();if(!t||!e)return;this.miniWavesurfer=d.create({...this.options,container:this.minimapWrapper,minPxPerSec:1,fillParent:!0,media:e,url:e.src,peaks:[t.getChannelData(0)],duration:t.duration});const i=Math.round(this.minimapWrapper.clientWidth/this.wrapper.clientWidth*100);this.overlay.style.width=`${i}%`,this.wavesurfer.on("timeupdate",(({currentTime:e})=>{const s=Math.max(0,Math.min(e/t.duration*100-i/2,100-i)).toFixed(2);this.overlay.style.left=`${s}%`}))}destroy(){this.miniWavesurfer?.destroy(),this.minimapWrapper.remove(),super.destroy()}}const p=c;return e.default})()));