# VoiceRecorderWavebarComponent

> **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/).

The `VoiceRecorderWavebarComponent` displays the amplitudes of the recording while the recording is in progress

![Voice recorder wavebar](https://getstream.io/docs-assets/images/a2780daf436b.png)

The component doesn't have any inputs, instead it uses the [`AudioRecorderService`](https://getstream.io/chat/docs/sdk/angular/v8/services/AudioRecorderService/) and the [`AmplitudeRecorderService`](https://getstream.io/chat/docs/sdk/angular/v8/services/AmplitudeRecorderService/) to gather all necessary data.

## Usage

```html
<stream-voice-recorder-wavebar
  *ngIf="isRecording$ | async"
></stream-voice-recorder-wavebar>
```

```typescript
isRecording$: Observable<boolean>;

constructor(public readonly recorder: AudioRecorderService) {
    this.isRecording$ = this.recorder.recordingState$.pipe(map(s => s === MediaRecordingState.RECORDING || s === MediaRecordingState.PAUSED));
}
```

## Customization

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

## Inputs and outputs

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

---

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