Audios Bubble - CometChat Docs

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

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.

This routing is automatic — you don’t configure it.

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.

This bubble is selected only when enableMultipleAttachments is true (the default) on CometChatMessageBubble, and only for audio messages that are not voice notes. When it is false, audio messages fall back to the deprecated single-attachment CometChatAudioBubble.

Automatic Rendering

In the standard chat flow you do not instantiate this component yourself. CometChatMessageList renders CometChatMessageBubble, 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

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

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.

Angular expresses batch grouping as the two booleans isFirstInBatch / isLastInBatch (computed by CometChatMessageList). 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.

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`

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` 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.

Voice Note Bubble — the bubble for recorded voice notes (audioType: "voice_note").
Audio Bubble — the single-attachment waveform bubble.
Files Bubble — the multi-attachment bubble for generic files.
Message Composer — stages multiple attachments and sends them as a batch.
Message List — routes messages to this bubble and computes batch grouping.

​Overview

​Automatic Rendering

​Basic Usage

​Incoming vs Outgoing Messages

​Player Row Layout

​Batch Grouping

​Properties

​CSS Selectors

​Relationship to the Legacy Audio Bubble

​Technical Details

​Related

Overview

Automatic Rendering

Basic Usage

Incoming vs Outgoing Messages

Player Row Layout

Batch Grouping

Properties

CSS Selectors

Relationship to the Legacy Audio Bubble

Technical Details

Related