> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-platform-docs-release.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Audio Plugin

> Renders audio messages with waveform visualization, playback controls, and download.

<Accordion title="AI Integration Quick Reference">
  | Field                | Value                                                                               |
  | -------------------- | ----------------------------------------------------------------------------------- |
  | Plugin ID            | `audio`                                                                             |
  | Package              | `@cometchat/chat-uikit-react`                                                       |
  | Message Types        | `audio`                                                                             |
  | Message Categories   | `message`                                                                           |
  | Included by Default  | Yes                                                                                 |
  | Bubble Component     | `CometChatAudioBubble`                                                              |
  | Conversation Preview | Audio                                                                               |
  | Context Menu         | React, Reply, Reply in Thread, Info, Delete, Report, Mark Unread, Message Privately |
</Accordion>

## Overview

The Audio plugin handles messages of type `audio` in category `message`. It renders an audio player with waveform visualization (via WaveSurfer.js), play/pause controls, duration display, and a download button.

<Info>
  **Live Preview** — interact with the audio message bubble.

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

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

***

## Bubble Rendering

* **Waveform player** — WaveSurfer.js-powered waveform visualization with play/pause toggle
* **Duration** — displays total duration and current playback position
* **Download button** — download with progress indicator
* **Multiple audio files** — expand/collapse list
* **Caption** — rendered below the player, formatted with text formatters
* **Pending state** — renders from local blob URL while uploading

***

## Context Menu Options

Same as [Image Plugin](/ui-kit/react/v7/plugins/image) — standard media options (React, Reply, Reply in Thread, Info, Delete, Report, Mark Unread, Message Privately).

***

## Conversation Preview

Returns: `Audio` (localized via `conversation_subtitle_audio` key)

***

## CSS Selectors

| Target             | Selector                               |
| ------------------ | -------------------------------------- |
| Bubble root        | `.cometchat-audio-bubble`              |
| Waveform container | `.cometchat-audio-bubble__waveform`    |
| Play/pause button  | `.cometchat-audio-bubble__play-button` |
| Duration text      | `.cometchat-audio-bubble__duration`    |
| Download button    | `.cometchat-audio-bubble__download`    |
| Caption            | `.cometchat-audio-bubble__caption`     |