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 // 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 }; \#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