Voice Messages

Users can record and send voice messages through the built-in input component of IMKit. The messages will appear in the message list component of the chat UI. By default, the SDK generates and sends messages containing high-quality voice message content objects HQVoiceMessage (type identifier: RC:HQVcMsg).

Limitations

The voice input feature currently has the following restrictions:

• IMKit only supports sending voice messages in one-to-one chat and group chat.
• Users must record audio content that is at least 1 second long and no longer than 60 seconds.
• Users cannot pause while recording voice messages.
• Voice messages cannot be sent during ongoing video or voice calls.

Usage

IMKit enables the voice message input feature by default in the InputPanel component. The input panel includes a toggle button for switching to voice input.

Sending Voice Messages

To send a voice message, users must first record it using the AudioRecordManager in the InputPanel. By default, the voice message icon appears on the left side of the input field. Clicking this icon reveals the recording button ("Hold to Talk"). Users can record a voice message by pressing and holding the recording button. The recording must be at least 1 second long and no longer than 60 seconds. If the message is shorter than 1 second when the user releases the button, it will not be saved. During recording, users can swipe up to cancel or abort the cancellation. Once the button is released, the SDK automatically sends the recorded content. Previewing voice messages before sending is not supported. Audio files in voice messages cannot be paused during playback.

Voice Messages in the Message List

You can receive voice messages in one-to-one chat, group chat, and system conversation. Voice messages are displayed in the message list.

Users can view and play voice messages by clicking the play button. Unplayed voice messages are marked with a red dot and can be played multiple times. However, users can only listen to voice messages within the client application and cannot save them to their devices. Only one audio file can be played at a time in a channel. If you attempt to play another message while one is playing, the currently playing message will pause.

By default, IMKit downloads high-quality voice messages and plays unplayed voice messages sequentially after clicking play. You can modify the global configuration to disable sequential playback of unplayed voice messages:

RongConfigCenter.featureConfig().rc_play_audio_continuous = false;

IMKit automatically downloads high-quality voice messages when online. You can disable this behavior via global configuration:

RongConfigCenter.featureConfig().rc_enable_automatic_download_voice_msg = false;

To override IMKit's default configuration, create an rc_config.xml file in your app's res/values directory and add the following settings:

<bool name="rc_play_audio_continuous">true</bool>
<bool name="rc_enable_automatic_download_voice_msg">true</bool>

Customization

Customizing voice messages involves modifying the voice input toggle icon in the input panel, the audio recording interface, and the high-quality voice message display UI.

Customizing the Voice Message UI

IMKit generates and sends high-quality voice messages (RC:HQVoiceMsg) by default, which are displayed in the message list using the HQVoiceMessageItemProvider template.

All message display templates inherit from BaseMessageItemProvider<CustomMessage>. You can extend BaseMessageItemProvider<CustomMessage> to implement your own high-quality voice message display template class and provide it to the SDK.

Alternatively, you can directly replace the style resources, string resources, and icon resources referenced in the high-quality voice message display template. Refer to the resources used in the IMKit source code HQVoiceMessageItemProvider.java.

For example: You can copy the entire content of rc_item_hq_voice_message.xml from the IMKit source code and create a /res/layout/rc_item_hq_voice_message.xml file in your project to modify the style values. Do not remove SDK default controls or arbitrarily change View IDs.

Input Panel Style Resources

To customize the input panel style, copy the entire content of rc_extension_input_panel.xml from the IMKit source code and create a /res/layout/rc_extension_input_panel.xml file in your project to modify the style values. Do not remove SDK default controls or arbitrarily change View IDs.

Recording Popup Style Resources

When recording starts, a popup appears in the center of the screen. To customize the voice message recording popup style, copy the entire content of rc_voice_record_popup.xml from the IMKit source code and create a /res/layout/rc_voice_record_popup.xml file in your project to modify the style values. Do not remove SDK default controls or arbitrarily change View IDs.

Icon Resources

The table below shows customizable icons.

Icon	Image	Description
rc_ext_toggle_voice		The icon for the voice input toggle button, used to switch to the voice message recording view during message input.
rc_voice_send_play3		The icon in the sent high-quality voice message bubble. During playback, this icon animates sequentially with rc_voice_send_play1 and rc_voice_send_play2.
rc_voice_receive_play3		The icon in the received high-quality voice message bubble. During playback, this icon animates sequentially with rc_voice_receive_play1 and rc_voice_receive_play2.
rc_voice_hq_message_download_error		The icon displayed when voice message download fails.

Hiding the Voice Input Toggle Button

For global modifications, adjust the default input mode by creating res/values/rc_conversation_fragment.xml in your app project. Locate the RongExtension component with app:RCStyle="SCE" and change the default input display style.

For dynamic modifications, extend IMKit's ConversationFragment and override the setInputPanelStyle() method in the subclass. This approach requires registering and using a custom conversation Activity in IMKit. See Integrating the Chat UI.

public class ChatFragment extends ConversationFragment {

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
        mRongExtension.getInputPanel().setInputPanelStyle(STYLE_CONTAINER_EXTENSION);
    }
}