Perform text-to-speech using JavaScript.

Things I want to do
implementation
Example of operation
Result
Websites I used as references

Things I want to do

It seems that JavaScript can be used to create a text-to-speech function, so I’ll give it a try.

implementation

The following Mozilla page contains the example code, but it lacked the HTML portion and had some questionable parts, so I modified it to make it work.

SpeechSynthesis - Web API | MDN

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

The corrected code is as follows. Comments have also been added.

<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>

Example of operation

The text entered in the top text area will be read aloud.

Select the reading algorithm from the following dropdown menu.

The two sliders below set the voice quality (pitch and speed).

Result

I was able to use synthesized speech in JavaScript to have the text read aloud.

Here are a few things that caught my attention.

English voices (and probably other languages as well) cannot read Japanese text aloud. (Conversely, Japanese voices can read English text.)
The types of voices available vary greatly depending on the browser and operating system. (Edge seems to retrieve various languages from the network, and if you wait, many voice types will appear in the dropdown menu.) It's best to avoid specifying a fixed voice.

Websites I used as references

SpeechSynthesis - Web API | MDN