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

# Audio Bubble

> A batch-aware bubble that renders one or more audio file attachments with inline playback cards, seek controls, and download.

<Accordion title="AI Integration Quick Reference">
  ```json theme={null}
  {
    "component": "CometChatAudiosBubble",
    "package": "@cometchat/chat-uikit-react",
    "import": "import { CometChatAudiosBubble } from \"@cometchat/chat-uikit-react\";",
    "description": "Batch-aware audio bubble for attached audio files. Renders stacked audio cards with play/pause, seekable slider, duration, and download. NOT used for voice notes — see CometChatVoiceNoteBubble.",
    "cssRootClass": ".cometchat-audios-bubble",
    "selfExtracting": true,
    "multiAttachment": 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

`CometChatAudiosBubble` renders audio file attachment(s) as stacked playback cards. It is **self-extracting**: pass the SDK `message` and the bubble derives the audio attachments and caption itself. The message list uses it automatically for audio messages that do **not** carry the `audioType: "voice_note"` metadata tag (voice notes render as a [Voice Note Bubble](/ui-kit/react/components/voice-note-bubble) instead).

<Note>
  **Audio files vs Voice notes.** The audio plugin routes messages by the `audioType` metadata key:

  * **No `audioType`** (attached audio files) → `CometChatAudiosBubble` (this component)
  * **`audioType: "voice_note"`** (recorded via voice recorder) → [Voice Note Bubble](/ui-kit/react/components/voice-note-bubble)

  This distinction is automatic — you don't need to configure it.
</Note>

Key capabilities:

* **Stacked audio cards** — one card per audio attachment with filename, play/pause, seekable slider, elapsed/total time
* **Inline playback** — plays audio directly in the bubble without a fullscreen viewer
* **Download button** — download individual audio files
* **Batch grouping** — rendered as one connected group when several media messages are sent together (handled by the [message list](/ui-kit/react/components/message-list#multi-attachment-batch-grouping))
* **Caption support** — optional caption rendered below the cards

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

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

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

***

## Usage

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

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

***

## Audio Card Layout

Each attachment renders as a card with:

| Element           | Description                                    |
| ----------------- | ---------------------------------------------- |
| Play/Pause button | Toggles playback for that audio file           |
| Filename          | Display name of the audio file                 |
| Seek slider       | Seekable progress bar showing current position |
| Time display      | `currentTime / totalDuration` in `m:ss` format |
| Download button   | Downloads the audio file                       |

When a message has multiple audio attachments, cards stack vertically.

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

***

## Props

### message

The audio message. The bubble extracts its 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-audios-bubble`                   |
| Incoming variant                 | `.cometchat-audios-bubble--incoming`         |
| Outgoing variant                 | `.cometchat-audios-bubble--outgoing`         |
| Container                        | `.cometchat-audios-bubble__container`        |
| Multi-card container             | `.cometchat-audios-bubble__container--multi` |
| Audio card                       | `.cometchat-audios-bubble__card`             |
| Play button                      | `.cometchat-audios-bubble__play-btn`         |
| Play button icon                 | `.cometchat-audios-bubble__play-btn-icon`    |
| Card body (name + slider + time) | `.cometchat-audios-bubble__body`             |
| Filename                         | `.cometchat-audios-bubble__name`             |
| Seek slider                      | `.cometchat-audios-bubble__slider`           |
| Time display                     | `.cometchat-audios-bubble__time`             |
| Expand/collapse toggle           | `.cometchat-audios-bubble__toggle`           |
| Caption                          | `.cometchat-audios-bubble__caption`          |

***

## Next Steps

<CardGroup cols={2}>
  <Card title="Voice Note Bubble" icon="microphone" href="/ui-kit/react/components/voice-note-bubble">
    Waveform bubble for recorded voice notes
  </Card>

  <Card title="File Bubble" icon="file" href="/ui-kit/react/components/file-bubble">
    Batch-aware file bubble with stacked cards
  </Card>

  <Card title="Message List" icon="messages" href="/ui-kit/react/components/message-list">
    Multi-attachment batch grouping in the list
  </Card>

  <Card title="Message Composer" icon="pen-to-square" href="/ui-kit/react/components/message-composer">
    Multi-attachment staging tray
  </Card>
</CardGroup>