SpeechToText

mic 클릭으로 인식 시작, 인식 중 stop으로 종료(또는 timeout 무음 자동 종료) 후 onResult로 최종 텍스트를 받습니다. 미지원 브라우저는 disabled + onUnsupported.

import { useState } from "react";
import {
  SpeechToText,
  isSpeechRecognitionSupported,
} from "@/components/speech-to-text";

function DictationField() {
  const [text, setText] = useState("");

  return (
    <>
      {/* 기본: timeout 미전달 → 무음 3초 후 자동 종료 */}
      <SpeechToText
        lang="ko-KR"
        onResult={setText}
        onInterim={(t) => console.log("interim", t)}
        onError={(err) => console.warn(err.code, err.message)}
        onUnsupported={() => console.warn("unsupported")}
      />

      {/* timeout 커스텀 (ms) */}
      <SpeechToText timeout={10_000} onResult={setText} />

      {/* 배경 · 아이콘 */}
      <SpeechToText
        className="bg-[var(--surface-primary)] text-text-inverse"
        icon={<CustomMic />}
        listeningIcon={<CustomStop />}
        onResult={setText}
      />

      <p>{text}</p>
    </>
  );
}

// 사전 체크 (선택)
if (!isSpeechRecognitionSupported()) {
  // 대체 UI
}