JavaScriptで合成音声で読み上げを行う

やりたいこと
実装
動作例
結果
参考にさせていただいたサイト

やりたいこと

javaScriptで合成音声で読み上げがきるようなので試してみます。

実装

以下のmozillaのページに例のコードがあるのですが、HTML部分がなかったのと気になる箇所があったので動作するように修正しました。

Web Speech API の SpeechSynthesis インターフェイスは、speech サービスのための制御インターフェイスです。これは、端末で利用可能な合成音声についての情報を取得するために使用されます。読み上げの開始および一時停止、他のコマンドで制御します。

修正したコードは以下の通りです。コメントも追加しています。

<html>
<body>
    <form>
        <input type="text" name="text" class="txt" value="読み上げます" required><br><br>
        <select name="example"></select><br><br>
        <input type="range" id="pitch" name="pitch" min="0" max="2" step="0.1" />
        <label for="pitch">PITCH（高さ）</label><br><br>
        <input type="range" id="rate" name="rate" min="0" max="10" step="0.1" value="1"/>
        <label for="rate">RATE（速さ）</label><br><br>
        <input type="button" value="読み上げ" id="submit"><br><br>
    </form>

    <script>
        const synth = window.speechSynthesis;

        const button= document.querySelector("#submit");//読み上げボタンGUI
        const inputTxt = document.querySelector(".txt");//読み上げテキストGUI
        const voiceSelect = document.querySelector("select");//声の種類のプルダウンGUI

        const pitch = document.querySelector("#pitch");//声の高さのスライダーGUI
        const rate = document.querySelector("#rate");//声の速さのスライダーGUI

        let voices = [];
        function populateVoiceList() { ///声の種類のプルダウン作成
            voices = synth.getVoices();

            for (i = 0; i < voices.length; i++) {
                let option = document.createElement("option");
                option.textContent = voices[i].name + " (" + voices[i].lang + ")";

                if (voices[i].default) {
                    option.textContent += " -- DEFAULT";
                }

                option.setAttribute("data-lang", voices[i].lang);
                option.setAttribute("data-name", voices[i].name);
                voiceSelect.appendChild(option);
            }
        }
        populateVoiceList();

        if (speechSynthesis.onvoiceschanged !== undefined) {//プルダウン更新
            speechSynthesis.onvoiceschanged = populateVoiceList;
        }

        button.onclick = function (event) {//ボタンクリック時の処理
            event.preventDefault();

            let utterThis = new SpeechSynthesisUtterance(inputTxt.value);
            let selectedOption = voiceSelect.selectedOptions[0].getAttribute("data-name");//選択された声の種類の取得
            for (i = 0; i < voices.length; i++) {
                if (voices[i].name === selectedOption) {
                    utterThis.voice = voices[i];//種類の設定
                }
            }
            utterThis.pitch = pitch.value; //声の高さをGUIから設定
            utterThis.rate = rate.value; //声の速さをGUIから設定
            synth.speak(utterThis);//読み上げ

            inputTxt.blur();
         };
 </script>
    
</body>
</html>

動作例

一番上のテキストエリアに入力したテキストを読み上げます。

次のプルダウンメニューから読み上げのアルゴリズム？を選択します。

した二つのSliderで声の質（高さと速さ）を設定します

結果

JavaScriptで合成音声を使用して読み上げができました。

気になったことをいくつか。

英語（おそらく他の言語も）の声の種類では日本語のテキストを読み上げることはできません。（逆に日本語の声の種類だと英文を読んでくれます）
ブラウザやOSにより使用できる声の種類が大きくことなります。（Edgeはネットワークからいろいろな言語を取得しているようで待っていると多くの声の種類がプルダウンに表示されます）固定で指定するのはやめたほうが無難です。

参考にさせていただいたサイト

SpeechSynthesis - Web API | MDN