Voice Note Bubble - CometChat Docs

AI Integration Quick Reference

{
  "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" }
    }
  }
}

Overview

CometChatVoiceNoteBubble renders audio messages that were recorded via the composer’s voice recorder. It renders using the CometChatAudioBubble waveform player (documented below), 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.

Routing logic. The audio plugin automatically routes messages based on metadata:

audioType: "voice_note" → CometChatVoiceNoteBubble (this component)
No audioType (attached audio files) → Audio Bubble (CometChatAudiosBubble)

You don’t need to configure this — it’s handled automatically by the plugin system.

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

Live Preview — interact with the voice note bubble.Open in Storybook ↗

Usage

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:

{
  "metadata": {
    "audioType": "voice_note"
  }
}

Audio files attached via the attachment menu do not receive this tag — they render as the 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.

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.

Attached audio files (not voice notes) render as stacked player cards via CometChatAudiosBubble — see the Audio Bubble page.

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

Audio Bubble

Batch-aware bubble for attached audio files

Message Composer

Voice recorder and multi-attachment staging

Image Bubble

Batch-aware image bubble with grid layouts

Message List

Multi-attachment batch grouping in the list

​Overview

​Usage

​How Voice Notes Are Tagged

​Props

​message

​alignment

​textFormatters

​className

​The Waveform Player

​CSS Selectors

​Next Steps

Audio Bubble

Message Composer

Image Bubble

Message List

Overview

Usage

How Voice Notes Are Tagged

Props

message

alignment

textFormatters

className

The Waveform Player

CSS Selectors

Next Steps