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

package/LICENSE

@@ -0,0 +1,29 @@
+BSD 3-Clause License
+
+Copyright (c) 2012-2023, katspaugh and contributors
+All rights reserved.
+
+Redistribution and use in source and binary forms, with or without
+modification, are permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above copyright notice, this
+  list of conditions and the following disclaimer.
+
+* Redistributions in binary form must reproduce the above copyright notice,
+  this list of conditions and the following disclaimer in the documentation
+  and/or other materials provided with the distribution.
+
+* Neither the name of the copyright holder nor the names of its
+  contributors may be used to endorse or promote products derived from
+  this software without specific prior written permission.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
+AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
+DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
+FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
+DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
+SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
+CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
+OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

package/README.md

@@ -1,48 +1,165 @@
-# <img src="https://user-images.githubusercontent.com/381895/226091100-f5567a28-7736-4d37-8f84-e08f297b7e1a.png" alt="logo" height="60" valign="middle" /> wavesurfer.ts
+# <img src="https://user-images.githubusercontent.com/381895/226091100-f5567a28-7736-4d37-8f84-e08f297b7e1a.png" alt="logo" height="60" valign="middle" /> wavesurfer.js
 
-An experimental rewrite of [wavesufer.js](https://github.com/wavesurfer-js/wavesurfer.js) to play around with new ideas.
+[![npm](https://img.shields.io/npm/v/wavesurfer.js/beta)](https://www.npmjs.com/package/wavesurfer.js)
 
-<img alt="screenshot" src="https://user-images.githubusercontent.com/381895/225539680-fc724acd-8657-458e-a558-ff1c6758ba30.png" width="800" />
+## New TypeScript version
+
+wavesurfer.js v7 beta is a TypeScript rewrite of wavesurfer.js that brings several improvements:
+
+ * Typed API for better development experience
+ * Enhanced decoding and rendering performance
+ * New and improved plugins
+
+<img width="626" alt="waveform screenshot" src="https://github.com/katspaugh/wavesurfer.js/assets/381895/05f03bed-800e-4fa1-b09a-82a39a1c62ce">
+
+---
+
+ℹ️ Looking for the old stable version? V6 is here: https://github.com/katspaugh/wavesurfer.js/tree/v6
+
+---
 
 Try it out:
+
+```bash
+npm install --save wavesurfer.js@beta
+```
+```js
+import WaveSurfer from 'wavesurfer.js'
+```
+
+Alternatively, import it from a CDN as a ES6 module directly in the browser:
+
+```html
+<script type="module">
+  import WaveSurfer from 'https://unpkg.com/wavesurfer.js@beta'
+
+  const wavesurfer = WaveSurfer.create({ ... })
+</script>
 ```
-npm install --save wavesurfer.js@alpha
+
+Or, as a UMD script tag which exports the library as a global `WaveSurfer` variable:
+```html
+<script src="https://unpkg.com/wavesurfer.js@beta/dist/wavesurfer.min.cjs"></script>
+```
+
+To import a plugin, e.g. the Timeline plugin:
+```js
+import Timeline from 'https://unpkg.com/wavesurfer.js@beta/dist/plugins/timeline.js'
 ```
 
-## Goals
+TypeScript types are included in the package, so there's no need to install `@types/wavesurfer.js`.
 
- * TypeScript API
- * Better architecture
- * Minimize the available options and provide sensible defaults
- * Improve the decoding and rendering performance
+See more [examples](https://wavesurfer-js.org/examples).
 
-## Non-goals
+## Documentation
 
-Keeping backwards compatibility with earlier versions of wavesurfer.js.
+See the documentation on wavesurfer.js [methods](http://wavesurfer-js.org/docs/methods), [options](http://wavesurfer-js.org/docs/options) and [events](http://wavesurfer-js.org/docs/events) on our website.
 
-## Architecture
+## Plugins
 
-Principles:
- * Modular and event-driven
- * Flexible (e.g. allow custom media elements and user-defined Web Audio graphs)
- * Extensible with plugins
+The "official" plugins have been completely rewritten and enhanced:
+
+ * [Regions](https://wavesurfer-js.org/examples/#regions.js) – visual overlays and markers for regions of audio
+ * [Timeline](https://wavesurfer-js.org/examples/#timeline.js) – displays notches and time labels below the waveform
+ * [Minimap](https://wavesurfer-js.org/examples/#minimap.js) – a small waveform that serves as a scrollbar for the main waveform
+ * [Envelope](https://wavesurfer-js.org/examples/#envelope.js) – a graphical interface to add fade-in and -out effects and control volume
+ * [Record](https://wavesurfer-js.org/examples/#record.js) – records audio from the microphone and renders a waveform
+ * [Spectrogram](https://wavesurfer-js.org/examples/#spectrogram.js) – visualization of an audio frequency spectrum
+
+## CSS styling
+
+wavesurfer.js v7 is rendered into a Shadow DOM tree. This isolates its CSS from the rest of the web page.
+However, it's still possible to style various wavesurfer.js elements via CSS using the `::part()` pseudo-selector.
+For example:
+
+```css
+#waveform ::part(cursor):before {
+  content: '🏄';
+}
+#waveform ::part(region) {
+  font-family: fantasy;
+}
+```
+
+You can see which elements you can style in the DOM inspector – they will have a `part` attribute.
+See [this example](https://wavesurfer-js.org/examples/#styling.js) for play around with styling.
+
+## Upgrading from v6
+
+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](https://github.com/katspaugh/wavesurfer.js/discussions/2762#discussioncomment-5669347). However, you can still connect wavesurfer to Web Audio via `MediaElementSourceNode`. See this [example](https://wavesurfer-js.org/examples/#webaudio.js).
+ * The Markers plugin is removed – use the Regions plugin with just a `startTime`.
+ * No Microphone plugn – superseded by the new Record plugin with more features.
+ * No Cursor and Playhead plugins yet – to be done.
+
+### Removed options
+ * `backend`, `audioContext`, `closeAudioContext', 'audioScriptProcessor` – there's no Web Audio backend, so no AudioContext
+ * `autoCenterImmediately` – `autoCenter` is now always immediate unless the audio is playing
+ * `backgroundColor`, `hideCursor` – this can be easily set via CSS
+ * `mediaType`, `mediaControls` – you should instead pass an entire media element in the `media` option. [Example](https://wavesurfer-js.org/examples/#video.js).
+ * `partialRender` – done by default
+ * `pixelRatio` – `window.devicePixelRatio` is used by default
+ * `renderer` – there's just one renderer for now, so no need for this option
+ * `responsive` – responsiveness is enabled by default
+ * `scrollParent` – the container will scroll if `minPxPerSec` is set to a higher value
+ * `skipLength` – there's no `skipForward` and `skipBackward` methods anymore
+ * `splitChannelsOptions` – you should now use `splitChannels` to pass the channel options. Pass `height: 0` to hide a channel. See [this example](https://wavesurfer-js.org/examples/#split-channels.js).
+ * `xhr`, `drawingContextAttributes`, `maxCanvasWidth`, `forceDecode` – removed to reduce code complexity
+
+### Removed methods
+ * `getFilters`, `setFilter` – as there's no Web Audio "backend"
+ * `drawBuffer` – to redraw the waveform, use `setOptions` instead and pass new rendering options
+ * `cancelAjax` – ajax is replaced by `fetch`
+ * `loadBlob` – use `URL.createObjectURL()` to convert a blob to a URL and call `load(url)` instead
+ * `skipForward`, `skipBackward`, `setPlayEnd` – can be implemented using `setTime(time)`
+ * `exportPCM` is renamed to `getDecodedData` and doesn't take any params
+ * `toggleMute` is now called `setMuted(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](http://wavesurfer-js.org/docs/methods).
+
+## Questions
+
+Have a question about integrating wavesurfer.js on your website? Feel free to ask in our [Discussions forum](https://github.com/wavesurfer-js/wavesurfer.js/discussions/categories/q-a).
+
+### FAQ
+
+* **Q**: Does wavesurfer support large files?
+* **A**: Since wavesurfer decodes audio entirely in the browser, large files may fail to decode due to memory constraints. We recommend using pre-decoded peaks for large files (see [this example](https://wavesurfer-js.org/examples/#predecoded.js)). You can use a tool like [bbc/audiowaveform](https://github.com/bbc/audiowaveform) to generate peaks.
 
 ## Development
 
-Install dev dependencies:
+To get started with development, follow these steps:
+
+ 1. Install dev dependencies:
 
 ```
 yarn
 ```
 
-Start the TypeScript compiler in watch mode and an HTTP server:
+ 2. Start the TypeScript compiler in watch mode and launch an HTTP server:
 
 ```
 yarn start
 ```
 
-This will open http://localhost:9090/tutorial in your browser with live reload.
+This command will open http://localhost:9090 in your browser with live reload, allowing you to see the changes as you develop.
+
+## Tests
+
+The tests are written in the Cypress framework. They are a mix of e2e and visual regression tests.
+To run the test suite locally:
+
+```
+yarn cypress
+```
 
 ## Feedback
 
-Your feedback is very welcome here: https://github.com/wavesurfer-js/wavesurfer.js/discussions/2684
+We appreciate your feedback and contributions! Join the conversation and share your thoughts here: https://github.com/wavesurfer-js/wavesurfer.js/discussions/2789
+
+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.
+
+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,11 +1,13 @@
 import EventEmitter, { type GeneralEventTypes } from './event-emitter.js';
-import type { WaveSurfer, WaveSurferPluginParams } from './index.js';
+import type WaveSurfer 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 wavesurfer?: WaveSurfer;
     protected subscriptions: (() => void)[];
     protected options: Options;
-    constructor(params: WaveSurferPluginParams, options: Options);
+    constructor(options: Options);
+    onInit(): void;
+    init(wavesurfer: WaveSurfer): void;
     destroy(): void;
 }
 export default BasePlugin;

package/dist/base-plugin.js

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

package/dist/decoder.d.ts

@@ -1,8 +1,9 @@
-declare class Decoder {
-    audioCtx: AudioContext | null;
-    private initAudioContext;
-    constructor();
-    decode(audioData: ArrayBuffer): Promise<AudioBuffer>;
-    destroy(): void;
-}
+/** Decode an array buffer into an audio buffer */
+declare function decode(audioData: ArrayBuffer, sampleRate: number): Promise<AudioBuffer>;
+/** Create an audio buffer from pre-decoded audio data */
+declare function createBuffer(channelData: Array<Float32Array | number[]>, duration: number): AudioBuffer;
+declare const Decoder: {
+    decode: typeof decode;
+    createBuffer: typeof createBuffer;
+};
 export default Decoder;

package/dist/decoder.js

@@ -1,43 +1,48 @@
-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 Decoder {
-    initAudioContext(sampleRate) {
-        this.audioCtx = new AudioContext({
-            latencyHint: 'playback',
-            sampleRate,
-        });
-    }
-    constructor() {
-        this.audioCtx = null;
-        // 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);
+/** Decode an array buffer into an audio buffer */
+async function decode(audioData, sampleRate) {
+    const audioCtx = new AudioContext({ sampleRate });
+    const decode = audioCtx.decodeAudioData(audioData);
+    decode.finally(() => audioCtx.close());
+    return decode;
+}
+/** Normalize peaks to -1..1 */
+function normalize(channelData) {
+    const firstChannel = channelData[0];
+    if (firstChannel.some((n) => n > 1 || n < -1)) {
+        const length = firstChannel.length;
+        let max = 0;
+        for (let i = 0; i < length; i++) {
+            const absN = Math.abs(firstChannel[i]);
+            if (absN > max)
+                max = absN;
         }
-    }
-    decode(audioData) {
-        return __awaiter(this, void 0, void 0, function* () {
-            if (!this.audioCtx) {
-                throw new Error('AudioContext is not initialized');
+        for (const channel of channelData) {
+            for (let i = 0; i < length; i++) {
+                channel[i] /= max;
             }
-            return this.audioCtx.decodeAudioData(audioData);
-        });
-    }
-    destroy() {
-        var _a;
-        (_a = this.audioCtx) === null || _a === void 0 ? void 0 : _a.close();
-        this.audioCtx = null;
+        }
     }
+    return channelData;
 }
+/** Create an audio buffer from pre-decoded audio data */
+function createBuffer(channelData, duration) {
+    // If a single array of numbers is passed, make it an array of arrays
+    if (typeof channelData[0] === 'number')
+        channelData = [channelData];
+    // Normalize to -1..1
+    normalize(channelData);
+    return {
+        duration,
+        length: channelData[0].length,
+        sampleRate: channelData[0].length / duration,
+        numberOfChannels: channelData.length,
+        getChannelData: (i) => channelData?.[i],
+        copyFromChannel: AudioBuffer.prototype.copyFromChannel,
+        copyToChannel: AudioBuffer.prototype.copyToChannel,
+    };
+}
+const Decoder = {
+    decode,
+    createBuffer,
+};
 export default Decoder;

package/dist/draggable.d.ts

@@ -0,0 +1 @@
+export declare function makeDraggable(element: HTMLElement | null, onDrag: (dx: number, dy: number, x: number, y: number) => void, onStart?: (x: number, y: number) => void, onEnd?: () => void, threshold?: number): () => void;

package/dist/draggable.js

@@ -0,0 +1,59 @@
+export function makeDraggable(element, onDrag, onStart, onEnd, threshold = 5) {
+    let unsub = () => {
+        return;
+    };
+    if (!element)
+        return unsub;
+    const down = (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        let startX = e.clientX;
+        let startY = e.clientY;
+        let isDragging = false;
+        const move = (e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            const x = e.clientX;
+            const y = e.clientY;
+            if (isDragging || Math.abs(x - startX) >= threshold || Math.abs(y - startY) >= threshold) {
+                if (!isDragging) {
+                    isDragging = true;
+                    onStart?.(startX, startY);
+                }
+                const { left, top } = element.getBoundingClientRect();
+                onDrag(x - startX, y - startY, x - left, y - top);
+                startX = x;
+                startY = y;
+            }
+        };
+        const click = (e) => {
+            if (isDragging) {
+                e.preventDefault();
+                e.stopPropagation();
+            }
+        };
+        const up = () => {
+            if (isDragging) {
+                onEnd?.();
+            }
+            unsub();
+        };
+        unsub = () => {
+            document.removeEventListener('pointermove', move);
+            document.removeEventListener('pointerup', up);
+            document.removeEventListener('pointerleave', up);
+            setTimeout(() => {
+                document.removeEventListener('click', click, true);
+            }, 10);
+        };
+        document.addEventListener('pointermove', move);
+        document.addEventListener('pointerup', up);
+        document.addEventListener('pointerleave', up);
+        document.addEventListener('click', click, true);
+    };
+    element.addEventListener('pointerdown', down);
+    return () => {
+        unsub();
+        element.removeEventListener('pointerdown', down);
+    };
+}

package/dist/event-emitter.d.ts

@@ -1,13 +1,19 @@
-export interface GeneralEventTypes {
-    [eventType: string]: unknown;
-}
+export type GeneralEventTypes = {
+    [EventName: string]: any[];
+};
+type EventListener<EventTypes extends GeneralEventTypes, EventName extends keyof EventTypes> = (...args: EventTypes[EventName]) => void;
+/** A simple event emitter that can be used to listen to and emit events. */
 declare class EventEmitter<EventTypes extends GeneralEventTypes> {
-    private eventTarget;
-    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, 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;
+    private listeners;
+    /** Subscribe to an event. Returns an unsubscribe function. */
+    on<EventName extends keyof EventTypes>(eventName: EventName, listener: EventListener<EventTypes, EventName>): () => void;
+    /** Subscribe to an event only once */
+    once<EventName extends keyof EventTypes>(eventName: EventName, listener: EventListener<EventTypes, EventName>): () => void;
+    /** Unsubscribe from an event */
+    un<EventName extends keyof EventTypes>(eventName: EventName, listener: EventListener<EventTypes, EventName>): void;
+    /** Clear all events */
+    unAll(): void;
+    /** Emit an event */
+    protected emit<EventName extends keyof EventTypes>(eventName: EventName, ...args: EventTypes[EventName]): void;
 }
 export default EventEmitter;

package/dist/event-emitter.js

@@ -1,25 +1,47 @@
+/** A simple event emitter that can be used to listen to and emit events. */
 class EventEmitter {
     constructor() {
-        this.eventTarget = new EventTarget();
+        this.listeners = {};
     }
-    emit(eventType, detail) {
-        const e = new CustomEvent(String(eventType), { detail });
-        this.eventTarget.dispatchEvent(e);
+    /** Subscribe to an event. Returns an unsubscribe function. */
+    on(eventName, listener) {
+        if (!this.listeners[eventName]) {
+            this.listeners[eventName] = new Set();
+        }
+        this.listeners[eventName].add(listener);
+        return () => this.un(eventName, listener);
     }
-    /** Subscribe to an event and return a function to unsubscribe */
-    on(eventType, callback, once) {
-        const handler = (e) => {
-            if (e instanceof CustomEvent) {
-                callback(e.detail);
+    /** Subscribe to an event only once */
+    once(eventName, listener) {
+        // The actual subscription
+        const unsubscribe = this.on(eventName, listener);
+        // Another subscription that will unsubscribe the actual subscription and itself after the first event
+        const unsubscribeOnce = this.on(eventName, () => {
+            unsubscribe();
+            unsubscribeOnce();
+        });
+        return unsubscribe;
+    }
+    /** Unsubscribe from an event */
+    un(eventName, listener) {
+        if (this.listeners[eventName]) {
+            if (listener) {
+                this.listeners[eventName].delete(listener);
+            }
+            else {
+                delete this.listeners[eventName];
             }
-        };
-        const eventName = String(eventType);
-        this.eventTarget.addEventListener(eventName, handler, { once });
-        return () => this.eventTarget.removeEventListener(eventName, handler);
+        }
+    }
+    /** Clear all events */
+    unAll() {
+        this.listeners = {};
     }
-    /** Subscribe to an event once and return a function to unsubscribe */
-    once(eventType, callback) {
-        return this.on(eventType, callback, true);
+    /** Emit an event */
+    emit(eventName, ...args) {
+        if (this.listeners[eventName]) {
+            this.listeners[eventName].forEach((listener) => listener(...args));
+        }
     }
 }
 export default EventEmitter;

package/dist/fetcher.d.ts

@@ -1,4 +1,7 @@
-declare class Fetcher {
-    load(url: string): Promise<ArrayBuffer>;
-}
+declare function fetchArrayBuffer(url: string): Promise<ArrayBuffer>;
+declare function fetchBlob(url: string): Promise<Blob>;
+declare const Fetcher: {
+    fetchArrayBuffer: typeof fetchArrayBuffer;
+    fetchBlob: typeof fetchBlob;
+};
 export default Fetcher;

package/dist/fetcher.js

@@ -1,17 +1,11 @@
-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 function fetchArrayBuffer(url) {
+    return fetch(url).then((response) => response.arrayBuffer());
+}
+async function fetchBlob(url) {
+    return fetch(url).then((response) => response.blob());
 }
+const Fetcher = {
+    fetchArrayBuffer,
+    fetchBlob,
+};
 export default Fetcher;

package/dist/player.d.ts

@@ -1,25 +1,45 @@
-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;
     private isExternalMedia;
-    private hasPlayedOnce;
-    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;
+    private revokeSrc;
+    protected setSrc(url: string, blob?: Blob): 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;