簡単Javascript & jQueryでテキスト読み上げ

やりたい事

ブラウザに喋らせたい。
音声はchromeのGoogle 日本語ちゃんに　say('こんにちわ');　 で喋らせたい。
ブラウザはchrome前提です。

その１これだけでも喋るのだけれども

javascript

$(function(){
	$synthes = new SpeechSynthesisUtterance('こんにちわ');
	speechSynthesis.speak($synthes);
});

デフォルトの声はもやっとしている。

その２Google 日本語ちゃんを呼び出して喋らす

javascript

$(function(){

	// 準備 $voicesを取得したいだけなのだけれども
	$voise        = null;
	$voiseName    = 'Google 日本語';
	$voices       = speechSynthesis.getVoices();
	$synthes      = new SpeechSynthesisUtterance();
	
	// SpeechSynthesisUtterance()に時間かかるから様子みる
	$repeat  = setInterval(function() {
		if($synthes){
			$voices  = speechSynthesis.getVoices();
			// 準備完了 $voicesの中身を見てみる F12
			$.map($voices, function(n, i){console.log(n.name)});
			clearInterval($repeat);
		}
	}, 300);

	// 読み上げ
	function say(msg){
  		// $voices から $voiseNameを探す
		$voise = $.grep($voices, function(n, i){return n.name == $voiseName})[0];
		$synthes.voice = $voise;                  // 音声の設定
		speechSynthesis.cancel();                 // かぶった読み停止
		$synthes.text  = msg;                     // 読む内容
		speechSynthesis.speak($synthes);          // 喋れ
   	}
	
	// ボタン動作
	$('input[type="BUTTON"]').click(function(){
		say($(this).val());
	});
});

html

<input type="BUTTON" value="こんにちわ">
<input type="BUTTON" value="Hello Javascript World">

とたんに長くなってしまいましたが、

javascript

$voices  = speechSynthesis.getVoices();

で　$voices　使える音声のリストを取って

javascript

// $voices から $voiseNameを探す
$voise = $.grep($voices, function(n, i){return n.name == $voiseName})[0];

nameがGoogle 日本語を$voiseへ取り出したいだけなのです。

これでデフォルトよりは流暢なGoogle 日本語ちゃんが喋ると思います。

その３オプションとかchrome以外のブラウザへの対応

javascript

$(function(){

	if(! window.speechSynthesis) alert('読み上げ非対応みたい');

	// 音声準備
	$voise        = null;
	$voiseName    = 'Google 日本語';
	$voices       = speechSynthesis.getVoices();
	$synthes      = new SpeechSynthesisUtterance();
	
	// SpeechSynthesisUtterance()に時間かかるから様子みる
	$repeat  = setInterval(function() {
		if($synthes){
			$voices  = speechSynthesis.getVoices();
			// $voicesの中身を見てみる F12
			$.map($voices, function(n, i){console.log(n.name)});
			clearInterval($repeat);
		}
	}, 300);

	// 読み上げ
	function say(msg){
		if(! $voices.length){alert('音声ロード中みたい…'); return;}
		
        if(! $voices.lenght) $voices = speechSynthesis.getVoices();
        
        // $voices から $voiseNameを探す
        $voise = $.grep($voices, function(n, i){return n.name == $voiseName})[0];
        
        if($voise) $synthes.voice = $voise;       // 音声の設定
        speechSynthesis.cancel();                 // 停止
        $synthes.text  = msg;                     // 読む内容
        $synthes.rate  = 1.0;                     // 速度    0.1-10
        $synthes.pitch = 1.0;                     // ピッチ  0.0-2.0
        $synthes.lang  = "ja-JP";                 // 日本語に設定
        speechSynthesis.speak($synthes);          // 喋れ
        
        // 更新しないとfirefoxで２回目が喋らなかった
        $synthes       = new SpeechSynthesisUtterance();
    }
});

consoleに使える音声一覧をダンプしています。

Googleの音声はよくできてますねぇ

色々音声やパラメータいじって遊んでみよう。