> ## Documentation Index
> Fetch the complete documentation index at: https://cometchat-22654f5b-docs-llms-scoped-indexes.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>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.