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

# Media Recorder

> Media Recorder — CometChat documentation.

The `CometChatMediaRecorder` is a custom Android component that provides a user interface for recording audio and playing back the recorded audio. It is designed to be easily integrated into chat applications or other projects where audio messaging is required.

## Properties

| Property             | Type               | Description                                                                                                     |
| -------------------- | ------------------ | --------------------------------------------------------------------------------------------------------------- |
| startIconURL         | string             | provides icon to the start Icon/widget that starts recording the audio                                          |
| startIconText        | string             | provides icon to the start Icon/widget that starts recording the audio                                          |
| stopIconURL          | string             | provides icon to the start Icon/widget that stops recording the audio                                           |
| stopIconText         | string             | provides icon to the start Icon/widget that stops recording the audio                                           |
| closeIconURL         | string             | provides icon to the start Icon/widget that closes the CometChatMediaRecorder                                   |
| submitButtonIconURL  | string             | provides icon to the start Icon/widget that utilizes the path audio recorded through the CometChatMediaRecorder |
| submitButtonIconText | string             | provides icon to the start Icon/widget that utilizes the path audio recorded through the CometChatMediaRecorder |
| autoRecording        | boolean            | When set to true, will start the recording on mount. Default value - false                                      |
| recordingType        | string             | Allows us to set the recording type to audio or video.                                                          |
| mediaPlayerStyle     | MediaRecorderStyle | helps to customize the appearance of CometChatMediaRecorder                                                     |

### MediaRecorderStyle

| Name           | Description                                                                                                                                                                          |
| -------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| width          | Sets the width of the component                                                                                                                                                      |
| height         | Sets the height of the component                                                                                                                                                     |
| border         | Sets the border of the component                                                                                                                                                     |
| borderRadius   | Sets the border radius of the component                                                                                                                                              |
| background     | Sets all background style properties at once, such as color, image, origin and size, or repeat method. [Reference link](https://developer.mozilla.org/en-US/docs/Web/CSS/background) |
| timerTextFont  | Sets all the different properties of font for the timer text. [Reference link](https://developer.mozilla.org/en-US/docs/Web/CSS/font)                                                |
| timerTextColor | Sets the foreground color of the timer text.                                                                                                                                         |
| submitIconTint | Sets the tint or color applied to the submit icon                                                                                                                                    |
| startIconTint  | Sets the tint or color applied to the start icon                                                                                                                                     |
| stopIconTint   | Sets the tint or color applied to the stop icon                                                                                                                                      |
| closeIconTint  | Sets the tint or color applied to the close icon                                                                                                                                     |

## Events

Custom events dispatched by the element

| Name                        | Description                                   |
| --------------------------- | --------------------------------------------- |
| cc-media-recorder-submitted | Event emitted when user submits the recording |
| cc-media-recorder-closed    | Event emitted when user closes the recording  |

## Usage

<Tabs>
  <Tab title="HTML">
    ```html theme={null}
    <cometchat-media-recorder
    [autoRecording]="true"  
    [startIconText]="'Start'" 
    [stopIconText]="'Stop'" 
    [submitButtonIconText]="'submit'" 
    (cc-media-recorder-submitted)="submitRecording($event)"
    (cc-media-recorder-closed)="closeRecording($event)"
    ></cometchat-media-recorder>
    ```
  </Tab>

  <Tab title="JavaScript">
    ```js theme={null}
    import '@cometchat/uikit-elements';//import the web component package.

    submitRecording = (event: any) => {
      console.log(event.detail.url); //the detail property has the image url 
    }
    closeRecording = (event: any) => {
      console.log(event.detail.url); //the detail property has the image url 
    }
    ```
  </Tab>
</Tabs>