---
title: Set up the Autoscriber Waveform using the SDK
slug: api-docs-v1/set-up-the-autoscriber-waveform-using-the-sdk
docTags: 
createdAt: 2025-08-27T11:47:47.945Z
---

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

![](https://developers.autoscriber.com/assets/waveform-42c5ae2f.svg)

::::CodeDrawer{title="WaveSurferConfig" isResponseExpanded="true" autoGeneratedAnchorSlug="wavesurferconfig" legacyHash="0SuL-b7gh-dYkyTXB2fN-"}
:::CodeblockTabsExamples
```javascript
// 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
};
```
:::

:::CodeblockTabsResponses
```javascript
```
:::
::::

::::CodeDrawer{title="WaveSurfer Div" isResponseExpanded="true" autoGeneratedAnchorSlug="wavesurfer-div" legacyHash="OKDXt_pkeJOyd6sf7Y1ku"}
:::CodeblockTabsExamples
```html
<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
}
```
:::

:::CodeblockTabsResponses
```javascript
```
:::
::::

### 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              |