# Voice Recording Attachment
Audio attachments recorded from the chat UI are called voice recordings. The SDK provides a default [VoiceRecording](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/VoiceRecording.tsx) implementation, which renders either `VoiceRecordingPlayer` or `QuotedVoiceRecording`.
`VoiceRecordingPlayer` appears in the attachment list and plays the audio.
`QuotedVoiceRecording` displays a compact summary in quoted replies.
## Best Practices
- Preserve both `VoiceRecordingPlayer` and `QuotedVoiceRecording` for clarity.
- Keep custom playback rates minimal to avoid cluttered controls.
- Provide fallback UI for missing duration/title/waveform data.
- Use CSS tweaks for small display changes before replacing components.
- Test playback controls on mobile and low-bandwidth connections.
## Attachment payload
Voice recording attachments include the following properties:
These properties serve the following purpose:
| Property | Description |
| ----------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| **asset_url** | the URL where the voice recording is downloaded from |
| **duration** | the audio duration in seconds |
| **file_size** | the file size in bytes (displayed as fallback to duration if duration is not available) |
| **mime_type** | the file type that is later reflected in the icon displayed in the voice recording attachment widget |
| **title** | the audio title |
| **type** | the value will always be `"voiceRecording"` |
| **waveform_data** | the array of fractional number values between 0 and 1. These values represent the amplitudes later reflected in the [WaveProgressBar](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/components/WaveProgressBar.tsx) |
## VoiceRecordingPlayer
### Navigation
Click the waveform or drag the progress indicator to seek. The indicator moves to the click/drag position and the preceding bars highlight to show progress.
### Playback speed change
Change playback speed with [`PlaybackRateButton`](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/components/PlaybackRateButton.tsx). It appears only during playback. Repeated clicks cycle rates; after the max rate, it resets to the initial value.
## UI Fallbacks
### Missing duration
If duration is missing from the [attachment payload](/chat/docs/sdk/react/v13/components/message-components/attachment/voice-recording/#attachment-payload/), both `VoiceRecordingPlayer` and `QuotedVoiceRecording` display file size instead.
### Missing title
If the voice recording has no title, a fallback title is shown.
### Missing `waveform_data`
If `waveform_data` is empty, no progress bar is rendered.
## Default components customization
Customize the default `VoiceRecording` in two steps:
1. Create a custom voice recording component (e.g. `CustomVoiceRecording`). It will serve as a wrapper component that renders `VoiceRecordingPlayer` resp. `QuotedVoiceRecording`. Pass props to these components.
2. Create a custom attachment component (e.g. `CustomAttachment`), that will be again a wrapper around the SDK's `Attachment` component. Pass the custom voice recording component to the `Attachment` component via prop `VoiceRecording`.
### Provide custom list of playback speeds
You can override the default list of playback rates by overriding the [VoiceRecording](https://github.com/GetStream/stream-chat-react/blob/master/src/components/Attachment/VoiceRecording.tsx) component.
Example:
```typescript jsx
import {
Attachment,
AttachmentProps,
VoiceRecordingPlayer,
VoiceRecordingProps,
Channel,
QuotedVoiceRecording,
} from 'stream-chat-react';
import { ChannelInner } from './ChannelInner';
const CustomVoiceRecording = ({ attachment, isQuoted }: VoiceRecordingProps) =>
isQuoted ? (
) : (
);
const CustomAttachment = (props: AttachmentProps) => (
);
const App = () => (
);
export default App;
```
### Remove title
This could be solved by customizing the styles. You can stop displaying the recording title by tweaking the CSS:
```css
.str-chat__message-attachment__voice-recording-widget__title {
display: none;
}
```
### Customize the fallback title
If you do not like our fallback title, you can change it by changing the translation key `"Voice message"`.
### Other customizations
If you would like to perform the following customizations:
- change the progress bar
- change the file icon SVG
We recommend assembling your own components to display voice data and playback UI, then passing them into the custom attachment component above.
`VoiceRecordingPlayer` and `QuotedVoiceRecording` are small components, so the default implementations are good references.
---
This page was last updated at 2026-04-21T07:55:47.555Z.
For the most recent version of this documentation, visit [https://getstream.io/chat/docs/sdk/react/v13/components/message-components/attachment/voice-recording/](https://getstream.io/chat/docs/sdk/react/v13/components/message-components/attachment/voice-recording/).