8
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

はじめに

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

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

前提知識

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

見事、このような画面を表示することができました。
スクリーンショット 2023-12-19 18.21.58.png

3. フィンランド語に対応する

早速、フィンランド語を入力してみましょう。「Minä olen japanilainen.(私は日本人です)」と音声入力してみます。

スクリーンショット 2023-12-19 18.24.36.png

すると、このように入力されてしまいました。私の発音が悪いのもあるかもしれませんでが、日本語として音声が認識されてしまっているようです。フィンランド語に対応するにはどうすればいいのでしょうか。

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' })}>

スクリーンショット 2023-12-19 18.28.46.png

{ language: 'fi-FI' } を追加してから音声入力すると、無事に「Minä olen japanilainen.(私は日本人です)」と表示することができました。

おわりに

「フィンランド語で音声入力をする」という第一歩を踏み出すことができました。今度は OpenAI API を利用して、インタラクティブなフィンランド語会話をできるようにアップデートしたいと思っています。

8
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
8
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?