Voice Note Bubble - CometChat Docs

The CometChatVoiceNoteBubbleComponent renders audio messages that were recorded with the composer’s voice recorder. It is a thin wrapper that delegates rendering to CometChatAudioBubble, providing the same waveform playback UI (play/pause, seekable progress, elapsed/total time). It exists as a distinct component so the message-bubble routing can pick it over CometChatAudiosBubble for voice notes, based on the message metadata.

Overview

Waveform playback — inherited from the audio bubble (play/pause, seek, time readout).
Metadata-driven — rendered only for audio messages tagged as voice notes.
Always standalone — voice notes are recorded and sent individually, so they never participate in multi-attachment batch grouping.

Routing. For an audio-type message, CometChatMessageBubble inspects metadata.audioType:

audioType: "voice_note" (canonical; legacy value "voiceNote" is also accepted) → CometChatVoiceNoteBubble (this component).
No audioType (attached audio files) → CometChatAudiosBubble.

Routing is automatic and applies when enableMultipleAttachments is true (the default). Absence of the tag is never treated as a voice note.

How Voice Notes Are Tagged

When a user records audio with the composer’s voice recorder, the UI Kit stamps audioType: "voice_note" into the message metadata before sending:

{
  "metadata": {
    "audioType": "voice_note"
  }
}

The "voice_note" value is the cross-platform canonical tag, so voice notes recorded on Angular render as voice notes on React, iOS, and Android too. Audio files attached from the attachment menu do not receive this tag — they render as a CometChatAudiosBubble instead.

Automatic Rendering

In the standard chat flow you do not instantiate this component yourself. CometChatMessageList renders CometChatMessageBubble, which routes a tagged voice-note message to CometChatVoiceNoteBubbleComponent automatically. 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 {
  CometChatVoiceNoteBubbleComponent,
  MessageBubbleAlignment,
} from '@cometchat/chat-uikit-angular';

@Component({
  selector: 'app-voice-note-message',
  standalone: true,
  imports: [CometChatVoiceNoteBubbleComponent],
  template: `
    <cometchat-voice-note-bubble
      [message]="voiceNoteMessage"
      [alignment]="MessageBubbleAlignment.left"
    ></cometchat-voice-note-bubble>
  `,
})
export class VoiceNoteMessageComponent {
  voiceNoteMessage!: CometChat.MediaMessage;
  MessageBubbleAlignment = MessageBubbleAlignment;
}

Incoming vs Outgoing Messages

import { Component } from '@angular/core';
import { CometChat } from '@cometchat/chat-sdk-javascript';
import {
  CometChatVoiceNoteBubbleComponent,
  MessageBubbleAlignment,
} from '@cometchat/chat-uikit-angular';

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

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

Properties

Property	Type	Default	Description
`message`	`CometChat.MediaMessage`	required	The voice-note message. Rendering is delegated to the audio bubble.
`alignment`	`MessageBubbleAlignment`	`MessageBubbleAlignment.left`	Bubble alignment. `left` for incoming/receiver, `right` for outgoing/sender.

This component emits no outputs.

Customization

CometChatVoiceNoteBubble delegates to cometchat-audio-bubble, so it inherits that bubble’s styling (for example .cometchat-audio-bubble__play-button, .cometchat-audio-bubble__progress-fg) — see its styling reference. Style the underlying audio bubble to restyle voice notes.

Technical Details

Standalone component — import and use independently; exported as CometChatVoiceNoteBubbleComponent from @cometchat/chat-uikit-angular.
Change detection — OnPush.
Delegation — renders through cometchat-audio-bubble (the waveform player).
Not batched — voice notes are sent individually and are not grouped with other attachments.
No outputs — the component emits no events.

Audios Bubble — the multi-attachment bubble for attached audio files (non-voice-notes).
Audio Bubble — the waveform bubble this component delegates to.
Message Composer — records voice notes and stages other attachments.
Message List — routes messages to this bubble.

​Overview

​How Voice Notes Are Tagged

​Automatic Rendering

​Basic Usage

​Incoming vs Outgoing Messages

​Properties

​Customization

​Technical Details

​Related