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

# Voice Note Bubble

> A dedicated Angular bubble for recorded voice notes with waveform playback, rendered when an audio message carries the voice-note metadata tag.

The `CometChatVoiceNoteBubbleComponent` renders audio messages that were **recorded with the composer's voice recorder**. It is a thin wrapper that **delegates rendering** to [`CometChatAudioBubble`](/ui-kit/angular/components/cometchat-audio-bubble), 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`](/ui-kit/angular/components/cometchat-audios-bubble) 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.

<Note>
  **Routing.** For an `audio`-type message, [`CometChatMessageBubble`](/ui-kit/angular/components/cometchat-message-bubble) inspects `metadata.audioType`:

  * **`audioType: "voice_note"`** (canonical; legacy value `"voiceNote"` is also accepted) → `CometChatVoiceNoteBubble` (this component).
  * **No `audioType`** (attached audio files) → [`CometChatAudiosBubble`](/ui-kit/angular/components/cometchat-audios-bubble).

  Routing is automatic and applies when **[`enableMultipleAttachments`](/ui-kit/angular/components/cometchat-message-composer)** is `true` (the default). Absence of the tag is never treated as a voice note.
</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:

```json theme={null}
{
  "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`](/ui-kit/angular/components/cometchat-audios-bubble) instead.

## 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 a tagged voice-note message to `CometChatVoiceNoteBubbleComponent` automatically.

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

```typescript expandable theme={null}
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](/ui-kit/angular/components/cometchat-audio-bubble#styling-with-css-variables). 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.

## Related

* **[Audios Bubble](/ui-kit/angular/components/cometchat-audios-bubble)** — the multi-attachment bubble for attached audio files (non-voice-notes).
* **[Audio Bubble](/ui-kit/angular/components/cometchat-audio-bubble)** — the waveform bubble this component delegates to.
* **[Message Composer](/ui-kit/angular/components/cometchat-message-composer)** — records voice notes and stages other attachments.
* **[Message List](/ui-kit/angular/components/cometchat-message-list)** — routes messages to this bubble.