Help us understand the problem. What is going on with this article?

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

More than 1 year has passed since last update.

やりたい事

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

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

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

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

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

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 日本語ちゃんが喋ると思います。

その3オプションとか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で2回目が喋らなかった
        $synthes       = new SpeechSynthesisUtterance();
    }
});

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

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

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

yopisoft
ハードなモノはいりません もっとやわらかく
http://yopisoft.net/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away