はじめに
最近、フィンランド語の勉強をはじめたソフトウェアエンジニアです。そのうち旅行に行けたらいいなと思っています。フィンランドを勉強するにあたり困ったことは、英語などとは異なり、会話ができる教材がないことです。それならば作ってしおうと思い、フィンランド語会話アプリを趣味で絶賛開発中です。
今回は、フィンランド語で音声入力をする方法まで解説します。
前提知識
WebSpeechAPI
Webブラウザで音声入力をするには、WebSpeechAPIを利用します。Web Speech API とは、ウェブブラウザが音声認識と音声合成を行うためのインターフェースを提供する技術です。このAPIを使用することで、ウェブページやアプリケーションはユーザーの話し言葉をテキストに変換したり、テキストを音声で読み上げたりすることが可能になります。Web Speech APIは二つの主要な部分から成り立っています
react-speech-recognition
Reactで音声入力を実装する際に便利なのがreact-speech-recognitionです。react-speech-recognition とは、Reactアプリケーションで簡単に音声認識機能を実装するためのライブラリです。このライブラリは、Web Speech API の音声認識機能を利用して、React コンポーネントで音声認識を容易に扱えるように設計されています。
実装方法
1. コンポーネントを作成する
まずは、音声入力するために必要な「Start」「Stop」「Reset」ボタンを持つコンポーネントを用意します。useSpeechRecognition を用いることで、それぞれのボタンが「Start」「Stop」「Reset」の機能を持つことができます。
import 'regenerator-runtime';
import React from "react";
import SpeechRecognition, {
useSpeechRecognition,
} from "react-speech-recognition";
const ReactSpeechRecognitionComponent: React.FC = () => {
const {
transcript,
listening,
resetTranscript,
browserSupportsSpeechRecognition,
} = useSpeechRecognition();
if (!browserSupportsSpeechRecognition) {
return <span>ブラウザが音声認識未対応です</span>;
}
return (
<div id="react-speech-recognition">
<p>Status: {listening ? "on" : "off"}</p>
<button type="button" onClick={() => SpeechRecognition.startListening()}>
Start
</button>
<button type="button" onClick={() => SpeechRecognition.stopListening()}>
Stop
</button>
<button type="button" onClick={() => resetTranscript()}>
Reset
</button>
<p>{transcript}</p>
</div>
);
};
export default ReactSpeechRecognitionComponent;
2. 画面に表示して使用する
画面に先ほどのコンポーネントを表示してみましょう。見栄えの問題でReactとViteのロゴは残しただけです。
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'
import ReactSpeechRecognitionComponent from './components/ReactSpeechRecognitionComponent'
function App() {
return (
<>
<div>
<a href="https://vitejs.dev" target="_blank">
<img src={viteLogo} className="logo" alt="Vite logo" />
</a>
<a href="https://react.dev" target="_blank">
<img src={reactLogo} className="logo react" alt="React logo" />
</a>
</div>
<ReactSpeechRecognitionComponent />
</>
)
}
export default App
3. フィンランド語に対応する
早速、フィンランド語を入力してみましょう。「Minä olen japanilainen.(私は日本人です)」と音声入力してみます。
すると、このように入力されてしまいました。私の発音が悪いのもあるかもしれませんでが、日本語として音声が認識されてしまっているようです。フィンランド語に対応するにはどうすればいいのでしょうか。
Changing language
To listen for a specific language, you can pass a language tag (e.g. 'zh-CN' for Chinese) when calling startListening. See here for a list of supported languages.
SpeechRecognition.startListening({ language: 'zh-CN' })
react-speech-recognition のドキュメントを見てみると、このような記述がありました。試してみましょう。
<button type="button" onClick={() => SpeechRecognition.startListening({ language: 'fi-FI' })}>
{ language: 'fi-FI' } を追加してから音声入力すると、無事に「Minä olen japanilainen.(私は日本人です)」と表示することができました。
おわりに
「フィンランド語で音声入力をする」という第一歩を踏み出すことができました。今度は OpenAI API を利用して、インタラクティブなフィンランド語会話をできるようにアップデートしたいと思っています。