# VoiceRecordingWavebarComponent

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

![Wavebar Screenshot](https://getstream.io/docs-assets/images/684dd2762b26.png)

## Usage

The built-in [`AttachmentListComponent`](https://getstream.io/chat/docs/sdk/angular/v5/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`](https://getstream.io/chat/docs/sdk/angular/v5/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/d65326c9379c93c53babc4e0ffe54519dd0712a9/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/d65326c9379c93c53babc4e0ffe54519dd0712a9/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/d65326c9379c93c53babc4e0ffe54519dd0712a9/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-08-11T17:19:01.842Z.

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