VoiceRecordingComponent

This component can be used to display an attachment with type voiceRecording. The component allows playing the attachment inside the browser.

Usage

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

<stream-voice-recording [attachment]="attachment"></stream-voice-recording>

Customization

You can provide your own template using the custom templates service.

Example

An example voice recording attachment:

{
  type: 'voiceRecording',
  title: '99831FB3-5E35-41CD-8286-7A2E95A78FDC.aac',
  asset_url:
    '<link to file on Stream or custom CDN>',
  waveform_data: [
    0.18580253422260284, 0.22792305052280426, 0.23014479875564575,
    0.2215365618467331, 0.280057817697525, 0.24526794254779816,
    0.23399925231933594, 0.3128012716770172, 0.37945452332496643,
    0.33992674946784973, 0.33231520652770996, 0.35996779799461365,
    0.24952147901058197, 0.2771506607532501, 0.18567748367786407,
    0.2669936418533325, 0.2318495213985443, 0.266754150390625,
    0.24599547684192657, 0.22025825083255768, 0.2574225664138794,
    0.2297886610031128, 0.21858176589012146, 0.22855964303016663,
    0.21926963329315186, 0.1592704802751541, 0.17932571470737457,
    0.17183426022529602, 0.16925041377544403, 0.17725585401058197,
    0.20863258838653564, 0.15763725340366364, 0.17838287353515625,
    0.2596689462661743, 0.2821672856807709, 0.2308555543422699,
    0.21800407767295837, 0.237264484167099, 0.24341285228729248,
    0.21091987192630768, 0.22752471268177032, 0.28887689113616943,
    0.25566428899765015, 0.2714449167251587, 0.30015745759010315,
    0.2883681356906891, 0.28020721673965454, 0.21566811203956604,
    0.2041303962469101, 0.1856091320514679, 0.22570304572582245,
    0.22362418472766876, 0.18938171863555908, 0.2105405479669571,
    0.22487449645996094, 0.2667095959186554, 0.29159706830978394,
    0.2825489938259125, 0.2347666174173355, 0.2768406569957733,
    0.2953290641307831, 0.26249200105667114, 0.3034127950668335,
    0.26899436116218567, 0.2931807041168213, 0.24274344742298126,
    0.23544998466968536, 0.29423996806144714, 0.2060961127281189,
    0.05098915100097656, 0.0063146972097456455, 0.015633393079042435,
    0.03022758476436138, 0.026124343276023865, 0.014958725310862064,
    0.01488060038536787, 0.0297449491918087, 0.046876221895217896,
    0.016678161919116974, 0.030463561415672302, 0.022851256653666496,
    0.040972135961055756, 0.050609588623046875, 0.04940780624747276,
    0.04304153472185135, 0.08744628727436066, 0.0762052908539772,
    0.0801474004983902, 0.0818980410695076, 0.08521285653114319,
    0.07830711454153061, 0.07637504488229752, 0.09124496579170227,
    0.16371025145053864, 0.08206146210432053, 0.0569305419921875,
    0.043944090604782104, 0.07224594056606293, 0.06922554224729538,
    5.340576194612368e-7,
  ],
  // in seconds
  duration: 21.07675,
  // in bytes
  file_size: 56504,
  mime_type: 'audio/aac',
};

Inputs and outputs

attachment

Optional attachment: Attachment<DefaultStreamChatGenerics>

The voice recording attachment

Defined in

projects/stream-chat-angular/src/lib/voice-recording/voice-recording.component.ts:29

VoiceRecorderWavebarComponent

VoiceRecordingWavebarComponent