Audio Bubble

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

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