wavesurfer.js
    Preparing search index...

    Type Alias WaveSurferOptions

    type WaveSurferOptions = {
        audioRate?: number;
        autoCenter?: boolean;
        autoplay?: boolean;
        autoScroll?: boolean;
        backend?: "WebAudio" | "MediaElement";
        barAlign?: "top" | "bottom";
        barGap?: number;
        barHeight?: number;
        barMinHeight?: number;
        barRadius?: number;
        barWidth?: number;
        blobMimeType?: string;
        container: HTMLElement | string;
        cspNonce?: string;
        cursorColor?: string;
        cursorWidth?: number;
        dragToSeek?: boolean | { debounceTime: number };
        duration?: number;
        fetchParams?: RequestInit;
        fillParent?: boolean;
        height?: number | "auto";
        hideScrollbar?: boolean;
        interact?: boolean;
        maxPeak?: number;
        media?: HTMLMediaElement;
        mediaControls?: boolean;
        minPxPerSec?: number;
        normalize?: boolean;
        peaks?: (Float32Array | number[])[];
        plugins?: GenericPlugin[];
        progressColor?: string | string[] | CanvasGradient;
        renderFunction?: (
            peaks: (Float32Array | number[])[],
            ctx: CanvasRenderingContext2D,
        ) => void;
        sampleRate?: number;
        splitChannels?: (Partial<WaveSurferOptions> & { overlay?: boolean })[];
        url?: string;
        waveColor?: string | string[] | CanvasGradient;
        width?: number | string;
    }
    Index
    audioRate? autoCenter? autoplay? autoScroll? backend? barAlign? barGap? barHeight? barMinHeight? barRadius? barWidth? blobMimeType? container cspNonce? cursorColor? cursorWidth? dragToSeek? duration? fetchParams? fillParent? height? hideScrollbar? interact? maxPeak? media? mediaControls? minPxPerSec? normalize? peaks? plugins? progressColor? renderFunction? sampleRate? splitChannels? url? waveColor? width?
    audioRate?: number

    Audio rate, i.e. the playback speed

    autoCenter?: boolean

    If autoScroll is enabled, keep the cursor in the center of the waveform during playback

    autoplay?: boolean

    Play the audio on load

    autoScroll?: boolean

    Automatically scroll the container to keep the current position in viewport

    backend?: "WebAudio" | "MediaElement"

    Playback "backend" to use, defaults to MediaElement

    barAlign?: "top" | "bottom"

    Vertical bar alignment

    barGap?: number

    Spacing between bars in pixels

    barHeight?: number

    A vertical scaling factor for the waveform

    barMinHeight?: number

    Minimum height of bars in pixels

    barRadius?: number

    Rounded borders for bars

    barWidth?: number

    If set, the waveform will be rendered with bars like this: ▁ ▂ ▇ ▃ ▅ ▂

    blobMimeType?: string

    Override the Blob MIME type

    container: HTMLElement | string

    Required: an HTML element or selector where the waveform will be rendered

    cspNonce?: string

    Nonce for CSP if necessary

    cursorColor?: string

    The color of the playback cursor

    cursorWidth?: number

    The cursor width

    dragToSeek?: boolean | { debounceTime: number }

    Allow to drag the cursor to seek to a new position. If an object with debounceTime is provided instead then dragToSeek will also be true. If true the default is 200ms

    duration?: number

    Pre-computed audio duration in seconds

    fetchParams?: RequestInit

    Options to pass to the fetch method

    fillParent?: boolean

    Stretch the waveform to fill the container, true by default

    height?: number | "auto"

    The height of the waveform in pixels, or "auto" to fill the container height

    hideScrollbar?: boolean

    Hide the scrollbar

    interact?: boolean

    Pass false to disable clicks on the waveform

    maxPeak?: number

    Use a fixed max peak value for normalization instead of calculating from the current data

    media?: HTMLMediaElement

    Use an existing media element instead of creating one

    mediaControls?: boolean

    Whether to show default audio element controls

    minPxPerSec?: number

    Minimum pixels per second of audio (i.e. the zoom level)

    normalize?: boolean

    Stretch the waveform to the full height

    peaks?: (Float32Array | number[])[]

    Pre-computed audio data, arrays of floats for each channel

    plugins?: GenericPlugin[]

    The list of plugins to initialize on start

    progressColor?: string | string[] | CanvasGradient

    The color of the progress mask

    renderFunction?: (
        peaks: (Float32Array | number[])[],
        ctx: CanvasRenderingContext2D,
    ) => void

    Custom render function

    sampleRate?: number

    Decoding sample rate. Doesn't affect the playback. Defaults to 8000

    splitChannels?: (Partial<WaveSurferOptions> & { overlay?: boolean })[]

    Render each audio channel as a separate waveform. By default, stereo audio is rendered as a single waveform with the left channel on top and the right channel on the bottom.

    url?: string

    Audio URL

    waveColor?: string | string[] | CanvasGradient

    The color of the waveform

    width?: number | string

    The width of the waveform in pixels or any CSS value; defaults to 100%

    Settings
    Member Visibility

    On This Page
    Properties