Audio Bubble - CometChat Docs

AI Integration Quick Reference

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

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 instead).

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

This distinction is automatic — you don’t need to configure it.

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)
Caption support — optional caption rendered below the cards

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

Usage

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.

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

Voice Note Bubble

Waveform bubble for recorded voice notes

File Bubble

Batch-aware file bubble with stacked cards

Message List

Multi-attachment batch grouping in the list

Message Composer

Multi-attachment staging tray

​Overview

​Usage

​Audio Card Layout

​Props

​message

​alignment

​textFormatters

​className

​CSS Selectors

​Next Steps

Voice Note Bubble

File Bubble

Message List

Message Composer

Overview

Usage

Audio Card Layout

Props

message

alignment

textFormatters

className

CSS Selectors

Next Steps