SpeechSynthesisUtteranceを使ってブラウザにテキストを読み上げてもらう 💬

音声ファイルを生成できるので、非常に便利です。

一方で、生成したmp3をブラウザ上で再生したい場合は、 SpeechSynthesisUtterance を検討しても良いでしょう。

使い方はとても簡単で、「こんにちは」と読み上げたい時は、

const utterThis = new SpeechSynthesisUtterance();

utterThis.text = 'こんにちは';

speechSynthesis.speak(utterThis);

で、OKです。

せっかく動的に音声を生成できるので、inputタグに入力したテキストを読み上げてもらおうとするとこんな感じです。

const utterThis = new SpeechSynthesisUtterance();

utterThis.text = document.querySelector('input').value || '';

speechSynthesis.speak(utterThis);

事前にファイルを生成する場合と違って事前にチェックが難しい（事前にチェックしてもブラウザの実装が変わる可能性がある）ので、読み間違いなどが発生する可能性などがあります。
例えば、「へのへのもへじ」を読み上げてもらうと「えのえのもえじ」と発話されました。

そこさえ気をつければ、対応ブラウザが広いので、気軽に使えるのが良いですね。もしも、動的な読み上げを行いたい場合は事前にファイルを生成することは難しいので、SpeechSynthesisUtteranceの出番な気がします。

みかづきブログ・カスタム