> ## 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 if the media sent is an audio.

## Methods

| Methods             | Type             | Description                                        |
| ------------------- | ---------------- | -------------------------------------------------- |
| **setAudioUrl**     | String           | used to set the Audio url for the bubble           |
| **setTitleText**    | String           | a text to display as name of the audio file        |
| **setSubtitleText** | String           | a text to display below the name of the audio file |
| **setStyle**        | AudioBubbleStyle | used to customize appearance of this widget        |
| **setPlayIcon**     | @DrawableRes int | customize the icon to display to play the audio    |
| **setPauseIcon**    | @DrawableRes int | customize the icon to display to pause the audio   |
| **setOnClick**      | OnClick          | Override the click event when tapped on play icon  |

## AudioBubbleStyle

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

| Methods                       | Type          | Description                                                    |
| ----------------------------- | ------------- | -------------------------------------------------------------- |
| **setTitleTextAppearance**    | @StyleRes int | used to set style of the name of the audio file                |
| **setSubtitleTextAppearance** | @StyleRes int | used to set style of the text below the name of the audio file |
| **setPlayIconTint**           | @ColorInt int | used to provide color to the audio play icon                   |
| **setPauseIconTint**          | @ColorInt int | used to provide color to the audio pause icon                  |
| **setBackground**             | @ColorInt int | used to set background color                                   |
| **setBackground**             | Drawable      | used to set a gradient background                              |
| **setBorderWidth**            | int           | used to set border                                             |
| **setCornerRadius**           | float         | used to set border radius                                      |

## Usage

<Tabs>
  <Tab title="Java">
    ```java theme={null}
    CometChatAudioBubble videoBubble = new CometChatAudioBubble(getContext());
    videoBubble.setAudioUrl("https://data-us.cometchat.io/208434241880dc4d/media/1676385385_2121040948_0a18fc37cb5afbe4cf833020017274e0.mp3", "Sample Audio", "music");
    ```
  </Tab>

  <Tab title="Kotlin">
    ```kotlin theme={null}
    val videoBubble = CometChatAudioBubble(getContext())
    videoBubble.setAudioUrl(
                "https://data-us.cometchat.io/208434241880dc4d/media/1676385385_2121040948_0a18fc37cb5afbe4cf833020017274e0.mp3",
                "Sample Audio",
                "music")
    ```
  </Tab>
</Tabs>