JavaScript | SpeechSynthesisUtteranceでテキストを読み上げる

2021-01-292021-02-08JavaScript Audio,JavaScript

JavaScriptで使えるWeb Speech APIのSpeechSynthesisUtteranceを利用してテキストを読み上げる方法のサンプルコードです。

See the Pen JavaScript | speech synthesis by yochans (@yochans) on CodePen.

SpeechSynthesisUtteranceの指定方法

SpeechSynthesisUtterance()は自動再生出来ない仕様になっているブラウザが殆どです。
音声読み上げを再生するにはaddEventListenerやonsubmitなどのユーザーアクションが必要なイベントトリガーを経由する必要があります。

<button class="play-btns" id="play-btn">en</button>

サンプルでは再生ボタンを用意して、addEventListenerでイベントを実装しています。

//再生ボタン
const play_btn = document.querySelector('#play-btn');

//読み上げイベントを追加

play_btn_ja.addEventListener( 'click' , speech_play );

function speech_play(){
	let speech_play_option = new SpeechSynthesisUtterance();
	speech_play_option.text = 'テキストを読み上げます。';
	speech_play_option.lang = 'ja-JP';
	speechSynthesis.speak(speech_play_option);
};

機能を拡張した際に「pause」状態でブラウザを閉じたり、ページをリロードした際に音声が出なくなる場合があります。
以下のコードを関数外でも良いので読み込んでおくと、この問題を回避できます。

speechSynthesis.cancel();

SpeechSynthesisUtteranceで指定可能なオプション

SpeechSynthesisUtteranceで再生に利用する指定可能なオプションです。

langは指定しなくても日本からのアクセスであれば「ja-JP」と、アクセスしたブラウザの地域によって自動で設定されます。
「ja-JP」は英語など他の言語も読み上げますが、英語などの他言語をネイティブな発音で読み上げさせたい場合は、それぞれの言語に指定します。