Audio Recorder

Enable audio recording on MessageInput to record voice messages:

<MessageInput audioRecordingEnabled />

Once enabled, MessageInput renders StartRecordingAudioButton.

Best Practices

• Request microphone access only when users opt in to recording.
• Use MP3 encoding when file size or bandwidth is a concern.
• Keep recording UI minimal so users can start/stop quickly.
• Consider asyncMessagesMultiSendEnabled for multi-attachment workflows.
• Handle permission-denied states with clear recovery guidance.

You can replace StartRecordingAudioButton via Channel context:

<Channel StartRecordingAudioButton={CustomComponent}>

Clicking the recording button swaps the composer UI for the AudioRecorder UI.

You can replace the default AudioRecorder via Channel context:

<Channel AudioRecorder={CustomComponent}>

Browser permissions

Microphone permission changes are observed. If permission is 'denied' when the user starts recording, the RecordingPermissionDeniedNotification dialog is shown.

You can customize that dialog via Channel context:

<Channel RecordingPermissionDeniedNotification={CustomComponent}>

Custom encoding

By default, recordings are encoded as audio/wav. To reduce size, you can use the MP3 encoder based on lamejs:

1. Install @breezystack/lamejs (a peer dependency of stream-chat-react).

npm install @breezystack/lamejs

yarn add @breezystack/lamejs

2. Import the MP3 encoder as a plugin:

import { useMemo } from "react";
import { MessageInput } from "stream-chat-react";
import { encodeToMp3 } from "stream-chat-react/mp3-encoder";

const Component = () => {
  /**
   See why memoizing props matters:
   - https://www.epicreact.dev/memoization-and-react
   - https://react.dev/reference/react/useMemo
  */
  const audioRecordingConfig = useMemo(
    () => ({ transcoderConfig: { encoder: encodeToMp3 } }),
    [],
  );
  return <MessageInput focus audioRecordingConfig={audioRecordingConfig} />;
};

Audio recorder states

AudioRecorder switches between these states:

1. Recording state

The recording can be paused or stopped.

2. Paused state

The recording can be stopped or resumed.

3. Stopped state

The recording can be played back before it is sent.

At any time, the user can cancel and return to the composer via the bin icon.

The message sending behavior

The recording uploads when recording is completed (stop + confirm).

Sending behavior for the recording attachment is controlled by asyncMessagesMultiSendEnabled on MessageInput.

<MessageInput asyncMessagesMultiSendEnabled audioRecordingEnabled />

Behavior by asyncMessagesMultiSendEnabled:

Audio recorder controller

Components consuming MessageInputContext can access the recording state via recordingController:

import { useMessageInputContext } from "stream-chat-react";

const Component = () => {
  const {
    recordingController: {
      completeRecording,
      permissionState,
      recorder,
      recording,
      recordingState,
    },
  } = useMessageInputContext();
};

The controller exposes the following API: