音声入力がしたいのだ！

なぜかずんだもん風に喋ってみました。
結構カンタンにできるので、ゆっくり解説するのだ。

＿人人人人人人人人人人人＿
＞ゆっくりしていってね!!＜
￣ＹＹＹＹＹＹＹＹＹＹＹ￣

インストール

ゆーてもインストールはyarn or npmでできるのだ。
今回はReact.js+Typescriptで書いていくのだ！

yarn add react-speech-recognition

tsはこちらも

yarn add @type/react-speech-recognition --dev

もし読み込み時に👇のエラーが出た場合は以下も追加すること

ReferenceError: regeneratorRuntime is not defined

コマンド

yarn add regenerator-runtime

コーディング

こんな感じで簡単にコーディングできるのだ！
※必要な箇所だけ抜き出しております。コードと画面で違う箇所がありますがそこはご愛嬌ということで

import 'regenerator-runtime'; // エラーが出た場合は最初に読み込みさせる
import SpeechRecognition, { useSpeechRecognition } from "react-speech-recognition";

const {
  transcript,
  listening,
  resetTranscript,
  browserSupportsSpeechRecognition
} = useSpeechRecognition();

const [recordingInput, setRecordingInput] = useState(''); // 出力したいテキスト領域

// 読み込み中のuseEffect。リアルタイムでテキストを出力したい時は必要
useEffect(() => {
  if (listening) setRecordingInput(transcript);
}, [transcript]);


<Button
  disabled={!browserSupportsSpeechRecognition} // ブラウザ非対応の場合はdisabledに
  label={listening ? '入力停止' : '音声入力'}
  buttonColor={listening ? 'is-danger' : 'is-primary'}
  isLight
  onClick={() => {
    if (listening) {
      SpeechRecognition.stopListening(); 
      resetTranscript(); // 入力済みのテキストをリセット
    } else {
      SpeechRecognition.startListening({
        continuous: true, //ユーザーが中断するまで音声入力を実行
      });
    }
  }}
/>

<TextArea
  onChange={(e) => {
    setRecordingInput(e.target.value); // 手直ししたい時に便利かも？
  }}
  value={recordingInput}
  placeholder="音声入力の結果がこちらに表示されます"
/>

画面表示

ボタンを押すとこんな感じで表示されるのだ！

許可を押すと音声が入力できるからしゃべってみるのだ！

※「な」と「の」の間にスペースが入ってますが、精度的にはいいカンジ！

停止したい時はボタンを押すのだ！

これを使って色々とできることが増えるので、ぜひ活用してみるのだ！

オブジェクティブグループではXの投稿も平日毎日行っています！
IT関連の小ネタや便利技から、日常のアニメ・ゲーム布教なども幅広く投稿してるので、
ご興味のある方は是非フォロー・いいねをお願いします。
https://x.com/obg_ocr