# VoiceRecordingWavebarComponent

> **Info:** This is documentation for **Stream Chat Angular SDK v7**, which is no longer actively maintained. For up-to-date documentation, see the [latest version (v8)](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/v7/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/v7/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"

---

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