VoiceRecordingWavebarComponent

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

Usage

The built-in AttachmentListComponent component displays this component. If you want to use this directly in your UI you can do it like this:

<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.

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

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

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