Skip to main content
Version: v4

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​

lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.ts:28

waveFormData​

• waveFormData: number[] = []

The waveform data to visualize

Defined in​

lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.ts:32

duration​

• Optional duration: number

The duration of the voice recording in seconds

Defined in​

lib/voice-recording/voice-recording-wavebar/voice-recording-wavebar.component.ts:36

Did you find this page helpful?