目次

成果物
 フロントエンド(Next.js)の実装
 エラーが出る場合
 ローカル開発でマイクがONにできない場合

成果物

無音なのでわかりづらいが、自分の声がしっかり音声認識されている。

フロントエンドの実装

音声認識にはこちらのライブラリを使う。

import SpeechRecognition, {
    useSpeechRecognition,
} from "react-speech-recognition";

export const SpeechButton = () => {
    const [inputText, setInputText] = useState("");
    const { transcript, listening } = useSpeechRecognition();

    useEffect(() => {
        if (listening) setInputText(transcript);
    }, [transcript]);

    return (
        <>
            <button
                type="button"
                onClick={() => SpeechRecognition.startListening()}
            >
                {listening ? "認識中" : "音声入力"}
            </button>
            <button
                type="button"
                onClick={() => setInputText("")}
            >
                リセット
            </button>
            <p>{inputText}</p>
        </>
    );
}

上記コードを実装し、音声認識で入力された inputText をOpenAIのAPIに渡してあげればChatGPTに質問できる。
バックエンド側はこちらの記事参照。

エラーが出る場合

アプリを起動してReferenceエラーが出る場合は、、

npm install regenerator-runtimeを実行する
import "regenerator-runtime";を上記Reactコードの一番上に書いてあげる。

ローカル開発でマイクオンにできない場合

ローカル開発だとhttps対応していないので、ブラウザのマイクがブロックされている場合がある。
こちらの記事を参考に以下を実行するとマイクオンできた。

Chromeのアドレスバーにchrome://flags/#unsafely-treat-insecure-origin-as-secureを入力して検索
Insecure origins treated as secureという欄にローカル開発で起動しているURLを入力してEnabledを押す