はじめに
近年、ウェブ上での音声入力はますます一般的になってきています。Google検索、音声アシスタント、対話型のウェブアプリケーションなど、ユーザーが音声入力を使って情報を入手や操作を行う場面が増えています。この記事では、TypescriptとNext.jsを使用して、ウェブアプリケーションに音声入力機能を実装する手順を解説します。
必要なツール
開発を始める前に、今回は下記のツールで開発しました
nextjsを始めてみる(インストールから起動して確認するまで)[Typescript]
nextjsを始めてみる(インストールから起動して確認するまで)[Typescript]
nextjsとは nextjsは、reactベースに作られるJavascriptのフレームワークです。 また、reactとは大きく違う部分としては、フロントエンドだけでなくバックエンドのAPIについても同時に実装が可能なことです。 また、n...
作ってみる
下記は実際コードです。
を呼び出し、音声入力が完了すると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();
};