Bars Example

Bars example

Draws a waveform with bars.

let wavesurfer = WaveSurfer.create({
    container: document.querySelector('#waveform'),
    barWidth: 2,
    barHeight: 1, // the height of the wave
    barGap: null // the optional spacing between bars of the wave, if not provided will be calculated in legacy format

Split Channel Options

The split channel view can be modified with the splitChannelsOptions. The waveforms can be stacked on top of each other. And colors can be added to each channel.

var wavesurfer = WaveSurfer.create({
    container: document.querySelector('#wave'),
    splitChannels: true,
    splitChannelsOptions: {
        overlay: false,
        channelColors: {
            0: {
                progressColor: 'green',
                waveColor: 'pink'
            1: {
                progressColor: 'orange',
                waveColor: 'purple'


overlay - boolean - This determines whether channels are drawn on top of each other.

channelColors - object - Pass this to set colors for each channel. If the channel index is not found on the object, colors will default to the top level color params.

filterChannels - array - Array of channel numbers. Channels included in the array will not be drawn.

relativeNormalization - boolean - When normalize and splitChannels are both true the channels will be normalized individually or proportionally to each other. Defaults to false (each channel will be normalized in isolation).

Fork me on GitHub