JavaScriptでテキストを読み上げてくれるSpeechSynthesisUtteranceを軽くつついてみる

SpeechSynthesisUtterance、直訳すると「合成音声シャベール」

TwitterでSpeechSynthesisUtteranceのことを見かけたので、勉強がてらちょっとつついてみようか的な記事です。

さっそくやっていくです。

基本の使い方

test.html

<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
        function speak(){
            var u = new SpeechSynthesisUtterance(); //初期化
            u.text = "ゆっくりしていってね"; //喋って欲しいテキスト
            speechSynthesis.speak(u); //発話
        }
        $(document).ready(function(){
            $('#button').on('click', function(){ //idがbuttonの要素をクリックしたら実行
                speak();
            });
        });
    </script>
    </head>
    <body>
        <p id="button">speak</p>
    </body>
</html>

はい。speakをクリックしたらしゃべってくれましたね。
jQueryは全然使わなくてもいいです。

今気づいたのですが、

<meta charset="UTF-8">

で文字エンコーディングの指定をしないとちゃんと日本語を読み上げられないことがあるようです。ご注意を。

オプション

<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
        function speak(){
            var u = new SpeechSynthesisUtterance();
            u.text = "ゆっくりしていってね";
            u.lang = 'ja-JP'; //追加
            u.rate = 0.5; //追加
            u.pitch = 0.5; //追加
            speechSynthesis.speak(u);
        }
        $(document).ready(function(){
            $('#button').on('click', function(){
                speak();
            });
        });
    </script>
    </head>
    <body>
        <p id="button">speak</p>
    </body>
</html>

//補足
u.lang = 'ja-JP'; //言語設定
u.rate = 0.5; //読み上げ速度（対応の幅はブラウザによってまちまち）
u.pitch = 0.5; //音声ピッチ（対応の幅はブラウザによってまちまち）

よりゆっくりしていってねになりましたね。

入力した文を読み上げてくれるページ的なやつのデモ

See the Pen
Speak by by halkyo (@halkyo)
on CodePen.light

デモのコード全文

なんというか雑ですまない

<!doctype html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script>
        function speak(text, lang, rate, pitch) {
            var u = new SpeechSynthesisUtterance();
            u.text = text;
            u.lang = lang;
            u.rate = rate;
            u.pitch = pitch;
            if(text==""){
                $('#error').html("<p>テキストを入力してください</p>");
                exit();
            }
            check_mb = text.match(/^[\u0020-\u007e]+$/);
            if(lang!="ja-JP" && check_mb==null){
                $('#error').html("<p>英語以外が含まれています</p>");
                exit();
            }
            speechSynthesis.speak(u);
        }
        $(document).ready(function(){
            $("#speak_submit").on('click', function(){
                $('#error').html("");
                var speak_text = $('#speak_text').val();
                var speak_lang = $('#speak_lang').val();
                var speak_rate = $('#speak_rate').val();
                var speak_pitch = $('#speak_pitch').val();
                speak(speak_text, speak_lang, speak_rate, speak_pitch);
            });
        })
    </script>
    <style>
        html,body{
        font-size: 62.5%;
        }
        .layout{
        text-align: center;
        width: 100%;
        max-width: 700px;
        margin: 50px auto;
        }
        .layout *{
        font-size: 1.8rem;
        }
        h1.title{
        font-size: 3rem;
        }
        #error p{
        padding: 10px;
        background-color: #f2f2f2;
        display: inline-block;
        margin: 0 auto 20px 0;
        border-radius: 10px;
        font-size: 1.2rem;
        }
        .speak_form{
        padding: 30px;
        background-color: #f2f2f2;
        border: 5px;
        border-radius: 5px;
        }
        #speak_text{
        padding: 10px;
        border: 0;
        border-radius: 5px;
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 20px;
        }
        #speak_rate,
        #speak_lang,
        #speak_pitch{
        padding: 10px;
        border: 0;
        background-color: #ddd;
        border-radius: 5px;
        }
        #speak_submit{
        padding: 10px 20px;
        background-color: lightseagreen;
        border: 0;
        color: #fff;
        border-radius: 5px;
        cursor: pointer;
        }
        input,select{
        font-size: 2rem;
        }
        .caution p{
        font-size: 1.2rem;
        margin-top: 20px;
        color: #777;
        text-align: left;
        }
    </style>
    </head>
    <body>
        <div id="error"></div>
        <div class="speak_form">
            <div>
                <textarea name="" id="speak_text" placeholder="テキスト" cols="30" rows="10"></textarea>
            </div>
            <div>
                <select name="lang" id="speak_lang">
                    <option value="ja-JP" selected>日本語</option>
                    <option value="en-US">英語（米）</option>
                    <option value="en-GB">英語（英）</option>
                </select>

                <select name="rate" id="speak_rate">
                    <option value="0.5">0.5倍速</option>
                    <option value="0.7">0.7倍速</option>
                    <option value="1" selected>1倍速</option>
                    <option value="1.2">1.2倍速</option>
                    <option value="1.4">1.4倍速</option>
                    <option value="1.6">1.6倍速</option>
                    <option value="1.8">1.8倍速</option>
                </select>

                <select name="pitch" id="speak_pitch">
                    <option value="0.2">低音</option>
                    <option value="1" selected>中音</option>
                    <option value="2">高音</option>
                </select>
                
                <input type="submit" value="読み上げる" id="speak_submit">
            </div>
        </div>
    </body>
</html>

おわり🏆