Module @repo/use-record-audio

@repo/use-record-audio

React hooks for browser audio capture. It exports useRecordAudio (MediaRecorder-based recording with chunked storage), useMicStream (raw microphone access), useMicAnalyser (audio visualization data), useAudioDevices (device enumeration), and useSilenceDetection. Chunk storage uses IndexedDB via idb-keyval.

Dependencies

%%{init:{"theme":"dark"}}%% graph TD use_record_audio["@repo/use-record-audio"] errors["@repo/errors"] safe["@repo/safe"] typescript_config["@repo/typescript-config"] vitest_config["@repo/vitest-config"] use_record_audio --> errors use_record_audio --> safe use_record_audio -.-> typescript_config use_record_audio -.-> vitest_config

%%{init:{"theme":"default"}}%% graph TD use_record_audio["@repo/use-record-audio"] errors["@repo/errors"] safe["@repo/safe"] typescript_config["@repo/typescript-config"] vitest_config["@repo/vitest-config"] use_record_audio --> errors use_record_audio --> safe use_record_audio -.-> typescript_config use_record_audio -.-> vitest_config

graph TD
  use_record_audio["@repo/use-record-audio"]
  errors["@repo/errors"]
  safe["@repo/safe"]
  typescript_config["@repo/typescript-config"]
  vitest_config["@repo/vitest-config"]
  use_record_audio --> errors
  use_record_audio --> safe
  use_record_audio -.-> typescript_config
  use_record_audio -.-> vitest_config

Usage

import { useRecordAudio } from "@repo/use-record-audio";

function Recorder() {
  const { start, stop, state, audioUrl } = useRecordAudio();

  return (
    <div>
      <button onClick={state === "recording" ? stop : start}>
        {state === "recording" ? "Stop" : "Record"}
      </button>
      {audioUrl && <audio src={audioUrl} controls />}
    </div>
  );
}