This is documentation for the release candidate Stream Chat Angular SDK v6. For the latest stable version, see the latest version (v5).

VoiceRecordingWavebarComponent

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

Wavebar Screenshot

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

© Getstream.io, Inc. All Rights Reserved.