まだ動作させられてはいませんが、良さそうな React のコンポーネントを見つけたのでご紹介。
テキストを合成音声で読み上げられるコンポーネント「react-speech」です。
GitHub のページはこちらから。
GitHub – AndrewKeig/react-speech: React component for the web speech api
https://github.com/AndrewKeig/react-speech
インストールには下記コマンドを実行します。
npm install react-speech --save
インストールが完了したら、まずプロジェクトで下記をインポートします。
import Speech from './speech';
が、私の環境ではエラーになったので、下記に変更しました。
import Speech from 'react-speech';
あとは、音声を読み上げたいタイミングで下記を実行すればOKです。
<Speech text="Welcome to react speech" />
で、このコンポーネントを採用した理由が、voice プロパティでしゃべる音声を変えられること！
デフォルト値は Daniel（ダニエル）で、おそらく男性の声なのですが、ブラウザでサポートされているものであれば、自由に音声を変えることができます。
当初、プロジェクトで使用していたプラグインでは女性の声で再生されていたのですが、男性の声が良いとのご要望があったので、こちらを試しています。
…が、まだ音声は再生できず…。
恐らく、またどこかで単純ミスをしているのではないかと思うので、ミスを探している最中です。
もしかして、エラーが発生するからと修正したインポート文が原因だったり…？
以上、テキストの音声読み上げ機能を実装するための React コンポーネント「react-speech」のご紹介でした。
正常に動作したら、また方法についてまとめたいと思います！
