# VoiceRecordingWavebarComponent

> **Info:** This is release candidate documentation for **Stream Chat Angular SDK v8**. For the latest stable version, see the [latest version (v7)](https://getstream.io/chat/docs/sdk/angular/).

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/v8/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?.custom?.waveform_data && attachment?.custom?.duration"
  [waveFormData]="attachment?.custom?.waveform_data || []"
  [duration]="attachment?.custom?.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/v8/services/CustomTemplatesService/#voicerecordingattachmenttemplate).

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

## Inputs and outputs

### audioElement

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

The audio element that plays the voice recording

#### Defined in

[lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.ts:29](https://github.com/GetStream/stream-chat-angular/blob/8ed7ea67ea3deb96c2ae7fcccfd82bd32ad7f184/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

[lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.ts:33](https://github.com/GetStream/stream-chat-angular/blob/8ed7ea67ea3deb96c2ae7fcccfd82bd32ad7f184/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

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

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

---

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