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

# Media Recorder

> Media Recorder — CometChat documentation.

This element allows users to record voice and send them as audio messages. It has a start button to start recording, a stop button to stop recording, a play button to play the recorded message, a submit button to submit the recorded message and a close button to close the media recorder.

## 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="JavaScript">
    ```javascript theme={null}
    import '@cometchat/uikit-elements';//import the web component package.

    const submitRecording = event => {
      console.log(event.detail.url); //the detail property has the image url 
    }

    const closeRecording = event => {
      console.log(event.detail.url); //the detail property has the image url 
    }

    <cometchat-media-recorder autoRecording]="true"  
    :startIconText="Start" 
    :stopIconText="Stop" 
    submitButtonIconText="submit" 
    cc-media-recorder-submitted={submitRecording}
    cc-media-recorder-closed={closeRecording}></cometchat-media-recorder>
    ```
  </Tab>
</Tabs>


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