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

# Audios Bubble

> A batch-aware Angular bubble that renders one or more attached audio files as inline player rows with play/pause, a seek slider, duration, and per-file download.

The `CometChatAudiosBubbleComponent` renders the audio-file attachment(s) of a `CometChat.MediaMessage` as a stack of inline player rows. It is the **multi-attachment counterpart** to [`CometChatAudioBubble`](/ui-kit/angular/components/cometchat-audio-bubble) for **attached audio files**.

Unlike the other media batch bubbles, this bubble is **custom-rendered** — it does not delegate to the single-attachment audio bubble. It extracts the audio attachments itself (via `extractAudioAttachments`) and draws its own WhatsApp-style player rows. The caption is rendered with a nested [`cometchat-text-bubble`](/ui-kit/angular/components/cometchat-text-bubble).

<Note>
  **Audio files vs. voice notes.** Audio routing is decided by the `metadata.audioType` tag:

  * **No `audioType`** (audio files attached from the composer) → `CometChatAudiosBubble` (this component).
  * **`audioType: "voice_note"`** (recorded with the composer's voice recorder; legacy value `"voiceNote"` is also accepted) → [`CometChatVoiceNoteBubble`](/ui-kit/angular/components/cometchat-voice-note-bubble).

  This routing is automatic — you don't configure it.
</Note>

## Overview

* **Inline player rows** — one row per audio attachment with a play/pause button, file name, seek slider, and an elapsed/total time readout.
* **Single active playback** — starting one row pauses any other row that is currently playing.
* **Per-file download** — each row with a resolvable URL shows a download button.
* **Collapsible list** — the first **3** rows are shown; additional rows collapse behind a **"+N more"** toggle.
* **Caption support** — an optional caption is rendered below the rows via a nested text bubble.

<Note>
  This bubble is selected only when **[`enableMultipleAttachments`](/ui-kit/angular/components/cometchat-message-composer)** is `true` (the default) on [`CometChatMessageBubble`](/ui-kit/angular/components/cometchat-message-bubble), and only for audio messages that are **not** voice notes. When it is `false`, audio messages fall back to the deprecated single-attachment [`CometChatAudioBubble`](/ui-kit/angular/components/cometchat-audio-bubble).
</Note>

## Automatic Rendering

In the standard chat flow you do **not** instantiate this component yourself. [`CometChatMessageList`](/ui-kit/angular/components/cometchat-message-list) renders [`CometChatMessageBubble`](/ui-kit/angular/components/cometchat-message-bubble), which routes an `audio`-type message with no voice-note tag to `CometChatAudiosBubbleComponent` when `enableMultipleAttachments` is on.

Use the component directly only when you are building a fully custom message renderer.

## Basic Usage

```typescript expandable theme={null}
import { Component } from '@angular/core';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import {
  CometChatAudiosBubbleComponent,
  MessageBubbleAlignment,
} from '@cometchat/chat-uikit-angular';

@Component({
  selector: 'app-audio-message',
  standalone: true,
  imports: [CometChatAudiosBubbleComponent],
  template: `
    <cometchat-audios-bubble
      [message]="audioMessage"
      [alignment]="MessageBubbleAlignment.left"
    ></cometchat-audios-bubble>
  `,
})
export class AudioMessageComponent {
  audioMessage!: CometChat.MediaMessage;
  MessageBubbleAlignment = MessageBubbleAlignment;
}
```

### Incoming vs Outgoing Messages

```typescript expandable theme={null}
import { Component } from '@angular/core';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import {
  CometChatAudiosBubbleComponent,
  MessageBubbleAlignment,
} from '@cometchat/chat-uikit-angular';

@Component({
  selector: 'app-audio-list',
  standalone: true,
  imports: [CometChatAudiosBubbleComponent],
  template: `
    <!-- Incoming audio (left-aligned) -->
    <cometchat-audios-bubble
      [message]="incoming"
      [alignment]="MessageBubbleAlignment.left"
    ></cometchat-audios-bubble>

    <!-- Outgoing audio (right-aligned) -->
    <cometchat-audios-bubble
      [message]="outgoing"
      [alignment]="MessageBubbleAlignment.right"
    ></cometchat-audios-bubble>
  `,
})
export class AudioListComponent {
  incoming!: CometChat.MediaMessage;
  outgoing!: CometChat.MediaMessage;
  MessageBubbleAlignment = MessageBubbleAlignment;
}
```

## Player Row Layout

Each attachment renders as a row with:

| Element             | Description                                                                  |
| ------------------- | ---------------------------------------------------------------------------- |
| Play / pause button | Toggles playback for that audio file. Starting one row pauses any other row. |
| File name           | Display name of the audio file (ellipsized).                                 |
| Seek slider         | Seekable `range` input showing the current position.                         |
| Duration            | Elapsed / total time, e.g. `00:32/01:15` (zero-padded `mm:ss`).              |
| Download button     | Downloads the file. Shown only when the attachment has a resolvable URL.     |

When a message has more than **3** audio attachments, the extra rows collapse behind a **"+N more"** toggle. Clicking it expands the full list; a "Show less" toggle collapses it again.

## Batch Grouping

When a user sends several media messages together, each message is stamped with a shared `metadata.batchId`. The message list groups consecutive messages that share a `batchId` and marks each one with `isFirstInBatch` / `isLastInBatch` flags, which control the avatar, spacing, and footer so the batch reads as a single visual block.

<Info>
  Angular expresses batch grouping as the two booleans `isFirstInBatch` / `isLastInBatch` (computed by [`CometChatMessageList`](/ui-kit/angular/components/cometchat-message-list)). There is no `batchPosition` input on the bubble. The bubble caps its width with the `--cometchat-multi-attachment-width` CSS token (default `400px`), shared with the other media batch bubbles.
</Info>

## Properties

| Property    | Type                     | Default                       | Description                                                                                                                |
| ----------- | ------------------------ | ----------------------------- | -------------------------------------------------------------------------------------------------------------------------- |
| `message`   | `CometChat.MediaMessage` | **required**                  | The audio message. Attachments and caption are extracted from it.                                                          |
| `alignment` | `MessageBubbleAlignment` | `MessageBubbleAlignment.left` | Bubble alignment. `left` for incoming/receiver, `right` for outgoing/sender (`right` renders the sender/outgoing variant). |

This component emits no outputs.

## CSS Selectors

This is the one media batch bubble with its own rendered DOM, so it exposes its own selectors:

| Target                              | Selector                                     |
| ----------------------------------- | -------------------------------------------- |
| Root wrapper                        | `.cometchat-audios-bubble`                   |
| Outgoing (sender) variant           | `.cometchat-audios-bubble--sender`           |
| Rows container                      | `.cometchat-audios-bubble__container`        |
| Multi-row container                 | `.cometchat-audios-bubble__container--multi` |
| Audio row                           | `.cometchat-audios-bubble__item`             |
| Play / pause button                 | `.cometchat-audios-bubble__play`             |
| Play / pause icon                   | `.cometchat-audios-bubble__play-icon`        |
| Row body (name + slider + duration) | `.cometchat-audios-bubble__body`             |
| File name                           | `.cometchat-audios-bubble__name`             |
| Seek slider                         | `.cometchat-audios-bubble__slider`           |
| Duration text                       | `.cometchat-audios-bubble__duration`         |
| Download button                     | `.cometchat-audios-bubble__download`         |
| Download icon                       | `.cometchat-audios-bubble__download-icon`    |
| "Show more" / "Show less" toggle    | `.cometchat-audios-bubble__toggle`           |
| Toggle chevron                      | `.cometchat-audios-bubble__toggle-icon`      |
| Caption                             | `.cometchat-audios-bubble__caption`          |

```css expandable theme={null}
cometchat-audios-bubble {
  /* Caps the bubble width; shared with the other media batch bubbles (default 400px). */
  --cometchat-multi-attachment-width: 400px;
}

/* Example: recolor the play/pause disc */
.cometchat-audios-bubble__play {
  background: var(--cometchat-primary-color);
}
```

## Relationship to the Legacy Audio Bubble

|                      | `CometChatAudioBubble` (legacy)                  | `CometChatAudiosBubble` (multi-attachment)                                                             |
| -------------------- | ------------------------------------------------ | ------------------------------------------------------------------------------------------------------ |
| Routed by the list   | Only when `enableMultipleAttachments` is `false` | Default for attached audio files (non-voice-notes)                                                     |
| Multiple attachments | No                                               | Yes (stacked rows, collapse after 3)                                                                   |
| Rendering            | Waveform player                                  | Custom inline player rows                                                                              |
| Voice notes          | Handled by this bubble in legacy mode            | Routed to [`CometChatVoiceNoteBubble`](/ui-kit/angular/components/cometchat-voice-note-bubble) instead |
| Availability         | Deprecated standalone                            | Public standalone component                                                                            |

## Technical Details

* **Standalone component** — import and use independently; exported as `CometChatAudiosBubbleComponent` from `@cometchat/chat-uikit-angular`.
* **Change detection** — `OnPush`.
* **Self-extracting** — builds its rows from `extractAudioAttachments(message)` and its caption from `getMediaCaption(message)`; no delegation.
* **Collapse threshold** — the first 3 rows are shown; the rest collapse behind a "+N more" toggle.
* **No outputs** — the component emits no events.

## Related

* **[Voice Note Bubble](/ui-kit/angular/components/cometchat-voice-note-bubble)** — the bubble for recorded voice notes (`audioType: "voice_note"`).
* **[Audio Bubble](/ui-kit/angular/components/cometchat-audio-bubble)** — the single-attachment waveform bubble.
* **[Files Bubble](/ui-kit/angular/components/cometchat-files-bubble)** — the multi-attachment bubble for generic files.
* **[Message Composer](/ui-kit/angular/components/cometchat-message-composer)** — stages multiple attachments and sends them as a batch.
* **[Message List](/ui-kit/angular/components/cometchat-message-list)** — routes messages to this bubble and computes batch grouping.