> ## Documentation Index
> Fetch the complete documentation index at: https://www.cometchat.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Voice Note Bubble

> A dedicated bubble for recorded voice notes with waveform playback, rendered when audio messages carry the voice_note metadata tag.

<Accordion title="AI Integration Quick Reference">
  ```json theme={null}
  {
    "component": "CometChatVoiceNoteBubble",
    "package": "@cometchat/chat-uikit-react",
    "import": "import { CometChatVoiceNoteBubble } from \"@cometchat/chat-uikit-react\";",
    "description": "Voice note bubble. Renders for audio messages explicitly tagged audioType='voice_note'. Renders the CometChatAudioBubble waveform player internally. Always standalone (no grid).",
    "cssRootClass": ".cometchat-audio-bubble",
    "selfExtracting": true,
    "props": {
      "data": {
        "message": { "type": "CometChat.MediaMessage", "required": true, "note": "Must have metadata audioType='voice_note'." },
        "alignment": { "type": "\"left\" | \"right\"", "note": "Defaults to sender-vs-logged-in-user." },
        "textFormatters": { "type": "CometChatTextFormatter[]" },
        "className": { "type": "string" }
      }
    }
  }
  ```
</Accordion>

## Overview

`CometChatVoiceNoteBubble` renders audio messages that were recorded via the composer's voice recorder. It renders using the `CometChatAudioBubble` waveform player (documented [below](#the-waveform-player)), giving voice notes a compact play/pause + waveform UI.

This bubble renders whenever an audio message carries `audioType: "voice_note"` in its metadata. Voice notes are always standalone — they never participate in batch grid layouts or multi-attachment grouping.

<Note>
  **Routing logic.** The audio plugin automatically routes messages based on metadata:

  * `audioType: "voice_note"` → `CometChatVoiceNoteBubble` (this component)
  * No `audioType` (attached audio files) → [Audio Bubble](/docs/ui-kit/react/components/audio-bubble) (`CometChatAudiosBubble`)

  You don't need to configure this — it's handled automatically by the plugin system.
</Note>

Key characteristics:

* **Waveform playback** — play/pause, seekable progress bar, elapsed/total time
* **Always standalone** — voice notes are never grouped or batched with other messages
* **Metadata-driven** — only used when the message has `audioType: "voice_note"` in metadata
* **Waveform player** — renders with the `CometChatAudioBubble` player and its CSS selectors

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

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

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

***

## Usage

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

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

***

## How Voice Notes Are Tagged

When a user records audio via the composer's voice recorder, the UIKit stamps `audioType: "voice_note"` into the message metadata before sending:

```json theme={null}
{
  "metadata": {
    "audioType": "voice_note"
  }
}
```

Audio files attached via the attachment menu do **not** receive this tag — they render as the [Audio Bubble](/docs/ui-kit/react/components/audio-bubble) (`CometChatAudiosBubble`) instead.

***

## Props

### message

The audio message (voice note). The bubble renders it with the `CometChatAudioBubble` waveform player. **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 any caption.

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

***

### className

Additional CSS class applied to the root element.

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

***

## The Waveform Player

Voice notes render with the `CometChatAudioBubble` waveform player — a compact single-audio player with play/pause controls, a waveform progress bar, elapsed/total time, and a download control. It self-extracts the audio attachment from the `message`, so it can also be used standalone to render a single audio waveform.

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

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

The player accepts the same core props — `message` (required), `alignment`, and `className`.

<Info>
  Attached audio **files** (not voice notes) render as stacked player cards via `CometChatAudiosBubble` — see the [Audio Bubble](/docs/ui-kit/react/components/audio-bubble) page.
</Info>

***

## CSS Selectors

The voice note renders with the `CometChatAudioBubble` waveform player, which uses these selectors:

| Target                | Selector                                                                |
| --------------------- | ----------------------------------------------------------------------- |
| Root                  | `.cometchat-audio-bubble`                                               |
| Sender / receiver     | `.cometchat-audio-bubble--sender` / `.cometchat-audio-bubble--receiver` |
| Container             | `.cometchat-audio-bubble__container`                                    |
| Play button           | `.cometchat-audio-bubble__play-button`                                  |
| Pause button          | `.cometchat-audio-bubble__pause-button`                                 |
| Waveform              | `.cometchat-audio-bubble__waveform`                                     |
| Progress (background) | `.cometchat-audio-bubble__progress-bg`                                  |
| 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 Bubble" icon="music" href="/docs/ui-kit/react/components/audio-bubble">
    Batch-aware bubble for attached audio files
  </Card>

  <Card title="Message Composer" icon="pen-to-square" href="/docs/ui-kit/react/components/message-composer">
    Voice recorder and multi-attachment staging
  </Card>

  <Card title="Image Bubble" icon="image" href="/docs/ui-kit/react/components/image-bubble">
    Batch-aware image bubble with grid layouts
  </Card>

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