Reactで、マイクの音声を録音して再生する方法

import { useCallback, useEffect, useRef, useState } from 'react';

// 前から順に、ブラウザが録音できる形式を選ぶ
const MIME_TYPES = ['audio/webm;codecs=opus', 'audio/mp4', 'audio/ogg;codecs=opus'];

export function pickMimeType(): string {
  return MIME_TYPES.find((t) => MediaRecorder.isTypeSupported(t)) ?? '';
}

export const isAudioRecordingSupported =
  typeof navigator !== 'undefined' &&
  typeof navigator.mediaDevices?.getUserMedia === 'function' &&
  typeof MediaRecorder !== 'undefined';

export type RecorderStatus = 'idle' | 'recording' | 'paused';
export type Recording = { url: string; type: string; size: number };

function errorMessage(e: unknown): string {
  if (e instanceof DOMException) {
    if (e.name === 'NotAllowedError') return 'マイクの使用が許可されていません';
    if (e.name === 'NotFoundError') return 'マイクが見つかりません';
  }
  return `録音を始められませんでした（${e instanceof Error ? e.message : String(e)}）`;
}

export function useAudioRecorder() {
  const [status, setStatus] = useState<RecorderStatus>('idle');
  const [result, setResult] = useState<Recording | null>(null);
  const [error, setError] = useState<string | null>(null);
  const recorderRef = useRef<MediaRecorder | null>(null);
  const urlRef = useRef<string | null>(null);
  // getUserMedia() を待っている間に、もう一度押されても始めない
  const startingRef = useRef(false);

  const start = useCallback(async () => {
    if (recorderRef.current || startingRef.current) return;
    startingRef.current = true;
    setError(null);

    let stream: MediaStream;
    try {
      stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    } catch (e) {
      setError(errorMessage(e));
      return;
    } finally {
      startingRef.current = false;
    }

    let recorder: MediaRecorder;
    try {
      const mimeType = pickMimeType();
      recorder = new MediaRecorder(stream, mimeType ? { mimeType } : undefined);
    } catch (e) {
      stream.getTracks().forEach((t) => t.stop());
      setError(errorMessage(e));
      return;
    }

    const chunks: Blob[] = [];
    recorder.ondataavailable = (e) => {
      if (e.data.size > 0) chunks.push(e.data);
    };
    recorder.onstop = () => {
      // マイクのトラックを止めて、マイクを手放す
      stream.getTracks().forEach((t) => t.stop());
      const blob = new Blob(chunks, { type: recorder.mimeType });
      if (urlRef.current) URL.revokeObjectURL(urlRef.current);
      urlRef.current = URL.createObjectURL(blob);
      recorderRef.current = null;
      setStatus('idle');
      setResult({ url: urlRef.current, type: blob.type, size: blob.size });
    };

    recorder.start();
    recorderRef.current = recorder;
    setStatus('recording');
  }, []);

  const stop = useCallback(() => {
    const recorder = recorderRef.current;
    if (recorder && recorder.state !== 'inactive') recorder.stop();
  }, []);

  const pause = useCallback(() => {
    const recorder = recorderRef.current;
    if (recorder?.state === 'recording') {
      recorder.pause();
      setStatus('paused');
    }
  }, []);

  const resume = useCallback(() => {
    const recorder = recorderRef.current;
    if (recorder?.state === 'paused') {
      recorder.resume();
      setStatus('recording');
    }
  }, []);

  // 画面から取り除かれたら、録音を止めてマイクを手放し、作った URL も手放す
  useEffect(() => () => {
    const recorder = recorderRef.current;
    if (recorder) {
      recorder.onstop = null;
      if (recorder.state !== 'inactive') recorder.stop();
      recorder.stream.getTracks().forEach((t) => t.stop());
    }
    if (urlRef.current) URL.revokeObjectURL(urlRef.current);
  }, []);

  return { supported: isAudioRecordingSupported, status, result, error, start, stop, pause, resume };
}

import { useEffect, useState } from 'react';
import { useAudioRecorder } from './useAudioRecorder';

function extension(type: string): string {
  if (type.startsWith('audio/mp4')) return 'm4a';
  if (type.startsWith('audio/ogg')) return 'ogg';
  return 'webm';
}

export function AudioRecorder() {
  const { supported, status, result, error, start, stop, pause, resume } = useAudioRecorder();
  const [seconds, setSeconds] = useState(0);

  // 録音を始めたら 0 に戻し、録音している間だけ秒数を増やす（一時停止中は止める）
  useEffect(() => {
    if (status !== 'recording') return;
    const id = setInterval(() => setSeconds((s) => s + 1), 1000);
    return () => clearInterval(id);
  }, [status]);

  if (!supported) {
    return <p>このブラウザでは録音できません。</p>;
  }

  const handleStart = () => {
    setSeconds(0);
    start();
  };

  return (
    <div className="recorder">
      {status === 'idle' ? (
        <button type="button" onClick={handleStart}>録音を始める</button>
      ) : (
        <>
          <button type="button" onClick={stop}>止める（{seconds}秒）</button>
          {status === 'recording' ? (
            <button type="button" onClick={pause}>一時停止</button>
          ) : (
            <button type="button" onClick={resume}>再開</button>
          )}
        </>
      )}
      {error && <p className="error" role="alert">{error}</p>}
      {result && status === 'idle' && (
        <div className="result">
          <audio src={result.url} controls />
          <p>
            <a href={result.url} download={`recording.${extension(result.type)}`}>録音をダウンロード</a>
            （{(result.size / 1024).toFixed(0)} KB、{result.type}）
          </p>
        </div>
      )}
    </div>
  );
}

const stream = await navigator.mediaDevices.getUserMedia({
  audio: { echoCancellation: false, noiseSuppression: false, autoGainControl: false },
});