> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-rn-guide-message-privately.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Audio Bubble

> A self-extracting bubble that renders an audio attachment with play/pause controls, a progress bar, duration, and download.

<Accordion title="AI Integration Quick Reference">
  ```json theme={null}
  {
    "component": "CometChatAudioBubble",
    "package": "@cometchat/chat-uikit-react",
    "import": "import { CometChatAudioBubble } from \"@cometchat/chat-uikit-react\";",
    "description": "Self-extracting audio bubble. Extracts the audio attachment and caption from a MediaMessage and renders inline playback controls.",
    "cssRootClass": ".cometchat-audio-bubble",
    "selfExtracting": true,
    "props": {
      "data": {
        "message": { "type": "CometChat.MediaMessage", "required": true, "note": "Drives extraction of audio attachments and caption." },
        "alignment": { "type": "\"left\" | \"right\"", "note": "Defaults to sender-vs-logged-in-user." },
        "textFormatters": { "type": "CometChatTextFormatter[]" },
        "className": { "type": "string" }
      }
    }
  }
  ```
</Accordion>

## Overview

`CometChatAudioBubble` renders an audio attachment with inline playback. It is **self-extracting**: pass the SDK `message` and the bubble derives the audio attachment(s) and caption itself, reading alignment and localization from hooks, so it works standalone. It shows play/pause controls, a seekable progress bar, elapsed/total time, and a download control.

<Info>
  **Live Preview** — interact with the audio bubble.

  [Open in Storybook ↗](https://storybook.cometchat.io/react/?path=/story/components-bubbles-message-bubble-audio--default)
</Info>

<iframe src="https://storybook.cometchat.io/react/iframe.html?id=components-bubbles-message-bubble-audio--default&viewMode=story&shortcuts=false&singleStory=true" className="w-full rounded-xl" loading="lazy" style={{height: "300px", border: "1px solid #e0e0e0"}} title="CometChat Audio Bubble — Default" allow="clipboard-write" />

***

## Usage

```tsx theme={null}
import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatAudioBubble } from "@cometchat/chat-uikit-react";

function AudioMessage({ message }: { message: CometChat.MediaMessage }) {
  return <CometChatAudioBubble message={message} />;
}
```

***

## Props

### message

The audio message. The bubble extracts attachments and caption from it. **Required.**

|          |                          |
| -------- | ------------------------ |
| Type     | `CometChat.MediaMessage` |
| Required | Yes                      |

***

### alignment

Override incoming/outgoing alignment. Defaults to sender-vs-logged-in-user.

|         |                     |
| ------- | ------------------- |
| Type    | `"left" \| "right"` |
| Default | derived             |

***

### textFormatters

Text formatters applied to the caption (mentions, URLs).

|         |                            |
| ------- | -------------------------- |
| Type    | `CometChatTextFormatter[]` |
| Default | `undefined`                |

***

### className

Additional CSS class applied to the root element.

|         |             |
| ------- | ----------- |
| Type    | `string`    |
| Default | `undefined` |

***

## CSS Selectors

| Target                | Selector                                                                |
| --------------------- | ----------------------------------------------------------------------- |
| Root                  | `.cometchat-audio-bubble`                                               |
| Sender / receiver     | `.cometchat-audio-bubble--sender` / `.cometchat-audio-bubble--receiver` |
| Play button           | `.cometchat-audio-bubble__play-button`                                  |
| Pause button          | `.cometchat-audio-bubble__pause-button`                                 |
| Progress (foreground) | `.cometchat-audio-bubble__progress-fg`                                  |
| Time                  | `.cometchat-audio-bubble__time`                                         |
| Download button       | `.cometchat-audio-bubble__download-button`                              |
| Caption               | `.cometchat-audio-bubble__caption`                                      |

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Audio Plugin" icon="microphone" href="/ui-kit/react/plugins/overview#built-in-plugins">
    Plugin behavior, context menu, and conversation preview
  </Card>

  <Card title="File Bubble" icon="file" href="/ui-kit/react/components/file-bubble">
    Render generic file attachments
  </Card>

  <Card title="Message Bubble" icon="comment" href="/ui-kit/react/components/message-bubble">
    The wrapper that hosts bubble content
  </Card>

  <Card title="Theming" icon="paintbrush" href="/ui-kit/react/theming">
    Customize colors, fonts, and spacing
  </Card>
</CardGroup>