wavesurfer.js | Gradient Fill Styles Example

Gradient Fill Styles example

Draws a waveform with a gradient fill.

wavesurfer = WaveSurfer.create({
    container: document.querySelector('#waveform'),
    waveColor: [ // an array of colors, to be applied as gradient color stops to the waveform.
        "red",
        "green",
        "purple",
        "yellow",
        "rgba(0,255,255,.5)",
    ],
    progressColor: [ // the gradient fill styles are also available on the progressColor option
        "orange",
        "blue",
        "cyan",
        "black",
        "rgba(0,255,255,.5)",
    ]
});

Gradient Fill Styles with Bars example

Draws a waveform using bars with a gradient fill.

wavesurferWithBars = WaveSurfer.create({
    container: document.querySelector('#waveform-with-bars'),
    barGap: 6,
    barHeight: 1,
    barMinHeight: 1,
    barRadius: 6,
    barWidth: 12,
    waveColor: [ // an array of colors, to be applied as gradient color stops to the waveform barsr
        "red",
        "green",
        "purple",
        "yellow",
        "rgba(0,255,255,.5)",
    ],
    progressColor: [ // the gradient fill styles are also available on the progressColor option
        "orange",
        "blue",
        "cyan",
        "black",
        "rgba(0,255,255,.5)",
    ]
});

WaveSurfer Options

waveColor - string | array - Can be a string referencing a color value, or an array of strings referencing color values.

progressColor - string | array - Can be a string referencing a color value, or an array of strings referencing color values.