Media Recorder - CometChat Docs

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. Audio Recording: The component allows users to start recording audio from the device’s microphone by clicking on the “Record” button. It captures audio in MPEG-4 format with AAC audio encoding. Visualizer: While recording audio, the component displays a visualizer that represents the amplitude of the audio being captured. The visualizer provides a real-time visualization of the audio recording. Playback: After recording audio, the component displays a playback UI, allowing users to listen to the recorded audio. It provides “Play” and “Pause” buttons to control audio playback. SeekBar: The component includes a seek bar that indicates the progress of audio playback. Users can seek to different positions in the recorded audio using the seek bar. Timer: The component displays two timers: one for the duration of the recorded audio and the other for the current recording time. Customizable Icons and Styles: The icons used for buttons (play, pause, stop, etc.) are customizable, and their tint color can be adjusted to match the app’s theme. Additionally, the component supports custom styles to change the visual appearance, such as colors, background, border, and corner radius. Permission Handling: The component handles runtime permission requests for recording audio, read/write storage, and microphone access. It requests the necessary permissions before starting the recording process. Deletion of Recorded Audio: Users can delete the recorded audio using the “Delete” button, which removes the audio file from the device’s storage. Callbacks: The component allows developers to set callback listeners for events like clicking on the “Submit” button to send the recorded audio and clicking on the “Close” button to close the component.

How to integrate CometChatMediaRecorder?

Since CometChatMediaRecorder is a Widget, it can be added directly to the layout file as shown below.

<com.cometchat.chatuikit.shared.views.mediarecorder.CometChatMediaRecorder
        android:id="@+id/cometchat_media_recorder"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

The CometChatMediaRecorder is responsible for managing runtime permissions. To ensure the ActivityResultLauncher is properly initialized, its object should be created in the the onCreate state of an activity. To ensure that the Media Recorder is loaded within the fragment, it is important to make sure that the fragment is loaded in the onCreate state of the activity.

Methods

Method	Parameter	Description
startRecording()	NA	Starts the audio recording process. This method will automatically handle runtime permission requests for recording audio, read/write storage, and microphone access.
setStyle(MediaRecorderStyle style)	MediaRecorderStyle	Sets a custom style for the `CometChatMediaRecorder` component using the `MediaRecorderStyle` class.
deleteRecordedFile()	NA	Deletes the recorded audio file and resets the component to its initial state.
setOnCloseClickListener(OnClick onClose)	OnClick	Sets a callback listener for the “Close” button. The provided `OnClick` object will be invoked when the “Close” button is clicked.
setOnSubmitClickListener(OnSubmitClick onSubmit)	OnSubmitClick	Sets a callback listener for the “Submit” button. The provided `OnSubmitClick` object will be invoked when the “Submit” button is clicked.
setPlayIcon(@DrawableRes int playIcon)	@DrawableRes int playIcon	Sets custom drawable resources for the play buttons.
setPauseIcon(@DrawableRes int pauseIcon)	@DrawableRes int pauseIcon	Sets custom drawable resources for the pause buttons.
setRecordIcon(@DrawableRes int recordIcon)	@DrawableRes int recordIcon	Sets custom drawable resources for the record buttons.
setDeleteIcon(@DrawableRes int deleteIcon)	@DrawableRes int deleteIcon	Sets custom drawable resources for the delete buttons.
setStopIcon(@DrawableRes int stopIcon)	@DrawableRes int stopIcon	Sets custom drawable resources for the stop buttons.
setSubmitIcon(@DrawableRes int submitIcon)	@DrawableRes int submitIcon	Sets custom drawable resources for the submit buttons.

MediaRecorderStyle

This methods is used to customize the appearance of the CometChatMediaRecorder component.

Methods	Parameter	Description
setVoiceRecordingIconTint(int voiceRecordingIconTint)	@ColorInt int	Sets the color tint for the voice recording icon in the media recorder view.
setSubmitIconTint(int submitIconTint)	@ColorInt int	Sets the color tint for the submit icon in the media recorder view.
setRecordedContainerColor(int recordedContainerColor)	@ColorInt int	Sets the color for the recorded container in the media recorder view.
setRecordingChunkColor(int recordingChunkColor)	@ColorInt int	Sets the color for the recording chunk in the media recorder view.
setSeekBarColor(int seekBarColor)	@ColorInt int	Sets the color for the seek bar in the media recorder view.
setPauseIconTint(int pauseIconTint)	@ColorInt int	Sets the color tint for the pause icon in the media recorder view.
setPlayIconTint(int playIconTint)	@ColorInt int	Sets the color tint for the play icon in the media recorder view.
setStopIconTint(int stopIconTint)	@ColorInt int	Sets the color tint for the stop icon in the media recorder view.
setStartIconTint(int startIconColor)	@ColorInt int	Sets the color tint for the start icon in the media recorder view.
setTimerTextColor(int timerTextColor)	@ColorInt int	Sets the color for the timer text in the media recorder view.
setTimerTextAppearance(int timerTextAppearance)	@StyleRes int	Sets the text appearance style resource for the timer text in the media recorder view.
setDeleteIconColor(int deleteIconColor)	@ColorInt int	Sets the color for the delete icon in the media recorder view.
setBackground(int background)	@ColorInt int	Sets the background color of the view.
setBackground(Drawable drawableBackground)	Drawable	Sets the drawable background of the view.
setCornerRadius(float cornerRadius)	float	Sets the corner radius of the view.
setBorderWidth(int borderWidth)	int	Sets the width of the view border.
setBorderColor(int borderColor)	@ColorInt int	Sets the color of the view border.

Java

MediaRecorderStyle mediaRecorderStyle = new MediaRecorderStyle();

// Set various styling attributes for the media recorder view
mediaRecorderStyle.setPauseIconTint(Color.RED);
mediaRecorderStyle.setPlayIconTint(Color.GREEN);
mediaRecorderStyle.setStopIconTint(Color.BLUE);
mediaRecorderStyle.setStartIconTint(Color.YELLOW);
mediaRecorderStyle.setSubmitIconTint(Color.MAGENTA);
mediaRecorderStyle.setVoiceRecordingIconTint(Color.CYAN);
mediaRecorderStyle.setTimerTextColor(Color.BLACK);
mediaRecorderStyle.setTimerTextAppearance(R.style.TimerTextStyle);
mediaRecorderStyle.setDeleteIconColor(Color.DKGRAY);
mediaRecorderStyle.setRecordingChunkColor(Color.LTGRAY);
mediaRecorderStyle.setSeekBarColor(Color.GRAY);
mediaRecorderStyle.setRecordedContainerColor(Color.WHITE);

// Now you can apply this style to your media recorder view
MediaRecorderView mediaRecorderView = findViewById(R.id.cometchat_media_recorder);
mediaRecorderView.setStyle(mediaRecorderStyle);

​How to integrate CometChatMediaRecorder?

​Methods

​MediaRecorderStyle

How to integrate CometChatMediaRecorder?

Methods

MediaRecorderStyle