WebkitのSpeech Synthesis APIで複数項目を再生する方法の考察まとめ

公開2014.08.31
更新2017.12.03
仕事・技術

WebkitのSpeech Synthesis APIで色々ハマったのでメモしておきます。

まずchromeのバグ？に対応したsetTimeoutを使う方法です。

var sp = new SpeechSynthesisUtterance();
var msg = ['あああ','いいい','ううう'];
sp.lang = 'ja-JP';
sp.onend = function(){
	setTimeout(function(){
		sp.lang = 'ja-JP';
		var text = msg.shift();
		if (text) {
			sp.text = text;
			speechSynthesis.speak(sp);
		}
	}, 0);
};
speechSynthesis.speak(sp);

この方法で順番にmsgの内容が読まれていきますが、msgの中身が多数項目になったりすると途中で再生が終わってしまったりしまって使いモノになりません。

原因はonend、再生終了するタイミングで次を生成しているので処理が追いついていない？ような感じですがよくわかりません。

そこで、次のようなコードに変更します。

var msg = [];
msg.push(new SpeechSynthesisUtterance('あああ'));
msg.push(new SpeechSynthesisUtterance('いいい'));
msg.push(new SpeechSynthesisUtterance('ううう'));

for (var i=0;i&lt;msg.length;i++){
	msg[i].lang = 'ja-JP';
	window.speechSynthesis.speak(msg[i]);
}

これだと最後まで必ず再生されます。
つまり一気に再生する分をすべて登録してしまうわけですね。

たまに一瞬遅れることがありますが、人間のブレスのタイミングみたいなものですので特に気にはならないかと。

難点をあげるとすると最初の方法ではブラウザの画面遷移と共に再生終了しますが、こちらの方法だと画面遷移しても最後まで再生しきるまでは再生が終了しないことでしょうか。

特に画面遷移しても音声終了しなくても問題なければ後者の方法を採用すると良ろしいかと思います。