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

package/dist/renderer.js

@@ -1,3 +1,4 @@
+import { makeDraggable } from './draggable.js';
 import EventEmitter from './event-emitter.js';
 class Renderer extends EventEmitter {
     constructor(options) {
@@ -53,25 +54,15 @@ class Renderer extends EventEmitter {
         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');
@@ -185,29 +176,63 @@ class Renderer extends EventEmitter {
         });
         return gradient;
     }
-    renderSingleCanvas(channelData, options, width, start, end, canvasContainer, progressContainer) {
+    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 height = options.height || 0;
-        const barWidth = options.barWidth != null && !isNaN(options.barWidth) ? options.barWidth * pixelRatio : 1;
-        const barGap = options.barGap != null && !isNaN(options.barGap)
-            ? options.barGap * pixelRatio
-            : options.barWidth
-                ? barWidth / 2
-                : 0;
-        const barRadius = options.barRadius || 0;
-        const barScale = options.barHeight || 1;
-        const isMono = channelData.length === 1;
-        const leftChannel = channelData[0];
-        const rightChannel = isMono ? leftChannel : channelData[1];
-        const useNegative = isMono && rightChannel.some((v) => v < 0);
-        const length = leftChannel.length;
-        const barCount = Math.floor(width / (barWidth + barGap));
-        const barIndexScale = barCount / length;
+        const { width, height } = ctx.canvas;
         const halfHeight = height / 2;
+        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;
+            }
+        }
+        const vScale = (halfHeight / max) * barHeight;
+        ctx.beginPath();
         let prevX = 0;
-        let prevLeft = 0;
-        let prevRight = 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;
+            }
+            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`;
@@ -217,34 +242,7 @@ class Renderer extends EventEmitter {
         const ctx = canvas.getContext('2d', {
             desynchronized: true,
         });
-        ctx.beginPath();
-        ctx.fillStyle = this.convertColorValues(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 * barScale);
-                const rightBarHeight = Math.round(prevRight * halfHeight * barScale);
-                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;
-            }
-        }
-        ctx.fill();
-        ctx.closePath();
+        this.renderBars(channelData.map((channel) => channel.slice(start, end)), options, ctx);
         // Draw a progress canvas
         const progressCanvas = canvas.cloneNode();
         progressContainer.appendChild(progressCanvas);

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;

package/dist/src/player.js

@@ -0,0 +1,114 @@
+import EventEmitter from './event-emitter.js';
+class Player extends EventEmitter {
+    media;
+    isExternalMedia = false;
+    constructor(options) {
+        super();
+        if (options.media) {
+            this.media = options.media;
+            this.isExternalMedia = true;
+        }
+        else {
+            this.media = document.createElement('audio');
+        }
+        // Autoplay
+        if (options.autoplay) {
+            this.media.autoplay = true;
+        }
+        // Speed
+        if (options.playbackRate != null) {
+            this.media.playbackRate = options.playbackRate;
+        }
+    }
+    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 });
+    }
+    revokeSrc() {
+        const src = this.media.currentSrc || this.media.src || '';
+        if (src.startsWith('blob:')) {
+            URL.revokeObjectURL(this.media.currentSrc);
+        }
+    }
+    setSrc(url, arrayBuffer) {
+        const src = this.media.currentSrc || this.media.src || '';
+        if (src === url)
+            return;
+        this.revokeSrc();
+        const newSrc = arrayBuffer ? URL.createObjectURL(new Blob([arrayBuffer], { type: 'audio/wav' })) : url;
+        this.media.src = newSrc;
+    }
+    destroy() {
+        this.media.pause();
+        this.revokeSrc();
+        if (!this.isExternalMedia) {
+            this.media.remove();
+        }
+    }
+    /** Start playing the audio */
+    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;
+    }
+    /** Jumpt to a specific time in the audio (in seconds) */
+    setTime(time) {
+        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/src/plugins/envelope.d.ts

@@ -0,0 +1,71 @@
+/**
+ * Envelope is a visual UI for controlling the audio volume and add fade-in and fade-out effects.
+ */
+import BasePlugin from '../base-plugin.js';
+export type EnvelopePluginOptions = {
+    fadeInStart?: number;
+    fadeInEnd?: number;
+    fadeOutStart?: number;
+    fadeOutEnd?: number;
+    volume?: number;
+    lineWidth?: string;
+    lineColor?: string;
+    dragPointSize?: number;
+    dragPointFill?: string;
+    dragPointStroke?: string;
+};
+declare const defaultOptions: {
+    fadeInStart: number;
+    fadeOutEnd: number;
+    fadeInEnd: number;
+    fadeOutStart: number;
+    lineWidth: number;
+    lineColor: string;
+    dragPointSize: number;
+    dragPointFill: string;
+    dragPointStroke: string;
+};
+type Options = EnvelopePluginOptions & typeof defaultOptions;
+export type EnvelopePluginEvents = {
+    'fade-in-change': [time: number];
+    'fade-out-change': [time: number];
+    'volume-change': [volume: number];
+};
+declare class EnvelopePlugin extends BasePlugin<EnvelopePluginEvents, EnvelopePluginOptions> {
+    protected options: Options;
+    private polyline;
+    private audioContext;
+    private gainNode;
+    private volume;
+    private isFadingIn;
+    private isFadingOut;
+    private readonly naturalVolumeExponent;
+    constructor(options: EnvelopePluginOptions);
+    static create(options: EnvelopePluginOptions): EnvelopePlugin;
+    destroy(): void;
+    /** Called by wavesurfer, don't call manually */
+    onInit(): void;
+    private initSvg;
+    private renderPolyline;
+    private initWebAudio;
+    private invertNaturalVolume;
+    private naturalVolume;
+    private setGainValue;
+    private initFadeEffects;
+    /** Get the current audio volume */
+    getCurrentVolume(): number;
+    /**
+     * Set the fade-in start time.
+     * @param time The time (in seconds) to set the fade-in start time to
+     * @param moveFadeInEnd Whether to move the drag point to the new time (default: false)
+     */
+    setStartTime(time: number, moveFadeInEnd?: boolean): void;
+    /** Set the fade-in end time.
+     * @param time The time (in seconds) to set the fade-in end time to
+     * @param moveFadeOutStart Whether to move the drag point to the new time (default: false)
+     */
+    setEndTime(time: number, moveFadeOutStart?: boolean): void;
+    /** Set the volume of the audio */
+    setVolume(volume: number): void;
+}
+export default EnvelopePlugin;