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