【React】テキスト読み上げ機能を実装するためのパッケージ「speak-tts」

昨日の記事、【React】テキストを読み上げるためのコンポーネント「react-speech」 でも書いていた通り、react-speech というコンポーネントを触っていましたが、どうにも無理そうだと悟り、違うパッケージにも手を出してみました。
それが、「speak-tts」というパッケージです。

インストール手順及び実装方法については、こちらのページをご確認ください。

speak-tts – npm
https://www.npmjs.com/package/speak-tts

インストールは下記のコマンドを実行します。

npm install speak-tts

実行後は、下記でプロジェクトにインポートします。

import SpeechTts from 'speak-tts'

まずは、使用している環境が、音声合成をサポートしているかをチェックします。
チェック方法は下記を実行。

const speech = new SpeechTts();
if (speech.hasBrowserSupport()) {
    // サポートされている
}

で、サポートされていたら、下記で初期化を行います。

const speech = new Speech();
speech.init(
    'voice':'Google UK English Male',
    'lang': 'en-GB'
).then((data) => {
    // 初期化成功
}).catch(e => {
    // 初期化失敗
});

なお、init() 内で、上記のようにオプションを設定することも可能です。

あとは、任意のタイミングで下記コードを実行し、テキストを読み上げます。

speech.speak({
    text: '[読み上げさせたいテキスト]',
}).then(() => {
    // テキスト読み上げ成功
}).catch(e => {
    // テキスト読み上げ失敗
})

なお、上で紹介した初期化を実行しないで speak() メソッドを実行すると、警告が出るので注意してください。

こちらも簡単で使いやすいと思ったのですが…Cordova アプリには実装できませんでした…。
Android で実行したところ、サポートされていないとのこと。
PC の Google Chrome で動作したので、Android でも使えるかも！と期待したのですが、残念でした。

なお、昨日の react-speech コンポーネントもPC のブラウザで実行したところ、正常に動作しました…。
うーん、そういう落ちか…。

以上、テキスト読み上げを実装するためのパッケージ「speak-tts」のご紹介でした。
触った感じとしては、react-speech よりも speak-tts の方が使いやすそうな印象を受けましたね。
オプションや機能はほぼ同一なので、お好きな方を導入ください。