# VoiceRecordingComponent

> **Info:** This is release candidate documentation for **Stream Chat Angular SDK v8**. For the latest stable version, see the [latest version (v7)](https://getstream.io/chat/docs/sdk/angular/).

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

![Voice Recording Screenshot](https://getstream.io/docs-assets/images/ad2470085f43.png)

## Usage

The built-in [`AttachmentListComponent`](https://getstream.io/chat/docs/sdk/angular/v8/components/AttachmentListComponent/) displays this component. If you want to use this directly in your UI you can do it like this:

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

## Customization

You can provide your own template using the [custom templates service](https://getstream.io/chat/docs/sdk/angular/v8/services/CustomTemplatesService/#voicerecordingattachmenttemplate).

## Example

An example voice recording attachment (the metadata of the recording is stored in the `custom` field of the attachment):

```typescript
{
  type: 'voiceRecording',
  title: '99831FB3-5E35-41CD-8286-7A2E95A78FDC.aac',
  asset_url:
    '<link to file on Stream or custom CDN>',
  custom: {
    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',
  },
};
```

[//]: # "Start of generated content"

## Inputs and outputs

### attachment

`Optional` **attachment**: `Attachment`

The voice recording attachment

#### Defined in

[lib/voice-recording/voice-recording.component.ts:28](https://github.com/GetStream/stream-chat-angular/blob/8ed7ea67ea3deb96c2ae7fcccfd82bd32ad7f184/projects/stream-chat-angular/src/lib/voice-recording/voice-recording.component.ts#L28)

[//]: # "End of generated content"

---

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