如何在網頁上透過JavaScript讓文字轉語音

在教課的時候，有時候會在網頁上寫一些小遊戲，例如寫個擲骰子遊戲，但是如果只是網頁畫面有變化會顯得有點乾，於是希望電腦幫我喊一聲【下好離手】！

一開始想說自己錄音存成wav或mp3檔案來播放，發現要講的話太多的話要錄好久，還會產生好多個語音檔要管理，再加上自己的聲音不好聽，還是放棄好了，另尋他途。

經過一番找尋，想不到利用JavaScript跟瀏覽器的API就能文字轉語音，範例程式如下：

speechSynthesis.speak(new SpeechSynthesisUtterance("Hello World"));

結果竟然一行程式就搞定了，測試結果要請大家自己開個網頁、開個喇叭試試，感覺不錯，看了一下文件還能調整語系語音，可以播放語音、暫停語音、繼續語音、取消語音、調整音量、語音速度等等，那就來試試語系語音的設定，看看會有甚麼效果。

首先使用者介面的部分安排如下：

其中【Test】按鈕就只寫上剛剛前面那行程式當作測試。接下來網頁載入完畢後，在下拉式選單放入瀏覽器支援的語音語系，程式如下：

window.onload = function () {
    //取得瀏覽器支援的語音語調
    function populateVoiceList() {
        //判斷是否支援 speechSynthesis API
        if (typeof speechSynthesis === "undefined") {
            return;
        }
 
        const voices = speechSynthesis.getVoices();
 
        for (let i = 0; i < voices.length; i++) {
            const 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);
            document.getElementById("voiceSelect").appendChild(option);
        }
    }
 
    populateVoiceList();
    if (
        typeof speechSynthesis !== "undefined" &&
        speechSynthesis.onvoiceschanged !== undefined
    ) {
        speechSynthesis.onvoiceschanged = populateVoiceList;
    }
}

測試的時候是使用Chrome瀏覽器，大家如果使用不同的瀏覽器，可能會看到不同的選項，畫面如下：

最後【Play】按鈕就來寫程式，根據使用者所選的語音語系來播放語音，程式如下：

document.getElementById("btnPlay").onclick = function () {
    //建立語音物件
    var synth = window.speechSynthesis;
    let voices = speechSynthesis.getVoices();
 
    //設定語系及語音
    let utterance = new SpeechSynthesisUtterance(document.getElementById("txtText").value);
    utterance.lang = document.getElementById("voiceSelect").selectedOptions[0].getAttribute("data-lang");;
 
    let selectedOption = document.getElementById("voiceSelect").selectedOptions[0].getAttribute("data-name");
        for (let i = 0; i < voices.length; i++) {
             if (voices[i].name === selectedOption) {
                 synth.voice = voices[i];
             }
        }
 
        //語音播放
        synth.speak(utterance);
 };

測試結果應該是很有趣的，不過圖文無法完整呈現，但是大家自行測試即可，另外還有語速、音量、暫停、繼續、取消等等功能可以玩喔，一起來試試看吧！