WES BOS系列影片
Alex快速導讀系列影片

今天來認識 Web Speech API中的兩個功能
一個是 SpeechSynthesisUtterance
它包含語音服務應閱讀的內容
以及有關如何閱讀的信息（例如語言，音調和音量）。

另一個是 Speech Synthesis
語音業務的控制器接口;
它可用於檢索有關設備上可用的合成語音，
開始和暫停語音以及其他命令的信息。

呼叫的語法:

const msg = new SpeechSynthesisUtterance();

將msg console 出來發現有很多屬性可以使用
待會都會陸續使用到

開始動手作

1.對SpeechSynthesis監聽'voiceschanged'事件，
並使用getVoices()方法，列出語言清單

function populateVoices () {
 console.log(this.getVoices())
}
 
speechSynthesis.addEventListener('voiceschanged', populateVoices)

2.撰寫populateVoices函式
使用getVoices()得到能使用的語系清單
並透過filter過濾語系，只留下('en')語系
最後用map做出渲染下拉式選單的HTML

function populateVoices () {
 voices = this.getVoices()
 voicesDropdown.innerHTML = voices
  .filter(voice => voice.lang.includes('en'))
  .map(voice => `<option value="${voice.name}">${voice.name} (${voice.lang})</option>`)
  .join('');
}

3.對voicesDropdown監聽'change'事件

voicesDropdown.addEventListener('change', setVoice)

4.依照下拉式選單的選擇，設置語音合成器的語系

function setVoice() {   
  msg.voice = voices.find(voice => voice.name === this.value);
}

5.製作speak與stop按鈕功能，先設置監聽器

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

6.撰寫toggle函式
每一次speak前都要先取消，之後再speak

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

7.設定rate與picth，先設置監聽器

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

8.撰寫setOption函式
設置後走toggle函式，讓語音合成器說話

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

今天的練習完成囉，完整的程式碼請直接點擊下方codePen連結
codePen
或者也可以直接到WES BOS的網站下載打包好的檔案
javascript30