前幾天我們做了語音轉文字，而今天我們要做的是文字變語音。在介面上我們可以選擇發音語言、發音速度以及語調。同時也能自訂文字內容，播放語音跟暫停。實作範例如下：

邏輯流程

1. 開啟語音功能
2. 取得語音提供的語言種類，放入清單
3. 設定語言清單改變的監聽
4. 設定速度、語調及文字內容改變的監聽
5. 設定播放、暫停點擊的監聽

課程重點

1. 開啟語音功能：利用const msg = new SpeechSynthesisUtterance();來取得語音。但要注意有另個全域變數叫做speechSynthesis，真正觸發發音這件事的是speechSynthesis.speak(msg)。
2. 取得語言種類必須要透過監聽speechSynthesis的voiceschanged事件，如下

   let voices = [];
   
   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('');
   }
   
   speechSynthesis.addEventListener('voiceschanged', populateVoices);
   

   一定要透過voiceschanged完，this.getVoices()才會得到一串語言Array，因為他需要時間load。若直接在pageload寫speechSynthesis.getVoices()是不會有東西的。
3. 播放、暫停：練習中用了一個蠻聰明的方法來用很短的CODE完成這兩個按鍵。

   function toggle(startOver = true) {
       speechSynthesis.cancel();
       if (startOver) {
         speechSynthesis.speak(msg);
       }
   }
   
   speakButton.addEventListener('click', toggle);
   stopButton.addEventListener('click', () => toggle(false));
   

   這個function是為了讓每次調整參數都直接重新播放，不用等他講完，所以一開始先cancel，接著就speak，那預設參數為true，當要暫停時就輸入false。而這個toggle可以用在其他調整速度、語調跟文字的觸發事件上。