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

package/dist/renderer.js

@@ -1,18 +1,20 @@
+import { makeDraggable } from './draggable.js';
 import EventEmitter from './event-emitter.js';
 class Renderer extends EventEmitter {
-    constructor(container, options) {
+    constructor(options) {
         super();
-        this.options = {
-            height: 0,
-        };
-        this.timeout = null;
+        this.timeouts = [];
         this.isScrolling = false;
         this.audioData = null;
         this.resizeObserver = null;
         this.isDragging = false;
-        this.options = { ...options };
-        if (typeof container === 'string') {
-            container = document.querySelector(container);
+        this.options = options;
+        let container;
+        if (typeof options.container === 'string') {
+            container = document.querySelector(options.container);
+        }
+        else if (options.container instanceof HTMLElement) {
+            container = options.container;
         }
         if (!container) {
             throw new Error('Container not found');
@@ -45,31 +47,22 @@ class Renderer extends EventEmitter {
             this.emit('scroll', startX, endX);
         });
         // Re-render the waveform on container resize
+        const delay = this.createDelay(100);
         this.resizeObserver = new ResizeObserver(() => {
-            this.delay(() => this.reRender(), 100);
+            delay(() => this.reRender());
         });
         this.resizeObserver.observe(this.scrollContainer);
     }
     initDrag() {
-        this.wrapper.addEventListener('mousedown', (e) => {
-            const minDx = 5;
-            const x = e.clientX;
-            const move = (e) => {
-                const diff = Math.abs(e.clientX - x);
-                if (diff >= minDx) {
-                    this.isDragging = true;
-                    const rect = this.wrapper.getBoundingClientRect();
-                    this.emit('drag', Math.max(0, Math.min(1, (e.clientX - rect.left) / rect.width)));
-                }
-            };
-            const up = () => {
-                document.removeEventListener('mousemove', move);
-                document.removeEventListener('mouseup', up);
-                this.isDragging = false;
-            };
-            document.addEventListener('mousemove', move);
-            document.addEventListener('mouseup', up);
-        });
+        makeDraggable(this.wrapper, 
+        // On drag
+        (_, __, x) => {
+            this.emit('drag', Math.max(0, Math.min(1, x / this.wrapper.clientWidth)));
+        }, 
+        // On start drag
+        () => (this.isDragging = true), 
+        // On end drag
+        () => (this.isDragging = false));
     }
     initHtml() {
         const div = document.createElement('div');
@@ -99,15 +92,16 @@ class Renderer extends EventEmitter {
           z-index: 2;
         }
         :host .canvases {
+          min-height: ${this.options.height}px;
+        }
+        :host .canvases > div {
           position: relative;
-          height: ${this.options.height}px;
         }
         :host canvas {
           display: block;
           position: absolute;
           top: 0;
           image-rendering: pixelated;
-          height: ${this.options.height}px;
         }
         :host .progress {
           pointer-events: none;
@@ -119,6 +113,9 @@ class Renderer extends EventEmitter {
           height: 100%;
           overflow: hidden;
         }
+        :host .progress > div {
+          position: relative;
+        }
         :host .cursor {
           pointer-events: none;
           position: absolute;
@@ -127,8 +124,6 @@ class Renderer extends EventEmitter {
           left: 0;
           height: 100%;
           border-radius: 2px;
-          width: ${this.options.cursorWidth}px;
-          background-color: ${this.options.cursorColor || this.options.progressColor};
         }
       </style>
 
@@ -157,116 +152,160 @@ class Renderer extends EventEmitter {
         this.container.remove();
         this.resizeObserver?.disconnect();
     }
-    delay(fn, delayMs = 10) {
-        if (this.timeout) {
-            clearTimeout(this.timeout);
-        }
-        return new Promise((resolve) => {
-            this.timeout = setTimeout(() => {
-                resolve(fn());
-            }, delayMs);
+    createDelay(delayMs = 10) {
+        const context = {};
+        this.timeouts.push(context);
+        return (callback) => {
+            context.timeout && clearTimeout(context.timeout);
+            context.timeout = setTimeout(callback, delayMs);
+        };
+    }
+    // Convert array of color values to linear gradient
+    convertColorValues(color) {
+        if (!Array.isArray(color))
+            return color || '';
+        if (color.length < 2)
+            return color.length === 1 ? color[0] : '';
+        const canvasElement = document.createElement('canvas');
+        const ctx = canvasElement.getContext('2d');
+        const gradient = ctx.createLinearGradient(0, 0, 0, canvasElement.height);
+        const colorStopPercentage = 1 / (color.length - 1);
+        color.forEach((color, index) => {
+            const offset = index * colorStopPercentage;
+            gradient.addColorStop(offset, color);
         });
+        return gradient;
     }
-    async renderPeaks(audioData, width, height, pixelRatio) {
-        const barWidth = this.options.barWidth != null && !isNaN(this.options.barWidth) ? this.options.barWidth * pixelRatio : 1;
-        const barGap = this.options.barGap != null && !isNaN(this.options.barGap)
-            ? this.options.barGap * pixelRatio
-            : this.options.barWidth
-                ? barWidth / 2
-                : 0;
-        const barRadius = this.options.barRadius || 0;
-        const scaleY = this.options.barHeight || 1;
-        const leftChannel = audioData.getChannelData(0);
-        const len = leftChannel.length;
-        const barCount = Math.floor(width / (barWidth + barGap));
-        const barIndexScale = barCount / len;
+    renderBars(channelData, options, ctx) {
+        ctx.fillStyle = this.convertColorValues(options.waveColor);
+        // Custom rendering function
+        if (options.renderFunction) {
+            options.renderFunction(channelData, ctx);
+            return;
+        }
+        const topChannel = channelData[0];
+        const bottomChannel = channelData[1] || channelData[0];
+        const length = topChannel.length;
+        const pixelRatio = window.devicePixelRatio || 1;
+        const { width, height } = ctx.canvas;
         const halfHeight = height / 2;
-        const isMono = audioData.numberOfChannels === 1;
-        const rightChannel = isMono ? leftChannel : audioData.getChannelData(1);
-        const useNegative = isMono && rightChannel.some((v) => v < 0);
-        const draw = (start, end) => {
-            let prevX = 0;
-            let prevLeft = 0;
-            let prevRight = 0;
-            const canvas = document.createElement('canvas');
-            canvas.width = Math.round((width * (end - start)) / len);
-            canvas.height = this.options.height;
-            canvas.style.width = `${Math.floor(canvas.width / pixelRatio)}px`;
-            canvas.style.height = `${this.options.height}px`;
-            canvas.style.left = `${Math.floor((start * width) / pixelRatio / len)}px`;
-            this.canvasWrapper.appendChild(canvas);
-            const ctx = canvas.getContext('2d', {
-                desynchronized: true,
-            });
-            ctx.beginPath();
-            ctx.fillStyle = this.options.waveColor ?? '';
-            // Firefox shim until 2023.04.11
-            if (!ctx.roundRect)
-                ctx.roundRect = ctx.fillRect;
-            for (let i = start; i < end; i++) {
-                const barIndex = Math.round((i - start) * barIndexScale);
-                if (barIndex > prevX) {
-                    const leftBarHeight = Math.round(prevLeft * halfHeight * scaleY);
-                    const rightBarHeight = Math.round(prevRight * halfHeight * scaleY);
-                    ctx.roundRect(prevX * (barWidth + barGap), halfHeight - leftBarHeight, barWidth, leftBarHeight + (rightBarHeight || 1), barRadius);
-                    prevX = barIndex;
-                    prevLeft = 0;
-                    prevRight = 0;
-                }
-                const leftValue = useNegative ? leftChannel[i] : Math.abs(leftChannel[i]);
-                const rightValue = useNegative ? rightChannel[i] : Math.abs(rightChannel[i]);
-                if (leftValue > prevLeft) {
-                    prevLeft = leftValue;
-                }
-                // If stereo, both channels are drawn as max values
-                // If mono with negative values, the bottom channel will be the min negative values
-                if (useNegative ? rightValue < -prevRight : rightValue > prevRight) {
-                    prevRight = rightValue < 0 ? -rightValue : rightValue;
-                }
+        const barHeight = options.barHeight || 1;
+        const barWidth = options.barWidth ? options.barWidth * pixelRatio : 1;
+        const barGap = options.barGap ? options.barGap * pixelRatio : options.barWidth ? barWidth / 2 : 0;
+        const barRadius = options.barRadius || 0;
+        const barIndexScale = width / (barWidth + barGap) / length;
+        let max = 1;
+        if (options.normalize) {
+            max = 0;
+            for (let i = 0; i < length; i++) {
+                const value = Math.abs(topChannel[i]);
+                if (value > max)
+                    max = value;
             }
-            ctx.fill();
-            ctx.closePath();
-            // Draw a progress canvas
-            const progressCanvas = canvas.cloneNode();
-            this.progressWrapper.appendChild(progressCanvas);
-            const progressCtx = progressCanvas.getContext('2d', {
-                desynchronized: true,
-            });
-            if (canvas.width > 0 && canvas.height > 0) {
-                progressCtx.drawImage(canvas, 0, 0);
+        }
+        const vScale = (halfHeight / max) * barHeight;
+        ctx.beginPath();
+        let prevX = 0;
+        let maxTop = 0;
+        let maxBottom = 0;
+        for (let i = 0; i <= length; i++) {
+            const x = Math.round(i * barIndexScale);
+            if (x > prevX) {
+                const leftBarHeight = Math.round(maxTop * vScale);
+                const rightBarHeight = Math.round(maxBottom * vScale);
+                ctx.roundRect(prevX * (barWidth + barGap), halfHeight - leftBarHeight, barWidth, leftBarHeight + rightBarHeight || 1, barRadius);
+                prevX = x;
+                maxTop = 0;
+                maxBottom = 0;
             }
-            // Set the composition method to draw only where the waveform is drawn
-            progressCtx.globalCompositeOperation = 'source-in';
-            progressCtx.fillStyle = this.options.progressColor ?? '';
-            // This rectangle acts as a mask thanks to the composition method
-            progressCtx.fillRect(0, 0, canvas.width, canvas.height);
-        };
-        // Clear the canvas
-        this.canvasWrapper.innerHTML = '';
-        this.progressWrapper.innerHTML = '';
+            const magnitudeTop = Math.abs(topChannel[i] || 0);
+            const magnitudeBottom = Math.abs(bottomChannel[i] || 0);
+            if (magnitudeTop > maxTop)
+                maxTop = magnitudeTop;
+            if (magnitudeBottom > maxBottom)
+                maxBottom = magnitudeBottom;
+        }
+        ctx.fill();
+        ctx.closePath();
+    }
+    renderSingleCanvas(channelData, options, width, start, end, canvasContainer, progressContainer) {
+        const pixelRatio = window.devicePixelRatio || 1;
+        const height = options.height || 0;
+        const canvas = document.createElement('canvas');
+        const length = channelData[0].length;
+        canvas.width = Math.round((width * (end - start)) / length);
+        canvas.height = height;
+        canvas.style.width = `${Math.floor(canvas.width / pixelRatio)}px`;
+        canvas.style.height = `${options.height}px`;
+        canvas.style.left = `${Math.floor((start * width) / pixelRatio / length)}px`;
+        canvasContainer.appendChild(canvas);
+        const ctx = canvas.getContext('2d', {
+            desynchronized: true,
+        });
+        this.renderBars(channelData.map((channel) => channel.slice(start, end)), options, ctx);
+        // Draw a progress canvas
+        const progressCanvas = canvas.cloneNode();
+        progressContainer.appendChild(progressCanvas);
+        const progressCtx = progressCanvas.getContext('2d', {
+            desynchronized: true,
+        });
+        if (canvas.width > 0 && canvas.height > 0) {
+            progressCtx.drawImage(canvas, 0, 0);
+        }
+        // Set the composition method to draw only where the waveform is drawn
+        progressCtx.globalCompositeOperation = 'source-in';
+        progressCtx.fillStyle = this.convertColorValues(options.progressColor);
+        // This rectangle acts as a mask thanks to the composition method
+        progressCtx.fillRect(0, 0, canvas.width, canvas.height);
+    }
+    renderWaveform(channelData, options, width) {
+        // A container for canvases
+        const canvasContainer = document.createElement('div');
+        canvasContainer.style.height = `${options.height}px`;
+        this.canvasWrapper.appendChild(canvasContainer);
+        // A container for progress canvases
+        const progressContainer = canvasContainer.cloneNode();
+        this.progressWrapper.appendChild(progressContainer);
         // Determine the currently visible part of the waveform
         const { scrollLeft, scrollWidth, clientWidth } = this.scrollContainer;
+        const len = channelData[0].length;
         const scale = len / scrollWidth;
-        let viewportWidth = Math.min(Renderer.MAX_CANVAS_WIDTH, clientWidth);
-        viewportWidth -= viewportWidth % ((barWidth + barGap) / pixelRatio);
+        const viewportWidth = Math.min(Renderer.MAX_CANVAS_WIDTH, clientWidth);
         const start = Math.floor(Math.abs(scrollLeft) * scale);
         const end = Math.ceil(start + viewportWidth * scale);
-        // Draw the visible portion of the waveform
-        draw(start, end);
-        // Draw the rest of the waveform with a timeout for better performance
-        const step = end - start;
-        for (let i = end; i < len; i += step) {
-            await this.delay(() => {
-                draw(i, Math.min(len, i + step));
-            });
-        }
-        for (let i = start - 1; i >= 0; i -= step) {
-            await this.delay(() => {
-                draw(Math.max(0, i - step), i);
-            });
+        const viewportLen = end - start;
+        // Draw a portion of the waveform from start peak to end peak
+        const draw = (start, end) => {
+            this.renderSingleCanvas(channelData, options, width, Math.max(0, start), Math.min(end, len), canvasContainer, progressContainer);
+        };
+        // Draw the waveform in viewport chunks, each with a delay
+        const headDelay = this.createDelay();
+        const tailDelay = this.createDelay();
+        const renderHead = (fromIndex, toIndex) => {
+            draw(fromIndex, toIndex);
+            if (fromIndex > 0) {
+                headDelay(() => {
+                    renderHead(fromIndex - viewportLen, toIndex - viewportLen);
+                });
+            }
+        };
+        const renderTail = (fromIndex, toIndex) => {
+            draw(fromIndex, toIndex);
+            if (toIndex < len) {
+                tailDelay(() => {
+                    renderTail(fromIndex + viewportLen, toIndex + viewportLen);
+                });
+            }
+        };
+        renderHead(start, end);
+        if (end < len) {
+            renderTail(end, end + viewportLen);
         }
     }
     render(audioData) {
+        // Clear previous timeouts
+        this.timeouts.forEach((context) => context.timeout && clearTimeout(context.timeout));
+        this.timeouts = [];
         // Determine the width of the waveform
         const pixelRatio = window.devicePixelRatio || 1;
         const parentWidth = this.scrollContainer.clientWidth;
@@ -276,7 +315,6 @@ class Renderer extends EventEmitter {
         const useParentWidth = this.options.fillParent && !this.isScrolling;
         // Width and height of the waveform in pixels
         const width = (useParentWidth ? parentWidth : scrollWidth) * pixelRatio;
-        const { height } = this.options;
         // Set the width of the wrapper
         this.wrapper.style.width = useParentWidth ? '100%' : `${scrollWidth}px`;
         // Set additional styles
@@ -284,9 +322,24 @@ class Renderer extends EventEmitter {
         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.style.height = `${this.options.height}px`;
+        // Clear the canvases
+        this.canvasWrapper.innerHTML = '';
+        this.progressWrapper.innerHTML = '';
         // Render the waveform
-        this.renderPeaks(audioData, width, height, pixelRatio);
+        if (this.options.splitChannels) {
+            // Render a waveform for each channel
+            for (let i = 0; i < audioData.numberOfChannels; i++) {
+                const options = { ...this.options, ...this.options.splitChannels[i] };
+                this.renderWaveform([audioData.getChannelData(i)], options, width);
+            }
+        }
+        else {
+            // Render a single waveform for the first two channels (left and right)
+            const channels = [audioData.getChannelData(0)];
+            if (audioData.numberOfChannels > 1)
+                channels.push(audioData.getChannelData(1));
+            this.renderWaveform(channels, this.options, width);
+        }
         this.audioData = audioData;
         this.emit('render');
     }

package/dist/src/base-plugin.d.ts

@@ -0,0 +1,13 @@
+import EventEmitter, { type GeneralEventTypes } from './event-emitter.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 subscriptions: (() => void)[];
+    protected options: Options;
+    constructor(options: Options);
+    onInit(): void;
+    init(wavesurfer: WaveSurfer): void;
+    destroy(): void;
+}
+export default BasePlugin;

package/dist/src/base-plugin.js

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

package/dist/src/decoder.d.ts

@@ -0,0 +1,9 @@
+/** 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: Float32Array[] | Array<number[]>, duration: number): AudioBuffer;
+declare const Decoder: {
+    decode: typeof decode;
+    createBuffer: typeof createBuffer;
+};
+export default Decoder;

package/dist/src/decoder.js

@@ -0,0 +1,48 @@
+/** 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;
+        }
+        for (const channel of channelData) {
+            for (let i = 0; i < length; i++) {
+                channel[i] /= max;
+            }
+        }
+    }
+    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/src/event-emitter.d.ts

@@ -0,0 +1,19 @@
+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 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/src/event-emitter.js

@@ -0,0 +1,45 @@
+/** A simple event emitter that can be used to listen to and emit events. */
+class EventEmitter {
+    listeners = {};
+    /** 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 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];
+            }
+        }
+    }
+    /** Clear all events */
+    unAll() {
+        this.listeners = {};
+    }
+    /** Emit an event */
+    emit(eventName, ...args) {
+        if (this.listeners[eventName]) {
+            this.listeners[eventName].forEach((listener) => listener(...args));
+        }
+    }
+}
+export default EventEmitter;

package/dist/src/fetcher.d.ts

@@ -0,0 +1,5 @@
+declare function fetchArrayBuffer(url: string): Promise<ArrayBuffer>;
+declare const Fetcher: {
+    fetchArrayBuffer: typeof fetchArrayBuffer;
+};
+export default Fetcher;

package/dist/src/fetcher.js

@@ -0,0 +1,7 @@
+async function fetchArrayBuffer(url) {
+    return fetch(url).then((response) => response.arrayBuffer());
+}
+const Fetcher = {
+    fetchArrayBuffer,
+};
+export default Fetcher;

package/dist/src/player.d.ts

@@ -0,0 +1,45 @@
+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;
+    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, arrayBuffer?: ArrayBuffer): void;
+    destroy(): void;
+    /** Start playing the audio */
+    play(): Promise<void>;
+    /** Pause the audio */
+    pause(): void;
+    /** Check if the audio is playing */
+    isPlaying(): boolean;
+    /** 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;