はじめに

最近、フィンランド語の勉強をはじめたソフトウェアエンジニアです。そのうち旅行に行けたらいいなと思っています。フィンランドを勉強するにあたり困ったことは、英語などとは異なり、会話ができる教材がないことです。それならば作ってしおうと思い、フィンランド語会話アプリを趣味で絶賛開発中です。

今回は、フィンランド語で音声入力をする方法まで解説します。

前提知識

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 を利用して、インタラクティブなフィンランド語会話をできるようにアップデートしたいと思っています。

フィンランド語で音声入力をしよう！