# speechSynthesis強制使用Chrome中的Google小姐中文語音

網路上的`window.speechSynthesis`教學主要都只有說切換指定語言

像是這樣就能切換成中文語音:

```javascript
var synth = window.speechSynthesis;
var u = new SpeechSynthesisUtterance();
u.lang = 'zh-TW';
u.text = "你要讀出的中文內容";
synth.speak(u);
```
但是這種寫法在系統有支援多種語音的情況下只會選擇系統預設語音

* win7繁中 - 無支援中文語音
* win7簡中 - 有支援微軟中文語音(系統預設)
* win10 - 簡繁中都有支援微軟中文語音(系統預設)

如果想要切換成其他語音(例如Chrome才有的Google中文語音)

就要另外再寫

```javascript
var synth = window.speechSynthesis;
var u = new SpeechSynthesisUtterance();
//u.lang = 'zh-TW'; //這句絕對不要用
u.text = "你要讀出的中文內容";

// 用 synth.getVoices() 取得支援的語音列表
// 要注意網頁開啟後首次執行 window.speechSynthesis 後才會把語音功能載入
// 大概要花幾秒鐘的時間才能完全載入,再來才能正確取得語音列表
// 所以要想辦法延遲 synth.getVoices(); 的執行時間
// 
// 或是使用下面的事件偵測
// (這個事件在載入過程會被觸發多次,很難用,他是偵測changed不是偵測完全載入完成,
// 但這是window.speechSynthesis裡唯一的一個事件偵測,沒其他選擇)
// var voices;
// window.speechSynthesis.onvoiceschanged = function() {
//   voices = synth.getVoices();
//   // 注意 speak() 不要直接寫在這裡,不然會被重覆觸發多次
// };
var voices = synth.getVoices();

for(let index = 0; index < voices.length; index++) {
  /*
  "Google US English"
  "Google 日本語"
  "Google 普通话（中国大陆）"
  "Google 粤語（香港）"
  "Google 國語（臺灣）"
  */

  //console.log(this.voices[index].name);
  if(voices[index].name == "Google 國語（臺灣）"){       
    //u.lang = 'zh-TW'; //這句絕對不要用
    //要使用Google中文語音的話請不要再用u.lang指定語言
    //不然可能又會被切回系統預設的中文語音
    u.voice = voices[index];
    break;
  }else{
    //如果沒有則使用預設中文語音
    u.lang = 'zh-TW';
  }
}

synth.speak(u);
```

## 參考資料

**window.speechSynthesis**是瀏覽器內原生的語音功能,詳細用法可以看以下MDN的教學文件

* window.speechSynthesis
  * [SpeechSynthesis - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis)
* SpeechSynthesisUtterance
  * [SpeechSynthesisUtterance - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesisUtterance)
* window.speechSynthesis.onvoiceschanged
  * Stack Overflow上關於`window.speechSynthesis.onvoiceschanged`的[討論](https://stackoverflow.com/questions/21513706/getting-the-list-of-voices-in-speechsynthesis-of-chrome-web-speech-api?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa)
* 列出瀏覽器有支援哪些語音和測試語音的小工具
  * [Speech synthesiser](https://mdn.github.io/web-speech-api/speak-easy-synthesis/)