Audio Bubble

A self-extracting bubble that renders an audio attachment with play/pause controls, a progress bar, duration, and download.

AI Integration Quick Reference

{
  "component": "CometChatAudioBubble",
  "package": "@cometchat/chat-uikit-react",
  "import": "import { CometChatAudioBubble } from \"@cometchat/chat-uikit-react\";",
  "description": "Self-extracting audio bubble. Extracts the audio attachment and caption from a MediaMessage and renders inline playback controls.",
  "cssRootClass": ".cometchat-audio-bubble",
  "selfExtracting": 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

CometChatAudioBubble renders an audio attachment with inline playback. It is self-extracting: pass the SDK message and the bubble derives the audio attachment(s) and caption itself, reading alignment and localization from hooks, so it works standalone. It shows play/pause controls, a seekable progress bar, elapsed/total time, and a download control.

Live Preview — interact with the audio bubble.

Open in Storybook ↗

---

Usage

import { CometChat } from "@cometchat/chat-sdk-javascript";
import { CometChatAudioBubble } from "@cometchat/chat-uikit-react";

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

---

Props

message

The audio message. The bubble extracts 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-audio-bubble
Sender / receiver	.cometchat-audio-bubble--sender / .cometchat-audio-bubble--receiver
Play button	.cometchat-audio-bubble__play-button
Pause button	.cometchat-audio-bubble__pause-button
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 Plugin

Plugin behavior, context menu, and conversation preview

File Bubble

Render generic file attachments

Message Bubble

The wrapper that hosts bubble content

Theming

Customize colors, fonts, and spacing