# VoiceRecorderWavebarComponent

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

![Voice recorder wavebar](@chat-sdk/angular/v6/_assets/voice-recorder-wavebar.png)

The component doesn't have any inputs, instead it uses the [`AudioRecorderService`](/chat/docs/sdk/angular/v6/services/AudioRecorderService/) and the [`AmplitudeRecorderService`](/chat/docs/sdk/angular/v6/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"
[//]: # "End of generated content"

---

This page was last updated at 2025-11-25T16:21:25.855Z.

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