---
url: https://talkjs.com/docs/UI_Components/Theme/Theme_components/AudioBlock
title: '<AudioBlock>'

minidoc-source: js
minidoc-lib: components
---

The `<AudioBlock>` component displays an audio attachment. If the audio attachment is a voice-recorded message, a [`<VoiceBlock>`](/UI_Components/Theme/Theme_components/VoiceBlock) is used instead.

## AudioBlockProps
/** */
export declare interface AudioBlockProps  {
/** The audio block to display. */
block: AudioBlock;
/** A collection of objects which are passed to all Chatbox theme components. */
common: CommonChatboxProps;
/** The URL used to download the file.
This URL is not the same as `block.url`. When the current user sends a file message, the `block.url` will hold a temporary `blob:` URL until that file is uploaded to TalkJS. The user can immediately see their file present in the chat, which makes for a smoother user experience.
The `downloadUrl` is the URL of the file once it is uploaded to TalkJS. As such, this property will be `undefined` until the upload is completed, while `block.url` will always be defined and should be used for preview purposes. */
downloadUrl?: string;
/** The message that this content block belongs to. */
message: MessageSnapshot;
}

## Example

In the default theme, the `<AudioBlock>` component is implemented as follows:

<GithubThemeComponent name="AudioBlock" />