# VoiceRecordingWavebarComponent

This component can be used to visualize the wave bar of a voice recording

![Wavebar Screenshot](@chat-sdk/angular/v7-latest/_assets/wavebar-screenshot.png)

## Usage

The built-in [`AttachmentListComponent`](/chat/docs/sdk/angular/components/AttachmentListComponent/) component displays this component. If you want to use this directly in your UI you can do it like this:

```html
<audio #audioElement></audio>
<stream-voice-recording-wavebar
  *ngIf="attachment?.waveform_data && attachment?.duration"
  [waveFormData]="attachment?.waveform_data || []"
  [duration]="attachment?.duration"
  [audioElement]="audioElement"
></stream-voice-recording-wavebar>
```

## Customization

It's not possible to override only the wave data visualization, but you can override the [`VoiceRecordingComponent`](/chat/docs/sdk/angular/services/CustomTemplatesService#voicerecordingattachmenttemplate/).

[//]: # "Start of generated content"

## Inputs and outputs

### audioElement

`Optional` **audioElement**: `HTMLAudioElement`

The audio element that plays the voice recording

#### Defined in

[projects/stream-chat-angular/src/lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.ts:29](https://github.com/GetStream/stream-chat-angular/blob/b8e03ec6da285f5e7c533ce710ebb946cded1190/projects/stream-chat-angular/src/lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.ts#L29)

---

### waveFormData

**waveFormData**: `number`[] = `[]`

The waveform data to visualize

#### Defined in

[projects/stream-chat-angular/src/lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.ts:33](https://github.com/GetStream/stream-chat-angular/blob/b8e03ec6da285f5e7c533ce710ebb946cded1190/projects/stream-chat-angular/src/lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.ts#L33)

---

### duration

`Optional` **duration**: `number`

The duration of the voice recording in seconds

#### Defined in

[projects/stream-chat-angular/src/lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.ts:37](https://github.com/GetStream/stream-chat-angular/blob/b8e03ec6da285f5e7c533ce710ebb946cded1190/projects/stream-chat-angular/src/lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.ts#L37)

[//]: # "End of generated content"


---

This page was last updated at 2026-05-19T19:58:47.766Z.

For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/angular/components/VoiceRecordingWavebarComponent/](https://getstream.io/chat/docs/sdk/angular/components/VoiceRecordingWavebarComponent/).