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

package/dist/src/plugins/spectrogram.d.ts

@@ -0,0 +1,69 @@
+/**
+ * Spectrogram plugin
+ *
+ * Render a spectrogram visualisation of the audio.
+ *
+ * @author Pavel Denisov (https://github.com/akreal)
+ * @see https://github.com/wavesurfer-js/wavesurfer.js/pull/337
+ *
+ * @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 = {
+    /** 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 = {
+    ready: [];
+    click: [relativeX: number];
+};
+export default class SpectrogramPlugin extends BasePlugin<SpectrogramPluginEvents, SpectrogramPluginOptions> {
+    static create(options?: SpectrogramPluginOptions): SpectrogramPlugin;
+    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[];
+}

package/dist/src/plugins/spectrogram.js

@@ -0,0 +1,340 @@
+/**
+ * Spectrogram plugin
+ *
+ * Render a spectrogram visualisation of the audio.
+ *
+ * @author Pavel Denisov (https://github.com/akreal)
+ * @see https://github.com/wavesurfer-js/wavesurfer.js/pull/337
+ *
+ * @example
+ * // ... initialising wavesurfer with the plugin
+ * var wavesurfer = WaveSurfer.create({
+ *   // wavesurfer options ...
+ *   plugins: [
+ *     SpectrogramPlugin.create({
+ *       // plugin options ...
+ *     })
+ *   ]
+ * });
+ */
+// @ts-nocheck
+import BasePlugin from '../base-plugin.js';
+import FFT from './spectrogram-fft.js';
+export default class SpectrogramPlugin extends BasePlugin {
+    static create(options) {
+        return new SpectrogramPlugin(options || {});
+    }
+    utils = {
+        style: (el, styles) => Object.assign(el.style, styles),
+    };
+    constructor(options) {
+        super(options);
+        this.frequenciesDataUrl = options.frequenciesDataUrl;
+        this.container =
+            'string' == typeof options.container ? document.querySelector(options.container) : options.container;
+        if (options.colorMap) {
+            if (options.colorMap.length < 256) {
+                throw new Error('Colormap must contain 256 elements');
+            }
+            for (let i = 0; i < options.colorMap.length; i++) {
+                const cmEntry = options.colorMap[i];
+                if (cmEntry.length !== 4) {
+                    throw new Error('ColorMap entries must contain 4 values');
+                }
+            }
+            this.colorMap = options.colorMap;
+        }
+        else {
+            this.colorMap = [];
+            for (let i = 0; i < 256; i++) {
+                const val = (255 - i) / 256;
+                this.colorMap.push([val, val, val, 1]);
+            }
+        }
+        this.fftSamples = options.fftSamples || 512;
+        this.height = options.height || this.fftSamples / 2;
+        this.noverlap = options.noverlap;
+        this.windowFunc = options.windowFunc;
+        this.alpha = options.alpha;
+        this.channels = 1;
+        // Getting file's original samplerate is difficult(#1248).
+        // So set 12kHz default to render like wavesurfer.js 5.x.
+        this.frequencyMin = options.frequencyMin || 0;
+        this.frequencyMax = options.frequencyMax || 0;
+        this.createWrapper();
+        this.createCanvas();
+    }
+    onInit() {
+        this.container = this.container || this.wavesurfer.getWrapper();
+        this.container.appendChild(this.wrapper);
+        if (this.wavesurfer.options.fillParent) {
+            this.utils.style(this.wrapper, {
+                width: '100%',
+                overflowX: 'hidden',
+                overflowY: 'hidden',
+            });
+        }
+        this.width = this.wavesurfer.getWrapper().offsetWidth;
+        this.subscriptions.push(this.wavesurfer.on('redraw', () => this.render()));
+    }
+    destroy() {
+        this.unAll();
+        this.wavesurfer.un('ready', this._onReady);
+        this.wavesurfer.un('redraw', this._onRender);
+        this.wavesurfer = null;
+        this.util = null;
+        this.options = null;
+        if (this.wrapper) {
+            this.wrapper.remove();
+            this.wrapper = null;
+        }
+    }
+    createWrapper() {
+        this.wrapper = document.createElement('div');
+        this.utils.style(this.wrapper, {
+            display: 'block',
+            position: 'relative',
+            userSelect: 'none',
+            webkitUserSelect: 'none',
+            height: `${this.height * this.channels}px`,
+        });
+        // if labels are active
+        if (this.options.labels) {
+            const labelsEl = document.createElement('canvas');
+            labelsEl.classList.add('spec-labels');
+            this.utils.style(labelsEl, {
+                position: 'absolute',
+                zIndex: 9,
+                width: '55px',
+                height: '100%',
+            });
+            this.wrapper.appendChild(labelsEl);
+            this.labelsEl = labelsEl;
+        }
+        this.wrapper.addEventListener('click', this._onWrapperClick);
+    }
+    _wrapperClickHandler(event) {
+        event.preventDefault();
+        const relX = 'offsetX' in event ? event.offsetX : event.layerX;
+        this.emit('click', relX / this.width || 0);
+    }
+    createCanvas() {
+        const canvas = document.createElement('canvas');
+        this.wrapper.appendChild(canvas);
+        this.spectrCc = canvas.getContext('2d');
+        this.utils.style(canvas, {
+            position: 'absolute',
+            left: 0,
+            top: 0,
+            width: '100%',
+            height: '100%',
+            zIndex: 4,
+        });
+        this.canvas = canvas;
+    }
+    render() {
+        this.canvas.width = this.width;
+        this.canvas.height = this.height;
+        if (this.frequenciesDataUrl) {
+            this.loadFrequenciesData(this.frequenciesDataUrl);
+        }
+        else {
+            this.getFrequencies(this.drawSpectrogram);
+        }
+        this.loadLabels('rgba(68,68,68,0.5)', '12px', '10px', '', '#fff', '#f7f7f7', 'center', '#specLabels');
+    }
+    drawSpectrogram = (frequenciesData) => {
+        if (!isNaN(frequenciesData[0][0])) {
+            // data is 1ch [sample, freq] format
+            // to [channel, sample, freq] format
+            frequenciesData = [frequenciesData];
+        }
+        const spectrCc = this.spectrCc;
+        const height = this.height;
+        const width = this.width;
+        const freqFrom = this.buffer.sampleRate / 2;
+        const freqMin = this.frequencyMin;
+        const freqMax = this.frequencyMax;
+        if (!spectrCc) {
+            return;
+        }
+        for (let c = 0; c < frequenciesData.length; c++) {
+            // for each channel
+            const pixels = this.resample(frequenciesData[c]);
+            const imageData = new ImageData(width, height);
+            for (let i = 0; i < pixels.length; i++) {
+                for (let j = 0; j < pixels[i].length; j++) {
+                    const colorMap = this.colorMap[pixels[i][j]];
+                    const redIndex = ((height - j) * width + i) * 4;
+                    imageData.data[redIndex] = colorMap[0] * 255;
+                    imageData.data[redIndex + 1] = colorMap[1] * 255;
+                    imageData.data[redIndex + 2] = colorMap[2] * 255;
+                    imageData.data[redIndex + 3] = colorMap[3] * 255;
+                }
+            }
+            // scale and stack spectrograms
+            createImageBitmap(imageData).then((renderer) => {
+                spectrCc.drawImage(renderer, 0, height * (1 - freqMax / freqFrom), // source x, y
+                width, (height * (freqMax - freqMin)) / freqFrom, // source width, height
+                0, height * c, // destination x, y
+                width, height);
+            });
+        }
+        this.emit('ready');
+    };
+    getFrequencies(callback) {
+        const fftSamples = this.fftSamples;
+        const buffer = this.wavesurfer.getDecodedData();
+        const channels = this.channels;
+        this.frequencyMax = this.frequencyMax || buffer.sampleRate / 2;
+        if (!buffer)
+            return;
+        this.buffer = buffer;
+        // This may differ from file samplerate. Browser resamples audio.
+        const sampleRate = buffer.sampleRate;
+        const frequencies = [];
+        let noverlap = this.noverlap;
+        if (!noverlap) {
+            const uniqueSamplesPerPx = buffer.length / this.canvas.width;
+            noverlap = Math.max(0, Math.round(fftSamples - uniqueSamplesPerPx));
+        }
+        const fft = new FFT(fftSamples, sampleRate, this.windowFunc, this.alpha);
+        for (let c = 0; c < channels; c++) {
+            // for each channel
+            const channelData = buffer.getChannelData(c);
+            const channelFreq = [];
+            let currentOffset = 0;
+            while (currentOffset + fftSamples < channelData.length) {
+                const segment = channelData.slice(currentOffset, currentOffset + fftSamples);
+                const spectrum = fft.calculateSpectrum(segment);
+                const array = new Uint8Array(fftSamples / 2);
+                let j;
+                for (j = 0; j < fftSamples / 2; j++) {
+                    array[j] = Math.max(-255, Math.log10(spectrum[j]) * 45);
+                }
+                channelFreq.push(array);
+                // channelFreq: [sample, freq]
+                currentOffset += fftSamples - noverlap;
+            }
+            frequencies.push(channelFreq);
+            // frequencies: [channel, sample, freq]
+        }
+        callback(frequencies, this);
+    }
+    loadFrequenciesData(url) {
+        return fetch(url)
+            .then((response) => response.json())
+            .then(this.drawSpectrogram);
+    }
+    freqType(freq) {
+        return freq >= 1000 ? (freq / 1000).toFixed(1) : Math.round(freq);
+    }
+    unitType(freq) {
+        return freq >= 1000 ? 'KHz' : 'Hz';
+    }
+    loadLabels(bgFill, fontSizeFreq, fontSizeUnit, fontType, textColorFreq, textColorUnit, textAlign, container) {
+        const frequenciesHeight = this.height;
+        bgFill = bgFill || 'rgba(68,68,68,0)';
+        fontSizeFreq = fontSizeFreq || '12px';
+        fontSizeUnit = fontSizeUnit || '10px';
+        fontType = fontType || 'Helvetica';
+        textColorFreq = textColorFreq || '#fff';
+        textColorUnit = textColorUnit || '#fff';
+        textAlign = textAlign || 'center';
+        container = container || '#specLabels';
+        const bgWidth = 55;
+        const getMaxY = frequenciesHeight || 512;
+        const labelIndex = 5 * (getMaxY / 256);
+        const freqStart = this.frequencyMin;
+        const step = (this.frequencyMax - freqStart) / labelIndex;
+        // prepare canvas element for labels
+        const ctx = this.labelsEl.getContext('2d');
+        const dispScale = window.devicePixelRatio;
+        this.labelsEl.height = this.height * this.channels * dispScale;
+        this.labelsEl.width = bgWidth * dispScale;
+        ctx.scale(dispScale, dispScale);
+        if (!ctx) {
+            return;
+        }
+        for (let c = 0; c < this.channels; c++) {
+            // for each channel
+            // fill background
+            ctx.fillStyle = bgFill;
+            ctx.fillRect(0, c * getMaxY, bgWidth, (1 + c) * getMaxY);
+            ctx.fill();
+            let i;
+            // render labels
+            for (i = 0; i <= labelIndex; i++) {
+                ctx.textAlign = textAlign;
+                ctx.textBaseline = 'middle';
+                const freq = freqStart + step * i;
+                const label = this.freqType(freq);
+                const units = this.unitType(freq);
+                const yLabelOffset = 2;
+                const x = 16;
+                let y;
+                if (i == 0) {
+                    y = (1 + c) * getMaxY + i - 10;
+                    // unit label
+                    ctx.fillStyle = textColorUnit;
+                    ctx.font = fontSizeUnit + ' ' + fontType;
+                    ctx.fillText(units, x + 24, y);
+                    // freq label
+                    ctx.fillStyle = textColorFreq;
+                    ctx.font = fontSizeFreq + ' ' + fontType;
+                    ctx.fillText(label, x, y);
+                }
+                else {
+                    y = (1 + c) * getMaxY - i * 50 + yLabelOffset;
+                    // unit label
+                    ctx.fillStyle = textColorUnit;
+                    ctx.font = fontSizeUnit + ' ' + fontType;
+                    ctx.fillText(units, x + 24, y);
+                    // freq label
+                    ctx.fillStyle = textColorFreq;
+                    ctx.font = fontSizeFreq + ' ' + fontType;
+                    ctx.fillText(label, x, y);
+                }
+            }
+        }
+    }
+    resample(oldMatrix) {
+        const columnsNumber = this.width;
+        const newMatrix = [];
+        const oldPiece = 1 / oldMatrix.length;
+        const newPiece = 1 / columnsNumber;
+        let i;
+        for (i = 0; i < columnsNumber; i++) {
+            const column = new Array(oldMatrix[0].length);
+            let j;
+            for (j = 0; j < oldMatrix.length; j++) {
+                const oldStart = j * oldPiece;
+                const oldEnd = oldStart + oldPiece;
+                const newStart = i * newPiece;
+                const newEnd = newStart + newPiece;
+                const overlap = oldEnd <= newStart || newEnd <= oldStart
+                    ? 0
+                    : Math.min(Math.max(oldEnd, newStart), Math.max(newEnd, oldStart)) -
+                        Math.max(Math.min(oldEnd, newStart), Math.min(newEnd, oldStart));
+                let k;
+                /* eslint-disable max-depth */
+                if (overlap > 0) {
+                    for (k = 0; k < oldMatrix[0].length; k++) {
+                        if (column[k] == null) {
+                            column[k] = 0;
+                        }
+                        column[k] += (overlap / newPiece) * oldMatrix[j][k];
+                    }
+                }
+                /* eslint-enable max-depth */
+            }
+            const intColumn = new Uint8Array(oldMatrix[0].length);
+            let m;
+            for (m = 0; m < oldMatrix[0].length; m++) {
+                intColumn[m] = column[m];
+            }
+            newMatrix.push(intColumn);
+        }
+        return newMatrix;
+    }
+}

package/dist/src/plugins/timeline.d.ts

@@ -0,0 +1,45 @@
+/**
+ * The Timeline plugin adds timestamps and notches under the waveform.
+ */
+import BasePlugin from '../base-plugin.js';
+export type TimelinePluginOptions = {
+    /** The height of the timeline in pixels, defaults to 20 */
+    height?: number;
+    /** HTML container for the timeline, defaults to wavesufer's container */
+    container?: HTMLElement;
+    /** Pass 'beforebegin' to insert the timeline on top of the waveform */
+    insertPosition?: InsertPosition;
+    /** The duration of the timeline in seconds, defaults to wavesurfer's duration */
+    duration?: number;
+    /** Interval between ticks in seconds */
+    timeInterval?: number;
+    /** Interval between numeric labels */
+    primaryLabelInterval?: number;
+    /** Interval between secondary numeric labels */
+    secondaryLabelInterval?: number;
+    /** Custom inline style to apply to the container */
+    style?: Partial<CSSStyleDeclaration> | string;
+};
+declare const defaultOptions: {
+    height: number;
+};
+export type TimelinePluginEvents = {
+    ready: [];
+};
+declare class TimelinePlugin extends BasePlugin<TimelinePluginEvents, TimelinePluginOptions> {
+    private timelineWrapper;
+    protected options: TimelinePluginOptions & typeof defaultOptions;
+    constructor(options?: TimelinePluginOptions);
+    static create(options?: TimelinePluginOptions): TimelinePlugin;
+    /** Called by wavesurfer, don't call manually */
+    onInit(): void;
+    /** Unmount */
+    destroy(): void;
+    private initTimelineWrapper;
+    private formatTime;
+    private defaultTimeInterval;
+    private defaultPrimaryLabelInterval;
+    private defaultSecondaryLabelInterval;
+    private initTimeline;
+}
+export default TimelinePlugin;

package/dist/src/plugins/timeline.js

@@ -0,0 +1,162 @@
+/**
+ * The Timeline plugin adds timestamps and notches under the waveform.
+ */
+import BasePlugin from '../base-plugin.js';
+const defaultOptions = {
+    height: 20,
+};
+class TimelinePlugin extends BasePlugin {
+    timelineWrapper;
+    options;
+    constructor(options) {
+        super(options || {});
+        this.options = Object.assign({}, defaultOptions, options);
+        this.timelineWrapper = this.initTimelineWrapper();
+    }
+    static create(options) {
+        return new TimelinePlugin(options);
+    }
+    /** Called by wavesurfer, don't call manually */
+    onInit() {
+        if (!this.wavesurfer) {
+            throw Error('WaveSurfer is not initialized');
+        }
+        const container = this.options.container ?? this.wavesurfer.getWrapper();
+        if (this.options.insertPosition) {
+            ;
+            (container.firstElementChild || container).insertAdjacentElement(this.options.insertPosition, this.timelineWrapper);
+        }
+        else {
+            container.appendChild(this.timelineWrapper);
+        }
+        if (this.options.duration) {
+            this.initTimeline(this.options.duration);
+        }
+        else {
+            this.subscriptions.push(this.wavesurfer.on('redraw', () => {
+                this.initTimeline(this.wavesurfer?.getDuration() || 0);
+            }));
+        }
+    }
+    /** Unmount */
+    destroy() {
+        this.timelineWrapper.remove();
+        super.destroy();
+    }
+    initTimelineWrapper() {
+        const div = document.createElement('div');
+        div.setAttribute('part', 'timeline');
+        return div;
+    }
+    formatTime(seconds) {
+        if (seconds / 60 > 1) {
+            // calculate minutes and seconds from seconds count
+            const minutes = Math.floor(seconds / 60);
+            seconds = Math.round(seconds % 60);
+            const paddedSeconds = `${seconds < 10 ? '0' : ''}${seconds}`;
+            return `${minutes}:${paddedSeconds}`;
+        }
+        const rounded = Math.round(seconds * 1000) / 1000;
+        return `${rounded}`;
+    }
+    // Return how many seconds should be between each notch
+    defaultTimeInterval(pxPerSec) {
+        if (pxPerSec >= 25) {
+            return 1;
+        }
+        else if (pxPerSec * 5 >= 25) {
+            return 5;
+        }
+        else if (pxPerSec * 15 >= 25) {
+            return 15;
+        }
+        return Math.ceil(0.5 / pxPerSec) * 60;
+    }
+    // Return the cadence of notches that get labels in the primary color.
+    defaultPrimaryLabelInterval(pxPerSec) {
+        if (pxPerSec >= 25) {
+            return 10;
+        }
+        else if (pxPerSec * 5 >= 25) {
+            return 6;
+        }
+        else if (pxPerSec * 15 >= 25) {
+            return 4;
+        }
+        return 4;
+    }
+    // Return the cadence of notches that get labels in the secondary color.
+    defaultSecondaryLabelInterval(pxPerSec) {
+        if (pxPerSec >= 25) {
+            return 5;
+        }
+        else if (pxPerSec * 5 >= 25) {
+            return 2;
+        }
+        else if (pxPerSec * 15 >= 25) {
+            return 2;
+        }
+        return 2;
+    }
+    initTimeline(duration) {
+        const pxPerSec = this.timelineWrapper.scrollWidth / duration;
+        const timeInterval = this.options.timeInterval ?? this.defaultTimeInterval(pxPerSec);
+        const primaryLabelInterval = this.options.primaryLabelInterval ?? this.defaultPrimaryLabelInterval(pxPerSec);
+        const secondaryLabelInterval = this.options.secondaryLabelInterval ?? this.defaultSecondaryLabelInterval(pxPerSec);
+        const isTop = this.options.insertPosition === 'beforebegin';
+        const timeline = document.createElement('div');
+        timeline.setAttribute('style', `
+      height: ${this.options.height}px;
+      overflow: hidden;
+      display: flex;
+      justify-content: space-between;
+      align-items: ${isTop ? 'flex-start' : 'flex-end'};
+      font-size: ${this.options.height / 2}px;
+      white-space: nowrap;
+    `);
+        if (isTop) {
+            const topStyle = `
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        z-index: 2;
+      `;
+            timeline.setAttribute('style', timeline.getAttribute('style') + topStyle);
+        }
+        if (typeof this.options.style === 'string') {
+            timeline.setAttribute('style', timeline.getAttribute('style') + this.options.style);
+        }
+        else if (typeof this.options.style === 'object') {
+            Object.assign(timeline.style, this.options.style);
+        }
+        const notchEl = document.createElement('div');
+        notchEl.setAttribute('style', `
+      width: 1px;
+      height: 50%;
+      display: flex;
+      flex-direction: column;
+      justify-content: ${isTop ? 'flex-start' : 'flex-end'};
+      overflow: visible;
+      border-left: 1px solid currentColor;
+      opacity: 0.25;
+    `);
+        for (let i = 0; i < duration; i += timeInterval) {
+            const notch = notchEl.cloneNode();
+            const isPrimary = (Math.round(i * 100) / 100) % primaryLabelInterval === 0;
+            const isSecondary = (Math.round(i * 100) / 100) % secondaryLabelInterval === 0;
+            if (isPrimary || isSecondary) {
+                notch.style.height = '100%';
+                notch.style.textIndent = '3px';
+                notch.textContent = this.formatTime(i);
+                if (isPrimary)
+                    notch.style.opacity = '1';
+            }
+            timeline.appendChild(notch);
+        }
+        this.timelineWrapper.innerHTML = '';
+        this.timelineWrapper.appendChild(timeline);
+        this.emit('ready');
+    }
+}
+export default TimelinePlugin;

package/dist/src/renderer.d.ts

@@ -0,0 +1,41 @@
+import EventEmitter from './event-emitter.js';
+import type { WaveSurferOptions } from './wavesurfer.js';
+type RendererEvents = {
+    click: [relativeX: number];
+    drag: [relativeX: number];
+    scroll: [relativeStart: number, relativeEnd: number];
+    render: [];
+};
+declare class Renderer extends EventEmitter<RendererEvents> {
+    private static MAX_CANVAS_WIDTH;
+    private options;
+    private container;
+    private scrollContainer;
+    private wrapper;
+    private canvasWrapper;
+    private progressWrapper;
+    private cursor;
+    private timeouts;
+    private isScrolling;
+    private audioData;
+    private resizeObserver;
+    private isDragging;
+    constructor(options: WaveSurferOptions);
+    private initEvents;
+    private initDrag;
+    private initHtml;
+    setOptions(options: WaveSurferOptions): void;
+    getWrapper(): HTMLElement;
+    getScroll(): number;
+    destroy(): void;
+    private createDelay;
+    private convertColorValues;
+    private renderSingleCanvas;
+    private renderWaveform;
+    render(audioData: AudioBuffer): void;
+    reRender(): void;
+    zoom(minPxPerSec: number): void;
+    private scrollIntoView;
+    renderProgress(progress: number, isPlaying?: boolean): void;
+}
+export default Renderer;