Media Recorder
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.
- XML
<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);