JavaScript | speechSynthesis.speak()で音声が出なくなる原因と対策

2021-01-302021-01-31JavaScript,JavaScript Audio

JavaScriptでWeb Speech APIのSpeechSynthesisUtteranceを利用していると、JavaScriptコードは間違っていないハズなのにテキストを読み上げる音声が再生されなくなる場合があります。

この記事では、speechSynthesis.speak()を音が実行しても音が出なくなる原因と対策を紹介しています。

speechSynthesis.speak()で音声が出なくなる原因

speechSynthesis.speak()で音声が出なくなる原因は、speechSynthesis.puase()が実行された状態でページがリロードされると発生する問題です。

これは主に、開発中のWEBサイトやアプリケーションで記述しているスクリプトの実行結果をリアルタイムで更新している場合などに多く起こる現象かもしれません。

一度、音声が再生されなくなった状況は、ページのリロードや別ページからの読み込み、別ブラウザでも再生できなくなる事がありましたのでAPI側での関係かもしれません。

対策

speechSynthesis.speak()で音声が出なくなる問題を解決するには、再生アクション前にspeechSynthesis.cancel()を一度実行します。

speechSynthesis.cancel();

以下、簡単なサンプルコードです。

//再生ボタン
const play_btn = document.querySelector('#play-btn');
//一時停止ボタン
const puase_btn = document.querySelector('#puase-btn');

//再生
play_btn.addEventListener( 'click' , play );

function play(){
	let play_option = new SpeechSynthesisUtterance();
	play_option.text = 'テキストを読み上げます。';

	speechSynthesis.cancel();
	speechSynthesis.speak(play_option);
};

//一時停止
puase_btn.addEventListener( 'click' , puase );

function puase(){
	speechSynthesis.puase();
};