> ## 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.

# Media Recorder

> Media Recorder — CometChat documentation.

<Frame>
  <img src="https://mintcdn.com/cometchat-22654f5b-docs-llms-scoped-indexes/JjWlPukYmAPwZawH/images/35bfd128-in895p76oblsn8xxxq0yhcq5kkkbuz697v5k5zoxir1lhad1s3n2o5lxuiypgu01-3dafdbbfe85ce5c4f38bb597f075e4f4.png?fit=max&auto=format&n=JjWlPukYmAPwZawH&q=85&s=4c74acd18b5c683d62af2938e51d4507" width="1364" height="1248" data-path="images/35bfd128-in895p76oblsn8xxxq0yhcq5kkkbuz697v5k5zoxir1lhad1s3n2o5lxuiypgu01-3dafdbbfe85ce5c4f38bb597f075e4f4.png" />
</Frame>

Usage

CometChatMediaRecorder can be used as a child component inside another component or be launched with a bottom/modal sheet.

<Tabs>
  <Tab title="TypeScript">
    ```tsx theme={null}
    <CometChatBottomSheet
          ref={sheetRef}
          onClose={onClose}
          style={cometChatBottomSheetStyle}
        >
          <CometChatMediaRecorder
            onClose={onClose}
            onPause={onPause}
            onPlay={onPlay}
            onSend={onSend}
            onStop={onStop}
            onStart={onStart}
            recordedFile={recordedFile}
            recordedPlaying={recordedPlaying}
            mediaRecorderStyle={mediaRecorderStyle}
            pauseIconUrl={pauseIconUrl}
            playIconUrl={playIconUrl}
            recordIconUrl={recordIconUrl}
            deleteIconUrl={deleteIconUrl}
            stopIconUrl={stopIconUrl}
            submitIconUrl={submitIconUrl}
          />
        </CometChatBottomSheet>
    ```
  </Tab>
</Tabs>

## Properties

| Property | Type | Description |
| - | - | - |
| **onClose** | Function | a callback executed on tapping the close icon |
| **onPlay** | Function | a callback executed on tapping the play icon |
| **onPause** | Function | a callback executed on tapping the pause icon |
| **onStop** | Function | a callback executed on tapping the stop icon |
| **onSend** | Function | a callback executed on tapping the send icon |
| **onStart** | Function | a callback executed on tapping the start icon |
| **mediaRecorderStyle** | MediaRecorderStyle | used to customize the appearance of CometChatMediaRecorder |
| **recordedFile** | String | used to get the recorded audio file path |
| **recordedPlaying** | boolean | used to set the play and pause of the recording |
| **pauseIconUrl** | Image | provides icon to the pause Icon |
| **playIconUrl** | Image | used to set the play Icon |
| **recordIconUrl** | Image | used to set record Icon |
| **deleteIconUrl** | Image | used to set delete Icon |
| **stopIconUrl** | Image | used to set stop Icon |
| **submitIconUrl** | Image | used to set submit Icon |

### mediaRecorderStyle

A MediaRecorderStyle object is used to customize the appearance of CometChatMediaRecorder.

<Tabs>
  <Tab title="TypeScript">
    ```ts theme={null}
    // create a MediaRecorderStyle object
    const mediaRecorderStyle = new MediaRecorderStyle({
            pauseIconTint = "rgb(51, 153, 255)",
            playIconTint = "rgb(51, 153, 255)",
            closeIconTint = "rgba(20, 20, 20, 0.58)",
            startIconTint = "rgb(51, 153, 255)",
            stopIconTint = "rgb(237, 26, 26)",
            submitIconTint = "rgba(237, 26, 26)",
            audioBarTint = "rgba(20, 20, 20, 0.58)",
            timerTextFont = undefined,
            timerTextstyle = "normal",
            timerTextColor = theme?.palette.getAccent50(),
            ...messagesStyle
        });

    // pass that MediaRecorderStyle object to CometChatMediaRecorder
    <CometChatMediaRecorder
      ...
      mediaRecorderStyle={mediaRecorderStyle}
      ...
    />
    ```
  </Tab>
</Tabs>


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