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

# Media Recorder

`CometChatMediaRecorder` is a class that allows users to record and send 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 pause button to pause the recorded message, a submit button to submit the recorded message and a close button to close the media recorder.

<Frame>
  <img src="https://mintcdn.com/cometchat-013b37f0/Ajj2zrtDwZmYg3EZ/images/7bbcffaa-lvzjaz34ubq3i6lyt546hjf2gztplsg00lvd8oz32si6sr1c72vxwsi9b5z1qpqj-3dafdbbfe85ce5c4f38bb597f075e4f4.png?fit=max&auto=format&n=Ajj2zrtDwZmYg3EZ&q=85&s=a2d01892e6f6ba089a253e7740b3f0b2" width="1364" height="1248" data-path="images/7bbcffaa-lvzjaz34ubq3i6lyt546hjf2gztplsg00lvd8oz32si6sr1c72vxwsi9b5z1qpqj-3dafdbbfe85ce5c4f38bb597f075e4f4.png" />
</Frame>

## Usage

CometChatMediaRecorder can be used as a child widget inside another Widget or be launched with a model sheet.

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    CometChatMediaRecorder(
      startIcon: Icon(Icons.mic),
      playIcon: Icon(Icons.play_arrow),
      pauseIcon: Icon(Icons.pause),
      closeIcon: Icon(Icons.close),
      stopIcon: Icon(Icons.stop),
      submitIcon: Icon(Icons.send),
      onSubmit: (BuildContext, String path) {
        // TODO("Not yet implemented")
      },
      onClose: () {
        // TODO("Not yet implemented")
      },
      mediaRecorderStyle: MediaRecorderStyle(
        pauseIconTint: Colors.red,
        playIconTint: Colors.green,
        closeIconTint: Colors.red,
        timerTextStyle: TextStyle(color: Colors.white),
        submitIconTint: Colors.green,
        startIconTint: Colors.green,
        stopIconTint: Colors.red,
        audioBarTint: Colors.green,
      ),
    );

    // open the CometChatMediaRecorder widget in a modal sheet
    showModalBottomSheet<void>(
      isDismissible: true,
      context: context,
      backgroundColor: Colors.transparent,
      builder: (BuildContext context) {
        return CometChatMediaRecorder(onSubmit: (context,path) {
          // TODO("Not yet implemented")
        });
      };
    );
    ```
  </Tab>
</Tabs>

***

## Properties

| Property               | Type                                       | Description                                                                                                     |
| ---------------------- | ------------------------------------------ | --------------------------------------------------------------------------------------------------------------- |
| **startIcon**          | Widget                                     | provides icon to the start Icon/widget that starts recording the audio                                          |
| **stopIcon**           | Widget                                     | provides icon to the start Icon/widget that stops recording the audio                                           |
| **playIcon**           | Widget                                     | provides icon to the start Icon/widget that starts playing the recorded audio                                   |
| **pauseIcon**          | Widget                                     | provides icon to the start Icon/widget that stops playing the recorded audio                                    |
| **closeIcon**          | Widget                                     | provides icon to the start Icon/widget that closes the CometChatMediaRecorder                                   |
| **submitIcon**         | Widget                                     | provides icon to the start Icon/widget that utilizes the path audio recorded through the CometChatMediaRecorder |
| **onSubmit**           | Function(BuildContext,String)              | a callback to utilize the path of recorded audio                                                                |
| **onClose**            | Function                                   | a callback excuted on tapping the closeIcon                                                                     |
| **mediaRecorderStyle** | MediaRecorderStyle                         | helps to customize the appearance of CometChatMediaRecorder                                                     |
| **theme**              | [CometChatTheme](/ui-kit/flutter/v4/theme) | used to set custom theme                                                                                        |

***

### mediaRecorderStyle

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

<Tabs>
  <Tab title="Dart">
    ```dart theme={null}
    // Create a MediaRecorderStyle object
    MediaRecorderStyle mediaRecorderStyle = MediaRecorderStyle(
      pauseIconTint: Colors.blue,
      playIconTint: Colors.green,
      closeIconTint: Colors.red,
      timerTextStyle: TextStyle(),
      submitIconTint: Colors.blue,
      startIconTint: Colors.green,
      stopIconTint: Colors.red,
      audioBarTint: Colors.blue,
      width: MediaQuery.of(context).size.width,
      height: 150,
      background: Colors.white,
      border: Border.all(),
      borderRadius: BorderRadius.circular(20),
      gradient: LinearGradient(),
    );

    // Pass that MediaRecorderStyle object to CometChatMediaRecorder
    CometChatMediaRecorder(
      mediaRecorderStyle: mediaRecorderStyle
    );
    ```
  </Tab>
</Tabs>