Webブラウザ(+ jQuery)だけでテキストトゥスピーチをやってみたよ

2017-01-27Web開発/デザインjavascript

ども、今回はCordovaアプリを作っていてテキストトゥスピーチ(Text to Speech(以降 TTS))を利用したくなったのでやります。というわけで、今回はCordovaアプリなのでwebブラウザ上で動作するものを探しました。

探してみるとあるもんですね。全く知りませんでしたが、W3Cで制定されているみたいですね。というわけで、今回は”Web Speech API”のTTSを使ってみましたので備忘録的にまとめようと思います。ちなみにこのAPIでは音声認識も提供されているみたいです。ほんと至れり尽くせりですね。

Contents

1. 簡単にテストしてみる

では早速使ってみましょう。ここでは極めてシンプルに文字を読んでもらいます。というわけで、テストしたのが以下のコードです。

<!DOCTYPE html>
<html><head></head>
<body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" crossorigin="anonymous"></script>
<script>
$(function() {
	var msg = new SpeechSynthesisUtterance('Hello World');
	window.speechSynthesis.speak(msg);
});
</script>
</body>
</html>

<!DOCTYPE html>

<body>

$(function() {

var msg = new SpeechSynthesisUtterance('Hello World');

window.speechSynthesis.speak(msg);

});

</script>

</body>

</html>

これをHTMLに記述してブラウザで開くと「Hello World」と読んでくれます。コードを見てくださるとわかると思いますが、SpeechSynthesisUtteranceのインスタンスを作成する際に読み上げてほしい文字列を渡しています。そしてその後speakで読み上げてもらっています。余談ではありますが、本サイトの名前である「Foolean」という造語も一応それっぽく読み上げてくれました。

2. 読み上げの設定

さて、上記ではただ文字列を読み上げるということだけをしていますが、音量や読み上げの速さなどいくつか設定することができる項目があります。詳しくはリファレンスを読んでいただきたいのですが、以下にそれっぽく設定しているコードを載せておきます。

$(function() {
	// var msg = new SpeechSynthesisUtterance('');
	// window.speechSynthesis.speak(msg);

	var msg = new SpeechSynthesisUtterance();
	msg.volume = 1; //ボリューム
	msg.rate = 1.4; //レート
	msg.pitch = 1; //ピッチ
	msg.text = "Hello World"; //テキストをセット
	msg.lang = 'ja-JP'; //言語

	window.speechSynthesis.speak(msg);
});

$(function() {

// var msg = new SpeechSynthesisUtterance('');

// window.speechSynthesis.speak(msg);

var msg = new SpeechSynthesisUtterance();

msg.volume = 1; //ボリューム

msg.rate = 1.4; //レート

msg.pitch = 1; //ピッチ

msg.text = "Hello World"; //テキストをセット

msg.lang = 'ja-JP'; //言語

window.speechSynthesis.speak(msg);

});

ここでは、読む速さ(レート)の値を少し大きくしました。こうすることにより、先ほどより少し早く文字列を読んでもらえます。他にも音量を変えたかったらボリューム、声の高さを変えたければピッチの値を変更すれば大丈夫です。また、先程はSpeechSynthesisUtteranceのインスタンスを作成する際に文字列を与えていましたが、今回は後からテキストをセットしています。ここで入れる文字列を変えることで動的に読ませたい文章を変えることができます。