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

# Audio Bubble

> Audio Bubble — CometChat documentation.

`CometChatAudioBubble` is the content view for a [MediaMessage](/sdk/flutter/send-message#media-message) if the media sent is an audio.

## Properties

| Properties                      | Type                                                                 | Description                                                                         |
| ------------------------------- | -------------------------------------------------------------------- | ----------------------------------------------------------------------------------- |
| **audioUrl**                    | String                                                               | the path of the image to display                                                    |
| **placeholderImage**            | String                                                               | the path of the image from assets to display when the actual image is being fetched |
| **placeHolderImagePackageName** | String                                                               | the package of the asset image to display when the actual image is being fetched    |
| **title**                       | String                                                               | a text to display as name of the audio file                                         |
| **subtitle**                    | String                                                               | a text to display below the name of the audio file                                  |
| **style**                       | [AudioBubbleStyle](/ui-kit/flutter/v4/audio-bubble#audiobubblestyle) | used to customize appearance of this widget                                         |
| **theme**                       | [CometChatTheme](/ui-kit/flutter/v4/theme)                           | used to set custom theme                                                            |
| **playIcon**                    | Icon                                                                 | customize the icon to display to play the audio                                     |
| **pauseIcon**                   | Icon                                                                 | customize the icon to display to pause the audio                                    |

***

## AudioBubbleStyle

AudioBubbleStyle is the class containing attributes to customize appearance of this widget.

| Properties        | Type      | Description                                                    |
| ----------------- | --------- | -------------------------------------------------------------- |
| **titleStyle**    | TextStyle | used to set style of the name of the audio file                |
| **subtitleStyle** | TextStyle | used to set style of the text below the name of the audio file |
| **playIconTint**  | Color     | used to provide color to the audio play icon                   |
| **pauseIconTint** | Color     | used to provide color to the audio pause icon                  |
| **height**        | double    | used to set height                                             |
| **width**         | double    | used to set width                                              |
| **background**    | Color     | used to set background color                                   |
| **gradient**      | Gradient  | used to set a gradient background                              |
| **border**        | BoxBorder | used to set border                                             |
| **borderRadius**  | double    | used to set border radius                                      |

***

## Usage

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatAudioBubble(
        theme: cometChatTheme,
        audioUrl: 'https://data-us.cometchat.io/2379614bd4db65dd/media/1682517916_1406731591_130612180fb2e657699814eb52817574.mp3',
        title: 'Sample Audio',
    )
    ```
  </Tab>
</Tabs>