wavesurfer.js 7.9.9 → 7.10.1

package/README.md

@@ -15,10 +15,9 @@
 3. [Plugins](#plugins)
 4. [CSS styling](#css-styling)
 5. [Frequent questions](#questions)
-6. [Upgrading from v6 to v7](#upgrading-from-v6-to-v7)
-7. [Development](#development)
-8. [Tests](#tests)
-9. [Feedback](#feedback)
+6. [Development](#development)
+7. [Tests](#tests)
+8. [Feedback](#feedback)
 
 ## Getting started
 
@@ -132,49 +131,6 @@ However, please keep in mind that this forum is dedicated to wavesurfer-specific
 Generally, wavesurfer.js doesn't aim to be a wrapper for all things Web Audio. It's just a player with a waveform visualization. It does allow connecting itself to a Web Audio graph by exporting its audio element (see <a href="https://wavesurfer.xyz/examples/?4436ec40a2ab943243755e659ae32196">this example</a>) but nothign more than that. Please don't expect wavesurfer to be able to cut, add effects, or process your audio in any way.
 </details>
 
-## Upgrading from v6 to v7
-
-Wavesurfer.js v7 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
-
-Most options, events, and methods are similar to those in previous versions.
-
-### Notable differences
- * HTML audio playback by default (used to be an opt-in via `backend: "MediaElement"`)
- * The Markers plugin is removed – you should use the Regions plugin with just a `startTime`.
- * No Microphone plugin – superseded by the new Record plugin with more features.
- * The Cursor plugin is replaced by the Hover plugin.
-
-### Removed options
- * `audioContext`, `closeAudioContext`, `audioScriptProcessor`
- * `autoCenterImmediately` – `autoCenter` is now always immediate unless the audio is playing
- * `backgroundColor`, `hideCursor` – this can be easily set via CSS
- * `mediaType` – you should instead pass an entire media element in the `media` option. [Example](https://wavesurfer.xyz/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.xyz/examples/?split-channels.js).
- * `drawingContextAttributes`, `maxCanvasWidth`, `forceDecode` – removed to reduce code complexity
- * `xhr` - please use `fetchParams` instead
- * `barMinHeight` - the minimum bar height is now 1 pixel by default
-
-### Removed methods
- * `getFilters`, `setFilter` – see the [Web Audio example](https://wavesurfer.xyz/examples/?webaudio.js)
- * `drawBuffer` – to redraw the waveform, use `setOptions` instead and pass new rendering options
- * `cancelAjax` – you can pass an [AbortSignal](https://developer.mozilla.org/en-US/docs/Web/API/AbortSignal) in `fetchParams`
- * `skipForward`, `skipBackward`, `setPlayEnd` – can be implemented using `setTime(time)`
- * `exportPCM` is replaced with `exportPeaks` which returns arrays of floats
- * `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.xyz/docs).
-
 ## Development
 
 To get started with development, follow these steps:

package/dist/__tests__/player.test.js

@@ -24,6 +24,19 @@ describe('Player', () => {
         player.pause();
         expect(media.pause).toHaveBeenCalled();
     }));
+    test('pause before play promise resolves does not reject', () => __awaiter(void 0, void 0, void 0, function* () {
+        const abort = new DOMException('interrupted', 'AbortError');
+        let rejectPlay = () => undefined;
+        const media = createMedia();
+        media.play = jest.fn(() => new Promise((_, reject) => {
+            rejectPlay = reject;
+        }));
+        const player = new Player({ media });
+        const promise = player.play();
+        player.pause();
+        rejectPlay(abort);
+        yield expect(promise).resolves.toBeUndefined();
+    }));
     test('volume and muted', () => {
         const media = createMedia();
         const player = new Player({ media });

package/dist/base-plugin.d.ts

@@ -9,6 +9,7 @@ export declare class BasePlugin<EventTypes extends BasePluginEvents, Options> ex
     protected wavesurfer?: WaveSurfer;
     protected subscriptions: (() => void)[];
     protected options: Options;
+    private isDestroyed;
     /** Create a plugin instance */
     constructor(options: Options);
     /** Called after this.wavesurfer is available */

package/dist/base-plugin.js

@@ -5,6 +5,7 @@ export class BasePlugin extends EventEmitter {
     constructor(options) {
         super();
         this.subscriptions = [];
+        this.isDestroyed = false;
         this.options = options;
     }
     /** Called after this.wavesurfer is available */
@@ -13,6 +14,11 @@ export class BasePlugin extends EventEmitter {
     }
     /** Do not call directly, only called by WavesSurfer internally */
     _init(wavesurfer) {
+        // Reset state if plugin was previously destroyed
+        if (this.isDestroyed) {
+            this.subscriptions = [];
+            this.isDestroyed = false;
+        }
         this.wavesurfer = wavesurfer;
         this.onInit();
     }
@@ -20,6 +26,9 @@ export class BasePlugin extends EventEmitter {
     destroy() {
         this.emit('destroy');
         this.subscriptions.forEach((unsubscribe) => unsubscribe());
+        this.subscriptions = [];
+        this.isDestroyed = true;
+        this.wavesurfer = undefined;
     }
 }
 export default BasePlugin;

package/dist/fft.d.ts

@@ -0,0 +1,54 @@
+/**
+ * FFT (Fast Fourier Transform) implementation
+ * Based on https://github.com/corbanbrook/dsp.js
+ *
+ * Centralized FFT functionality for spectrogram plugins
+ */
+export declare const ERB_A: number;
+export declare function hzToMel(hz: number): number;
+export declare function melToHz(mel: number): number;
+export declare function hzToLog(hz: number): number;
+export declare function logToHz(log: number): number;
+export declare function hzToBark(hz: number): number;
+export declare function barkToHz(bark: number): number;
+export declare function hzToErb(hz: number): number;
+export declare function erbToHz(erb: number): number;
+export declare function hzToScale(hz: number, scale: 'linear' | 'logarithmic' | 'mel' | 'bark' | 'erb'): number;
+export declare function scaleToHz(scale: number, scaleType: 'linear' | 'logarithmic' | 'mel' | 'bark' | 'erb'): number;
+export declare function applyFilterBank(fftPoints: Float32Array, filterBank: number[][]): Float32Array;
+export declare function createFilterBankForScale(scale: 'linear' | 'logarithmic' | 'mel' | 'bark' | 'erb', numFilters: number, fftSamples: number, sampleRate: number): number[][] | null;
+export declare const COLOR_MAPS: {
+    gray: () => number[][];
+    igray: () => number[][];
+    roseus: () => number[][];
+};
+/**
+ * Set up color map based on options
+ */
+export declare function setupColorMap(colorMap?: number[][] | 'gray' | 'igray' | 'roseus'): number[][];
+/**
+ * Format frequency value for display
+ */
+export declare function freqType(freq: number): string;
+/**
+ * Get frequency unit for display
+ */
+export declare function unitType(freq: number): string;
+/**
+ * Get frequency value for label at given index
+ */
+export declare function getLabelFrequency(index: number, labelIndex: number, frequencyMin: number, frequencyMax: number, scale: 'linear' | 'logarithmic' | 'mel' | 'bark' | 'erb'): number;
+/**
+ * Create wrapper click handler for relative position calculation
+ */
+export declare function createWrapperClickHandler(wrapper: HTMLElement, emit: (event: string, ...args: any[]) => void): (e: MouseEvent) => void;
+/**
+ * Calculate FFT - Based on https://github.com/corbanbrook/dsp.js
+ */
+declare function FFT(bufferSize: number, sampleRate: number, windowFunc: string, alpha: number): void;
+export declare class FFT {
+    constructor(bufferSize: number, sampleRate: number, windowFunc: string, alpha: number);
+    calculateSpectrum(buffer: Float32Array): Float32Array;
+}
+export { FFT };
+export default FFT;