React audio recorder

Record microphone audio in React.

Use `useAudioRecorder()` for microphone permission, audio-only MediaRecorder state, Blob/File output, playback previews, and uploads.

Audio recorder example

import { useAudioRecorder, useObjectUrl } from 'react-webcam-kit';

export function VoiceNoteRecorder() {
  const recorder = useAudioRecorder({
    fileName: 'voice-note',
    fileType: 'webm',
    quality: 'medium',
  });
  const playbackUrl = useObjectUrl(recorder.blob);

  return (
    <>
      <button onClick={() => recorder.start()}>Record</button>
      <button onClick={recorder.stop}>Stop</button>
      {playbackUrl ? <audio src={playbackUrl} controls /> : null}
    </>
  );
}

Audio recording features

• Request microphone access and start recording with one hook.
• Use `mediaStatus`, `mediaError`, and `isMediaSupported` for microphone UI.
• Expose Blob, File, chunks, duration, pause, resume, cancel, and errors.
• Preview recorded audio with `useObjectUrl()`.
• Upload recordings with `createUploadFormData()`.

MediaRecorder audio MIME support varies by browser. The hook chooses supported audio recorder MIME candidates by default.

Related guides