Split Wave / Point Plot

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}
]

Options

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

• plotArray: array of objects with time and plot (required unless plotFileUrl is set)
• plotFileUrl: url of the file that contains the plot information (required unless plotArray is set)
• plotNormalizeTo: [whole/segment/none/values] - what value to normalize the plot to (defaults to "whole")
• plotMin: the minimum value to normalize points to. Any value below this will be ignored (defaults to 0)
• plotMax: the maximum value to normalize points to. Any value above this will be ignored (defaults to 1)
• plotTimeStart: the time included in the plot file which corresponds with the start of the displayed wave (defaults to 0)
• plotTimeEnd: the time included in the plot file which corresponds with the end of the displayed wave (defaults maximum plot time)
• plotColor: the color of the plot (defaults to #f63)
• plotProgressColor: the color of the progress plot (defaults to '#F00')
• plotFileDelimiter: the delimiter which separates the time from the value in the plot file (defaults to tab characater = "\t")
• plotPointHeight: the canvas height of each plot point (defaults to 2)
• plotPointWidth: the canvas width of each plot point (defaults to 2)
• plotSeparator: boolean indicating a separator should be included between the wave and point plot
• plotRangeDisplay: boolean indicating if the min and max range should be displayed (defaults to false)
• plotRangePrecision: integer determining the precision of the displayed plot range
• plotRangeUnits: units appended to the range
• plotRangeFontSize: the font for displaying the range - defaults to 20
• plotRangeFontType: the font type for displaying range - defaults to Ariel
• plotRangeIgnoreOutliers: boolean indicating if values outside of range should be ignored or plotted at min/max