Split Wave / Point Plot

The Split Wave Point Plot drawer splits the graphic in two, with the upper half being a plot of points defined by time and a range of values. The following example shows the calculated pitch at each point in time.

How to Enable Split Wave/Point Plot

Set the renderer option to SplitWavePointPlot and the plotFileUrl to the file containing the time aligned data.

var wavesurfer = WaveSurfer.create({
    container: document.querySelector('#wave'),
    renderer: 'SplitWavePointPlot',
    plotFileUrl: 'data.txt'

Providing Point Data

The data to be graphed can be provided by either providing a file defined in the plotFileUrl or by passing in an array of data in the plotArray option. The time data does not need to be continous and can have gaps.

Note: if the timing of your data does not span the duration of the sound file you should set plotTimeEnd to the total duration of the sound file or the points may not be aligned correctly

Data File Format

If providing data by loading a file, each line of the file must contain two elements: the time and the value of the point separated by a delimiter (defaults to tab). E.g.

0.01 123
0.02 121
0.03 127
0.22 120
0.23 119

Data Array Format

If providing data by a javascript array via the plotArray option the array should have the following form:

{time: 0.02, value: 121},
{time: 0.03, value: 127},
{time: 0.22, value: 120},
{time: 0.03, value: 119}


The following additional options can be set when initializing wavesurfer to control the waveform

Fork me on GitHub