Set up the Autoscriber Waveform using the SDK

2 min

You can also make use of the Autoscriber Waveform by passing in a config to initialise the waveform. Example of the waveform below:

WaveSurferConfig

// For typescript strict typing
import type { WaveSurferConfig } from "autoscriber";

const waveSurferConfig: WaveSurferConfig = {
  container: "#myContainer", // You can either pass the ID of a div that you want the wavesurfer attached to, or the HTMLElement itself
  waveColor: "#00b7f0", // The hex color value of the wave
  progressColor: "#00b7f0", // The hex color value of the progress bar
  barWidth: 5, // The width of the wave bars
  barRadius: 10, // Border radius on each of the wave bars
  barHeight: 1, // Height of the wave bars
  height: "auto", // The height of the waveform in pixels, or "auto" to fill the container height
};

WaveSurfer Div

<div id="myContainer"></div>

<!-- CSS -->
#mic {
  height: 200px; // Whatever value you want the height to be
  width: 300px; // Whatever value you want the width to be
}

WaveForm config

Name	Description	Type	Required/Optional
container	An HTML element or selector where the waveform will be rendered	HTMLElement \| string	Required
barWidth	If set, the waveform will be rendered with bars like this: ▁ ▂ ▇ ▃ ▅ ▂	number	Optional
barGap	Spacing between bars in pixels	number	Optional
barRadius	Rounded borders for bars	number	Optional
barHeight	A vertical scaling factor for the waveform	number	Optional
height	The height of the waveform in pixels, or "auto" to fill the container height	number \| 'auto'	Optional
width	The width of the waveform in pixels or any CSS value; defaults to 100%	number \| string	Optional
waveColor	The colour of the waveform	string \| string[] \| CanvasGradient	Optional
progressColor	The colour of the progress mask	string \| string[] \| CanvasGradient	Optional