簡単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の音声はよくできてますねぇ

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