wavesurfer.js 7.0.0-alpha.43 → 7.0.0-alpha.44

package/dist/plugins/spectrogram-fft.mjs

@@ -0,0 +1,175 @@
+// @ts-nocheck
+/**
+ * Calculate FFT - Based on https://github.com/corbanbrook/dsp.js
+ *
+ * @param {Number} bufferSize Buffer size
+ * @param {Number} sampleRate Sample rate
+ * @param {Function} windowFunc Window function
+ * @param {Number} alpha Alpha channel
+ */
+class FFT {
+    constructor(bufferSize, sampleRate, windowFunc, alpha) {
+        this.bufferSize = bufferSize;
+        this.sampleRate = sampleRate;
+        this.bandwidth = (2 / bufferSize) * (sampleRate / 2);
+        this.sinTable = new Float32Array(bufferSize);
+        this.cosTable = new Float32Array(bufferSize);
+        this.windowValues = new Float32Array(bufferSize);
+        this.reverseTable = new Uint32Array(bufferSize);
+        this.peakBand = 0;
+        this.peak = 0;
+        var i;
+        switch (windowFunc) {
+            case 'bartlett':
+                for (i = 0; i < bufferSize; i++) {
+                    this.windowValues[i] =
+                        (2 / (bufferSize - 1)) *
+                            ((bufferSize - 1) / 2 - Math.abs(i - (bufferSize - 1) / 2));
+                }
+                break;
+            case 'bartlettHann':
+                for (i = 0; i < bufferSize; i++) {
+                    this.windowValues[i] =
+                        0.62 -
+                            0.48 * Math.abs(i / (bufferSize - 1) - 0.5) -
+                            0.38 * Math.cos((Math.PI * 2 * i) / (bufferSize - 1));
+                }
+                break;
+            case 'blackman':
+                alpha = alpha || 0.16;
+                for (i = 0; i < bufferSize; i++) {
+                    this.windowValues[i] =
+                        (1 - alpha) / 2 -
+                            0.5 * Math.cos((Math.PI * 2 * i) / (bufferSize - 1)) +
+                            (alpha / 2) *
+                                Math.cos((4 * Math.PI * i) / (bufferSize - 1));
+                }
+                break;
+            case 'cosine':
+                for (i = 0; i < bufferSize; i++) {
+                    this.windowValues[i] = Math.cos((Math.PI * i) / (bufferSize - 1) - Math.PI / 2);
+                }
+                break;
+            case 'gauss':
+                alpha = alpha || 0.25;
+                for (i = 0; i < bufferSize; i++) {
+                    this.windowValues[i] = Math.pow(Math.E, -0.5 *
+                        Math.pow((i - (bufferSize - 1) / 2) /
+                            ((alpha * (bufferSize - 1)) / 2), 2));
+                }
+                break;
+            case 'hamming':
+                for (i = 0; i < bufferSize; i++) {
+                    this.windowValues[i] =
+                        0.54 -
+                            0.46 * Math.cos((Math.PI * 2 * i) / (bufferSize - 1));
+                }
+                break;
+            case 'hann':
+            case undefined:
+                for (i = 0; i < bufferSize; i++) {
+                    this.windowValues[i] =
+                        0.5 * (1 - Math.cos((Math.PI * 2 * i) / (bufferSize - 1)));
+                }
+                break;
+            case 'lanczoz':
+                for (i = 0; i < bufferSize; i++) {
+                    this.windowValues[i] =
+                        Math.sin(Math.PI * ((2 * i) / (bufferSize - 1) - 1)) /
+                            (Math.PI * ((2 * i) / (bufferSize - 1) - 1));
+                }
+                break;
+            case 'rectangular':
+                for (i = 0; i < bufferSize; i++) {
+                    this.windowValues[i] = 1;
+                }
+                break;
+            case 'triangular':
+                for (i = 0; i < bufferSize; i++) {
+                    this.windowValues[i] =
+                        (2 / bufferSize) *
+                            (bufferSize / 2 - Math.abs(i - (bufferSize - 1) / 2));
+                }
+                break;
+            default:
+                throw Error("No such window function '" + windowFunc + "'");
+        }
+        var limit = 1;
+        var bit = bufferSize >> 1;
+        var i;
+        while (limit < bufferSize) {
+            for (i = 0; i < limit; i++) {
+                this.reverseTable[i + limit] = this.reverseTable[i] + bit;
+            }
+            limit = limit << 1;
+            bit = bit >> 1;
+        }
+        for (i = 0; i < bufferSize; i++) {
+            this.sinTable[i] = Math.sin(-Math.PI / i);
+            this.cosTable[i] = Math.cos(-Math.PI / i);
+        }
+    }
+    calculateSpectrum(buffer) {
+        // Locally scope variables for speed up
+        var bufferSize = this.bufferSize, cosTable = this.cosTable, sinTable = this.sinTable, reverseTable = this.reverseTable, real = new Float32Array(bufferSize), imag = new Float32Array(bufferSize), bSi = 2 / this.bufferSize, sqrt = Math.sqrt, rval, ival, mag, spectrum = new Float32Array(bufferSize / 2);
+        var k = Math.floor(Math.log(bufferSize) / Math.LN2);
+        if (Math.pow(2, k) !== bufferSize) {
+            throw 'Invalid buffer size, must be a power of 2.';
+        }
+        if (bufferSize !== buffer.length) {
+            throw 'Supplied buffer is not the same size as defined FFT. FFT Size: ' +
+                bufferSize +
+                ' Buffer Size: ' +
+                buffer.length;
+        }
+        var halfSize = 1, phaseShiftStepReal, phaseShiftStepImag, currentPhaseShiftReal, currentPhaseShiftImag, off, tr, ti, tmpReal;
+        for (var i = 0; i < bufferSize; i++) {
+            real[i] =
+                buffer[reverseTable[i]] * this.windowValues[reverseTable[i]];
+            imag[i] = 0;
+        }
+        while (halfSize < bufferSize) {
+            phaseShiftStepReal = cosTable[halfSize];
+            phaseShiftStepImag = sinTable[halfSize];
+            currentPhaseShiftReal = 1;
+            currentPhaseShiftImag = 0;
+            for (var fftStep = 0; fftStep < halfSize; fftStep++) {
+                var i = fftStep;
+                while (i < bufferSize) {
+                    off = i + halfSize;
+                    tr =
+                        currentPhaseShiftReal * real[off] -
+                            currentPhaseShiftImag * imag[off];
+                    ti =
+                        currentPhaseShiftReal * imag[off] +
+                            currentPhaseShiftImag * real[off];
+                    real[off] = real[i] - tr;
+                    imag[off] = imag[i] - ti;
+                    real[i] += tr;
+                    imag[i] += ti;
+                    i += halfSize << 1;
+                }
+                tmpReal = currentPhaseShiftReal;
+                currentPhaseShiftReal =
+                    tmpReal * phaseShiftStepReal -
+                        currentPhaseShiftImag * phaseShiftStepImag;
+                currentPhaseShiftImag =
+                    tmpReal * phaseShiftStepImag +
+                        currentPhaseShiftImag * phaseShiftStepReal;
+            }
+            halfSize = halfSize << 1;
+        }
+        for (var i = 0, N = bufferSize / 2; i < N; i++) {
+            rval = real[i];
+            ival = imag[i];
+            mag = bSi * sqrt(rval * rval + ival * ival);
+            if (mag > this.peak) {
+                this.peakBand = i;
+                this.peak = mag;
+            }
+            spectrum[i] = mag;
+        }
+        return spectrum;
+    }
+}
+export default FFT;

package/dist/plugins/spectrogram.d.mts

@@ -0,0 +1,177 @@
+/**
+ * @typedef {Object} SpectrogramPluginParams
+ * @property {string|HTMLElement} container Selector of element or element in
+ * which to render
+ * @property {number} fftSamples=512 Number of samples to fetch to FFT. Must be
+ * a power of 2.
+ * @property {boolean} splitChannels=false Render with separate spectrograms for
+ * the channels of the audio
+ * @property {number} height=fftSamples/2 Height of the spectrogram view in CSS
+ * pixels
+ * @property {boolean} labels Set to true to display frequency labels.
+ * @property {number} noverlap Size of the overlapping window. Must be <
+ * fftSamples. Auto deduced from canvas size by default.
+ * @property {string} windowFunc='hann' The window function to be used. One of
+ * these: `'bartlett'`, `'bartlettHann'`, `'blackman'`, `'cosine'`, `'gauss'`,
+ * `'hamming'`, `'hann'`, `'lanczoz'`, `'rectangular'`, `'triangular'`
+ * @property {?number} alpha Some window functions have this extra value.
+ * (Between 0 and 1)
+ * @property {number} pixelRatio=wavesurfer.params.pixelRatio to control the
+ * size of the spectrogram in relation with its canvas. 1 = Draw on the whole
+ * canvas. 2 = Draw on a quarter (1/2 the length and 1/2 the width)
+ * @property {number} frequencyMin=0 Min frequency to scale spectrogram.
+ * @property {number} frequencyMax=12000 Max frequency to scale spectrogram.
+ * Set this to samplerate/2 to draw whole range of spectrogram.
+ * @property {?boolean} deferInit Set to true to manually call
+ * `initPlugin('spectrogram')`
+ * @property {?number[][]} colorMap A 256 long array of 4-element arrays.
+ * Each entry should contain a float between 0 and 1 and specify
+ * r, g, b, and alpha.
+ */
+/**
+ * Render a spectrogram visualisation of the audio.
+ *
+ * @implements {PluginClass}
+ * @extends {Observer}
+ * @example
+ * // es6
+ * import SpectrogramPlugin from 'wavesurfer.spectrogram.js';
+ *
+ * // commonjs
+ * var SpectrogramPlugin = require('wavesurfer.spectrogram.js');
+ *
+ * // if you are using <script> tags
+ * var SpectrogramPlugin = window.WaveSurfer.spectrogram;
+ *
+ * // ... initialising wavesurfer with the plugin
+ * var wavesurfer = WaveSurfer.create({
+ *   // wavesurfer options ...
+ *   plugins: [
+ *     SpectrogramPlugin.create({
+ *       // plugin options ...
+ *     })
+ *   ]
+ * });
+ */
+export default class SpectrogramPlugin implements PluginClass {
+    /**
+     * Spectrogram plugin definition factory
+     *
+     * This function must be used to create a plugin definition which can be
+     * used by wavesurfer to correctly instantiate the plugin.
+     *
+     * @param  {SpectrogramPluginParams} params Parameters used to initialise the plugin
+     * @return {PluginDefinition} An object representing the plugin.
+     */
+    static create(params: SpectrogramPluginParams): PluginDefinition;
+    constructor(params: any, ws: any);
+    params: any;
+    wavesurfer: any;
+    util: any;
+    frequenciesDataUrl: any;
+    _onScroll: (e: any) => void;
+    _onRender: () => void;
+    _onWrapperClick: (e: any) => void;
+    _onReady: () => void;
+    container: any;
+    colorMap: any;
+    width: any;
+    pixelRatio: any;
+    fftSamples: any;
+    height: any;
+    noverlap: any;
+    windowFunc: any;
+    alpha: any;
+    splitChannels: any;
+    channels: number;
+    frequencyMin: any;
+    frequencyMax: any;
+    init(): void;
+    destroy(): void;
+    wrapper: HTMLElement | null | undefined;
+    createWrapper(): void;
+    labelsEl: HTMLCanvasElement | undefined;
+    _wrapperClickHandler(event: any): void;
+    createCanvas(): void;
+    canvas: HTMLCanvasElement | undefined;
+    spectrCc: CanvasRenderingContext2D | null | undefined;
+    render(): void;
+    updateCanvasStyle(): void;
+    drawSpectrogram(frequenciesData: any, my: any): void;
+    getFrequencies(callback: any): void;
+    buffer: any;
+    loadFrequenciesData(url: any): any;
+    freqType(freq: any): string | number;
+    unitType(freq: any): "KHz" | "Hz";
+    loadLabels(bgFill: any, fontSizeFreq: any, fontSizeUnit: any, fontType: any, textColorFreq: any, textColorUnit: any, textAlign: any, container: any): void;
+    updateScroll(e: any): void;
+    resample(oldMatrix: any): Uint8Array[];
+}
+export type SpectrogramPluginParams = {
+    /**
+     * Selector of element or element in
+     * which to render
+     */
+    container: string | HTMLElement;
+    /**
+     * =512 Number of samples to fetch to FFT. Must be
+     * a power of 2.
+     */
+    fftSamples: number;
+    /**
+     * =false Render with separate spectrograms for
+     * the channels of the audio
+     */
+    splitChannels: boolean;
+    /**
+     * =fftSamples/2 Height of the spectrogram view in CSS
+     * pixels
+     */
+    height: number;
+    /**
+     * Set to true to display frequency labels.
+     */
+    labels: boolean;
+    /**
+     * Size of the overlapping window. Must be <
+     * fftSamples. Auto deduced from canvas size by default.
+     */
+    noverlap: number;
+    /**
+     * ='hann' The window function to be used. One of
+     * these: `'bartlett'`, `'bartlettHann'`, `'blackman'`, `'cosine'`, `'gauss'`,
+     * `'hamming'`, `'hann'`, `'lanczoz'`, `'rectangular'`, `'triangular'`
+     */
+    windowFunc: string;
+    /**
+     * Some window functions have this extra value.
+     * (Between 0 and 1)
+     */
+    alpha: number | null;
+    /**
+     * =wavesurfer.params.pixelRatio to control the
+     * size of the spectrogram in relation with its canvas. 1 = Draw on the whole
+     * canvas. 2 = Draw on a quarter (1/2 the length and 1/2 the width)
+     */
+    pixelRatio: number;
+    /**
+     * =0 Min frequency to scale spectrogram.
+     */
+    frequencyMin: number;
+    /**
+     * =12000 Max frequency to scale spectrogram.
+     * Set this to samplerate/2 to draw whole range of spectrogram.
+     */
+    frequencyMax: number;
+    /**
+     * Set to true to manually call
+     * `initPlugin('spectrogram')`
+     */
+    deferInit: boolean | null;
+    /**
+     * A 256 long array of 4-element arrays.
+     * Each entry should contain a float between 0 and 1 and specify
+     * r, g, b, and alpha.
+     */
+    colorMap: number[][] | null;
+};

package/dist/plugins/spectrogram.d.ts

@@ -1,24 +1,66 @@
+/**
+ * Spectrogram plugin
+ *
+ * Render a spectrogram visualisation of the audio.
+ *
+ * @example
+ * // ... initialising wavesurfer with the plugin
+ * var wavesurfer = WaveSurfer.create({
+ *   // wavesurfer options ...
+ *   plugins: [
+ *     SpectrogramPlugin.create({
+ *       // plugin options ...
+ *     })
+ *   ]
+ * });
+ */
 import BasePlugin from '../base-plugin.js';
 export type SpectrogramPluginOptions = {
-    waveColor?: string;
-    lineWidth?: number;
+    /** Selector of element or element in which to render */
+    container: string | HTMLElement;
+    /** Number of samples to fetch to FFT. Must be a power of 2. */
+    fftSamples?: number;
+    /** Height of the spectrogram view in CSS pixels */
+    height?: number;
+    /** Set to true to display frequency labels. */
+    labels?: boolean;
+    /** Size of the overlapping window. Must be < fftSamples. Auto deduced from canvas size by default. */
+    noverlap?: number;
+    /** The window function to be used. */
+    windowFunc?: 'bartlett' | 'bartlettHann' | 'blackman' | 'cosine' | 'gauss' | 'hamming' | 'hann' | 'lanczoz' | 'rectangular' | 'triangular';
+    /** Some window functions have this extra value. (Between 0 and 1) */
+    alpha?: number;
+    /** Min frequency to scale spectrogram. */
+    frequencyMin?: number;
+    /** Max frequency to scale spectrogram. Set this to samplerate/2 to draw whole range of spectrogram. */
+    frequencyMax?: number;
+    /**
+     * A 256 long array of 4-element arrays. Each entry should contain a float between 0 and 1 and specify r, g, b, and alpha.
+     * Each entry should contain a float between 0 and 1 and specify r, g, b, and alpha.
+     */
+    colorMap?: number[][];
 };
 export type SpectrogramPluginEvents = {
-    startRecording: void;
-    stopRecording: void;
+    ready: [];
+    click: [relativeX: number];
 };
-declare class SpectrogramPlugin extends BasePlugin<SpectrogramPluginEvents, SpectrogramPluginOptions> {
-    private mediaSpectrogramer;
-    private recordedUrl;
+export default class SpectrogramPlugin extends BasePlugin<SpectrogramPluginEvents, SpectrogramPluginOptions> {
     static create(options?: SpectrogramPluginOptions): SpectrogramPlugin;
-    private loadBlob;
-    private processFrequencyData;
-    render(stream: MediaStream): () => void;
-    private cleanUp;
-    startSpectrograming(): Promise<void>;
-    isSpectrograming(): boolean;
-    stopSpectrograming(): void;
-    getSpectrogramedUrl(): string;
+    utils: {
+        style: (el: HTMLElement, styles: Record<string, string>) => CSSStyleDeclaration & Record<string, string>;
+    };
+    constructor(options: SpectrogramPluginOptions);
+    onInit(): void;
     destroy(): void;
+    createWrapper(): void;
+    _wrapperClickHandler(event: any): void;
+    createCanvas(): void;
+    render(): void;
+    drawSpectrogram: (frequenciesData: any) => void;
+    getFrequencies(callback: any): void;
+    loadFrequenciesData(url: any): Promise<void>;
+    freqType(freq: any): string | number;
+    unitType(freq: any): "KHz" | "Hz";
+    loadLabels(bgFill: any, fontSizeFreq: any, fontSizeUnit: any, fontType: any, textColorFreq: any, textColorUnit: any, textAlign: any, container: any): void;
+    resample(oldMatrix: any): Uint8Array[];
 }
-export default SpectrogramPlugin;