Split Channel Waveforms

Drag'n'drop your -file here!

How to Enable Split Channels

Set the splitChannels option to true.

var wavesurfer = WaveSurfer.create({
    container: document.querySelector('#wave'),
    splitChannels: true
});

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'
            }
        }
    }
});

splitChannelOptions

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.

Fork me on GitHub