wavesurfer.js 7.0.0-alpha.22 → 7.0.0-alpha.23

package/dist/base-plugin.d.ts

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

package/dist/base-plugin.js

@@ -5,12 +5,14 @@ export class BasePlugin extends EventEmitter {
     wrapper;
     subscriptions = [];
     options;
-    constructor(params, options) {
+    constructor(options) {
         super();
+        this.options = options;
+    }
+    init(params) {
         this.wavesurfer = params.wavesurfer;
         this.container = params.container;
         this.wrapper = params.wrapper;
-        this.options = options;
     }
     destroy() {
         this.subscriptions.forEach((unsubscribe) => unsubscribe());

package/dist/index.d.ts

@@ -1,4 +1,5 @@
-import EventEmitter, { type GeneralEventTypes } from './event-emitter.js';
+import Player from './player.js';
+import { type GeneralEventTypes } from './event-emitter.js';
 import BasePlugin from './base-plugin.js';
 export type WaveSurferOptions = {
     /** HTML element or CSS selector */
@@ -34,9 +35,15 @@ export type WaveSurferOptions = {
     /** Play the audio on load */
     autoplay?: boolean;
     /** Is the waveform clickable? */
-    interactive?: boolean;
+    interact?: boolean;
     /** Hide scrollbar **/
-    noScrollbar?: boolean;
+    hideScrollbar?: boolean;
+    /** Audio rate */
+    audioRate?: number;
+    /** Keep scroll to the center of the waveform during playback */
+    autoCenter?: boolean;
+    /** Initialize plugins */
+    plugins: BasePlugin<GeneralEventTypes, unknown>[];
 };
 declare const defaultOptions: {
     height: number;
@@ -45,7 +52,8 @@ declare const defaultOptions: {
     cursorWidth: number;
     minPxPerSec: number;
     fillParent: boolean;
-    interactive: boolean;
+    interact: boolean;
+    autoCenter: boolean;
 };
 export type WaveSurferEvents = {
     decode: {
@@ -78,16 +86,15 @@ export type WaveSurferPluginParams = {
     container: HTMLElement;
     wrapper: HTMLElement;
 };
-declare class WaveSurfer extends EventEmitter<WaveSurferEvents> {
+declare class WaveSurfer extends Player<WaveSurferEvents> {
     options: WaveSurferOptions & typeof defaultOptions;
     private fetcher;
     private decoder;
     private renderer;
-    private player;
     private timer;
     private plugins;
-    private subscriptions;
     private decodedData;
+    private canPlay;
     /** Create a new WaveSurfer instance */
     static create(options: WaveSurferOptions): WaveSurfer;
     /** Create a new WaveSurfer instance */
@@ -96,40 +103,16 @@ declare class WaveSurfer extends EventEmitter<WaveSurferEvents> {
     private initRendererEvents;
     private initTimerEvents;
     private initReadyEvent;
+    private initPlugins;
+    /** Register a wavesurfer.js plugin */
+    registerPlugin(plugin: BasePlugin<GeneralEventTypes, unknown>): void;
     /** Load an audio file by URL, with optional pre-decoded audio data */
     load(url: string, channelData?: Float32Array[], duration?: number): Promise<void>;
     /** Zoom in or out */
     zoom(minPxPerSec: number): void;
-    /** Start playing the audio */
-    play(): void;
-    /** Pause the audio */
-    pause(): void;
-    /** Skip to a time position in seconds */
-    seekTo(time: number): void;
-    /** Check if the audio is playing */
-    isPlaying(): boolean;
-    /** 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 playback rate */
-    getPlaybackRate(): number;
-    /** Set playback rate, with an optional parameter to NOT preserve the pitch if false */
-    setPlaybackRate(rate: number, preservePitch?: boolean): void;
-    /** Register and initialize a plugin */
-    registerPlugin<T extends BasePlugin<GeneralEventTypes, Options>, Options>(CustomPlugin: new (params: WaveSurferPluginParams, options: Options) => T, options: Options): T;
     /** Get the decoded audio data */
     getDecodedData(): AudioBuffer | null;
-    /** Get the raw media element */
-    getMediaElement(): HTMLMediaElement | null;
+    getDuration(): number;
     /** Toggle if the waveform should react to clicks */
     toggleInteractive(isInteractive: boolean): void;
     /** Unmount wavesurfer */

package/dist/index.js

@@ -2,7 +2,6 @@ import Fetcher from './fetcher.js';
 import Decoder from './decoder.js';
 import Renderer from './renderer.js';
 import Player from './player.js';
-import EventEmitter from './event-emitter.js';
 import Timer from './timer.js';
 const defaultOptions = {
     height: 128,
@@ -11,33 +10,33 @@ const defaultOptions = {
     cursorWidth: 1,
     minPxPerSec: 0,
     fillParent: true,
-    interactive: true,
+    interact: true,
+    autoCenter: true,
 };
-class WaveSurfer extends EventEmitter {
+class WaveSurfer extends Player {
     options;
     fetcher;
     decoder;
     renderer;
-    player;
     timer;
     plugins = [];
-    subscriptions = [];
     decodedData = null;
+    canPlay = false;
     /** Create a new WaveSurfer instance */
     static create(options) {
         return new WaveSurfer(options);
     }
     /** Create a new WaveSurfer instance */
     constructor(options) {
-        super();
+        super({
+            media: options.media,
+            autoplay: options.autoplay,
+            playbackRate: options.audioRate,
+        });
         this.options = Object.assign({}, defaultOptions, options);
         this.fetcher = new Fetcher();
         this.decoder = new Decoder();
         this.timer = new Timer();
-        this.player = new Player({
-            media: this.options.media,
-            autoplay: this.options.autoplay,
-        });
         this.renderer = new Renderer({
             container: this.options.container,
             height: this.options.height,
@@ -50,38 +49,40 @@ class WaveSurfer extends EventEmitter {
             barWidth: this.options.barWidth,
             barGap: this.options.barGap,
             barRadius: this.options.barRadius,
-            noScrollbar: this.options.noScrollbar,
+            hideScrollbar: this.options.hideScrollbar,
         });
         this.initPlayerEvents();
         this.initRendererEvents();
         this.initTimerEvents();
         this.initReadyEvent();
+        this.initPlugins();
         const url = this.options.url || this.options.media?.src;
         if (url) {
             this.load(url, this.options.peaks, this.options.duration);
         }
     }
     initPlayerEvents() {
-        this.subscriptions.push(this.player.on('timeupdate', () => {
+        this.subscriptions.push(this.onMediaEvent('timeupdate', () => {
             const currentTime = this.getCurrentTime();
-            this.renderer.renderProgress(currentTime / this.getDuration(), this.isPlaying());
+            this.renderer.renderProgress(currentTime / this.getDuration(), this.options.autoCenter && this.isPlaying());
             this.emit('timeupdate', { currentTime });
-        }), this.player.on('play', () => {
+        }), this.onMediaEvent('play', () => {
             this.emit('play');
             this.timer.start();
-        }), this.player.on('pause', () => {
+        }), this.onMediaEvent('pause', () => {
             this.emit('pause');
             this.timer.stop();
-        }), this.player.on('canplay', () => {
+        }), this.onMediaEvent('canplay', () => {
+            this.canPlay = true;
             this.emit('canplay', { duration: this.getDuration() });
-        }), this.player.on('seeking', () => {
+        }), this.onMediaEvent('seeking', () => {
             this.emit('seeking', { currentTime: this.getCurrentTime() });
         }));
     }
     initRendererEvents() {
         // Seek on click
         this.subscriptions.push(this.renderer.on('click', ({ relativeX }) => {
-            if (this.options.interactive) {
+            if (this.options.interact) {
                 const time = this.getDuration() * relativeX;
                 this.seekTo(time);
                 this.emit('seekClick', { currentTime: this.getCurrentTime() });
@@ -97,27 +98,37 @@ class WaveSurfer extends EventEmitter {
         }));
     }
     initReadyEvent() {
-        let isDecoded = false;
-        let isPlayable = false;
         const emitReady = () => {
-            if (isDecoded && isPlayable) {
+            if (this.decodedData && this.canPlay) {
                 this.emit('ready', { duration: this.getDuration() });
             }
         };
-        this.subscriptions.push(this.on('decode', () => {
-            isDecoded = true;
-            emitReady();
-        }), this.on('canplay', () => {
-            isPlayable = true;
-            emitReady();
-        }), this.player.on('waiting', () => {
-            isPlayable = false;
-            isDecoded = false;
-        }));
+        this.subscriptions.push(this.on('decode', emitReady), this.on('canplay', emitReady));
+    }
+    initPlugins() {
+        if (!this.options.plugins?.length)
+            return;
+        this.options.plugins.forEach((plugin) => {
+            this.registerPlugin(plugin);
+        });
+    }
+    /** Register a wavesurfer.js plugin */
+    registerPlugin(plugin) {
+        plugin.init({
+            wavesurfer: this,
+            container: this.renderer.getContainer(),
+            wrapper: this.renderer.getWrapper(),
+        });
+        this.plugins.push(plugin);
+        plugin.once('destroy', () => {
+            this.plugins = this.plugins.filter((p) => p !== plugin);
+        });
     }
     /** Load an audio file by URL, with optional pre-decoded audio data */
     async load(url, channelData, duration) {
-        this.player.loadUrl(url);
+        this.decodedData = null;
+        this.canPlay = false;
+        this.loadUrl(url);
         // Fetch and decode the audio of no pre-computed audio data is provided
         if (channelData == null) {
             const audio = await this.fetcher.load(url);
@@ -128,9 +139,7 @@ class WaveSurfer extends EventEmitter {
             if (!duration) {
                 duration =
                     (await new Promise((resolve) => {
-                        this.player.on('canplay', () => resolve(this.getDuration()), {
-                            once: true,
-                        });
+                        this.onceMediaEvent('loadedmetadata', () => resolve(this.getDuration()));
                     })) || 0;
             }
             this.decodedData = {
@@ -151,88 +160,25 @@ class WaveSurfer extends EventEmitter {
         this.renderer.zoom(this.decodedData, minPxPerSec);
         this.emit('zoom', { minPxPerSec });
     }
-    /** Start playing the audio */
-    play() {
-        this.player.play();
-    }
-    /** Pause the audio */
-    pause() {
-        this.player.pause();
-    }
-    /** Skip to a time position in seconds */
-    seekTo(time) {
-        this.player.seekTo(time);
-    }
-    /** Check if the audio is playing */
-    isPlaying() {
-        return this.player.isPlaying();
-    }
-    /** Get the duration of the audio in seconds */
-    getDuration() {
-        return this.player.getDuration() || this.decodedData?.duration || 0;
-    }
-    /** Get the current audio position in seconds */
-    getCurrentTime() {
-        return this.player.getCurrentTime();
-    }
-    /** Get the audio volume */
-    getVolume() {
-        return this.player.getVolume();
-    }
-    /** Set the audio volume */
-    setVolume(volume) {
-        this.player.setVolume(volume);
-    }
-    /** Get the audio muted state */
-    getMuted() {
-        return this.player.getMuted();
-    }
-    /** Mute or unmute the audio */
-    setMuted(muted) {
-        this.player.setMuted(muted);
-    }
-    /** Get playback rate */
-    getPlaybackRate() {
-        return this.player.getPlaybackRate();
-    }
-    /** Set playback rate, with an optional parameter to NOT preserve the pitch if false */
-    setPlaybackRate(rate, preservePitch) {
-        this.player.setPlaybackRate(rate, preservePitch);
-    }
-    /** Register and initialize a plugin */
-    registerPlugin(CustomPlugin, options) {
-        const plugin = new CustomPlugin({
-            wavesurfer: this,
-            container: this.renderer.getContainer(),
-            wrapper: this.renderer.getWrapper(),
-        }, options);
-        this.plugins.push(plugin);
-        plugin.once('destroy', () => {
-            this.plugins = this.plugins.filter((p) => p !== plugin);
-        });
-        return plugin;
-    }
     /** Get the decoded audio data */
     getDecodedData() {
         return this.decodedData;
     }
-    /** Get the raw media element */
-    getMediaElement() {
-        return this.player.getMediaElement();
+    getDuration() {
+        return this.decodedData?.duration || this.getMediaElement()?.duration || 0;
     }
     /** Toggle if the waveform should react to clicks */
     toggleInteractive(isInteractive) {
-        this.options.interactive = isInteractive;
+        this.options.interact = isInteractive;
     }
     /** Unmount wavesurfer */
     destroy() {
         this.emit('destroy');
-        this.subscriptions.forEach((unsubscribe) => unsubscribe());
         this.plugins.forEach((plugin) => plugin.destroy());
         this.timer.destroy();
-        this.player.destroy();
         this.decoder.destroy();
         this.renderer.destroy();
+        super.destroy();
     }
 }
 export default WaveSurfer;

package/dist/player.d.ts

@@ -1,27 +1,44 @@
-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;
     private hasPlayedOnce;
-    private subscriptions;
-    constructor({ media, autoplay }: {
-        media?: HTMLMediaElement;
-        autoplay?: boolean;
-    });
-    on(event: keyof HTMLMediaElementEventMap, callback: () => void, options?: AddEventListenerOptions): () => void;
+    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;
+    /** Start playing the audio */
     play(): void;
+    /** Pause the audio */
     pause(): void;
+    /** Check if the audio is playing */
     isPlaying(): boolean;
+    /** Skip to a time position in seconds */
     seekTo(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;
 }
 export default Player;

package/dist/player.js

@@ -1,11 +1,13 @@
-class Player {
+import EventEmitter from './event-emitter.js';
+class Player extends EventEmitter {
     media;
+    subscriptions = [];
     isExternalMedia = false;
     hasPlayedOnce = false;
-    subscriptions = [];
-    constructor({ media, autoplay }) {
-        if (media) {
-            this.media = media;
+    constructor(options) {
+        super();
+        if (options.media) {
+            this.media = options.media;
             this.isExternalMedia = true;
         }
         else {
@@ -13,42 +15,48 @@ class Player {
         }
         this.subscriptions.push(
         // Track the first play() call
-        this.on('play', () => {
+        this.onceMediaEvent('play', () => {
             this.hasPlayedOnce = true;
-        }, { once: true }));
+        }));
         // Autoplay
-        if (autoplay) {
+        if (options.autoplay) {
             this.media.autoplay = true;
         }
+        // Speed
+        if (options.playbackRate != null) {
+            this.media.playbackRate = options.playbackRate;
+        }
     }
-    on(event, callback, options) {
+    onMediaEvent(event, callback, options) {
         this.media.addEventListener(event, callback, options);
         return () => this.media.removeEventListener(event, callback);
     }
+    onceMediaEvent(event, callback) {
+        return this.onMediaEvent(event, callback, { once: true });
+    }
+    loadUrl(src) {
+        this.media.src = src;
+    }
     destroy() {
-        this.subscriptions.forEach((unsubscribe) => {
-            unsubscribe();
-        });
         this.media.pause();
+        this.subscriptions.forEach((unsubscribe) => unsubscribe());
         if (!this.isExternalMedia) {
             this.media.remove();
         }
     }
-    loadUrl(src) {
-        this.media.src = src;
-    }
-    getCurrentTime() {
-        return this.media.currentTime;
-    }
+    /** Start playing the audio */
     play() {
         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;
     }
+    /** Skip to a time position in seconds */
     seekTo(time) {
         // iOS Safari requires a play() call before seeking
         if (!this.hasPlayedOnce && navigator.userAgent.match(/(iPad|iPhone|iPod)/g)) {
@@ -58,24 +66,35 @@ class Player {
         }
         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) {
@@ -83,6 +102,7 @@ class Player {
         }
         this.media.playbackRate = rate;
     }
+    /** Get the HTML media element */
     getMediaElement() {
         return this.media;
     }

package/dist/plugins/envelope.d.ts

@@ -1,5 +1,5 @@
 import BasePlugin from '../base-plugin.js';
-import type { WaveSurferPluginParams } from '../index.js';
+import type { WaveSurferPluginParams } from '../wavesurfer.js';
 export type EnvelopePluginOptions = {
     startTime?: number;
     endTime?: number;
@@ -42,7 +42,9 @@ declare class EnvelopePlugin extends BasePlugin<EnvelopePluginEvents, EnvelopePl
     private volume;
     private isFadingIn;
     private isFadingOut;
-    constructor(params: WaveSurferPluginParams, options: EnvelopePluginOptions);
+    constructor(options: EnvelopePluginOptions);
+    static create(options: EnvelopePluginOptions): EnvelopePlugin;
+    init(params: WaveSurferPluginParams): void;
     private makeDraggable;
     private renderPolyline;
     private initSvg;