「JavaScript 30」學習筆記（廿三）

前言

本文為「JavaScript 30」教學影片的學習筆記。

目標

使用 SpeechSynthesisUtterance 物件，驅動瀏覽器的合成語音。

筆記

建立一個 SpeechSynthesisUtterance 物件，並選取相關元素。

const msg = new SpeechSynthesisUtterance();
let voices = [];
// 下拉式選單
const voicesDropdown = document.querySelector('[name="voice"]');
// 滑竿選項
const options = document.querySelectorAll('[type="range"], [name="text"]');
// 開始按鈕
const speakButton = document.querySelector('#speak');
// 停止按鈕
const stopButton = document.querySelector('#stop');

取得文字框的內文。

msg.text = document.querySelector('[name="text"]').value;

---

建立一個 populateVoices() 方法，以建立下拉式選單的選項。

function populateVoices() {
    // 使用 getVoices() 方法取得所有聲音
    voices = this.getVoices();
    // 找到指定語言的聲音並更改下拉式選單
    voicesDropdown.innerHTML = voices
        .filter(voice => voice.lang.includes('en'))
        .map(voice => `<option value="${voice.name}">${voice.name} (${voice.lang})</option>`)
        .join('');
}

---

建立一個 setVoice() 方法，以指定聲音。

function setVoice() {
    // 指定聲音
    msg.voice = voices.find(voice => voice.name === this.value);
    // 執行 toggle() 方法
    toggle();
}

---

建立一個 toggle() 方法，在指定聲音時立即切換聲音。

function toggle(startOver = true) {
    speechSynthesis.cancel();
    if (startOver) {
        speechSynthesis.speak(msg);
    }
}

---

建立一個 setOption() 方法，將指定選項設為指定値。

function setOption() {
    msg[this.name] = this.value;
    toggle();
}

---

監聽 speechSynthesis，當發生 voiceschanged 事件時，觸發 populateVoices() 方法。

speechSynthesis.addEventListener('voiceschanged', populateVoices);

監聽下拉式選單，當發生 change 事件時，觸發 setVoice() 方法。

voicesDropdown.addEventListener('change', setVoice);

監聽所有選項，當發生 change 事件時，觸發 setOption() 方法。

options.forEach(option => option.addEventListener('change', setOption));

監聽 speakButton 元素，當發生 click 事件時，觸發 toggle() 方法。

speakButton.addEventListener('click', toggle);

監聽 stopButton 元素，當發生 click 事件時，觸發 toggle(false) 方法。

stopButton.addEventListener('click', () => toggle(false));