[Typescript]Next.jsで音声入力機能を実装する方法

Typescript

はじめに

近年、ウェブ上での音声入力はますます一般的になってきています。Google検索、音声アシスタント、対話型のウェブアプリケーションなど、ユーザーが音声入力を使って情報を入手や操作を行う場面が増えています。この記事では、TypescriptとNext.jsを使用して、ウェブアプリケーションに音声入力機能を実装する手順を解説します。

必要なツール

開発を始める前に、今回は下記のツールで開発しました

nextjsを始めてみる（インストールから起動して確認するまで）[Typescript]

nextjsを始めてみる（インストールから起動して確認するまで）[Typescript]
nextjsとは nextjsは、reactベースに作られるJavascriptのフレームワークです。 また、reactとは大きく違う部分としては、フロントエンドだけでなくバックエンドのAPIについても同時に実装が可能なことです。 また、n...
nbaboston.net
2022.12.04

作ってみる

下記は実際コードです。

startRecognitionを呼び出し、音声入力が完了するとtranscriptに格納されます

const [transcript, setTranscript] = useState("");
const startRecognition=() => {
  const SpeechRecognition =
    (window as any).SpeechRecognition ||
    (window as any).webkitSpeechRecognition;
  const recognition = new SpeechRecognition();

  recognition.onstart = () => {
    console.log("Voice recognition started...");
  };

  recognition.onresult = (event: any) => {
    const current = event.resultIndex;
    const transcript = event.results[current][0].transcript;
    setTranscript(transcript);
  };

  recognition.start();
};