HTML5 : 測試瀏覽器內建的合成語音

目前 HTML5 FUN 網站中的合成語音是使用 Google 的 TTS 合成後，當 MP3 來播放；在思考一個問題，如果哪一天，那個 API 無法使用時，該怎麼辨？之前曾想直接利用瀏覽器內建的合成語音，但是沒有找到相關的資料，才會使用 Google 的 TTS，結果昨天在找為什麼 iOS 上無法使用「devicemotion」的「accelerationIncludingGravity」來抓 iPad 翻轉的座標時，才看到如何使用瀏覽器內建的合成語音範例。這樣一來，合成語音的 Plan B 出現了！

參考底下 MDN 的範例：

• https://github.com/mdn/dom-examples/tree/main/web-speech-api/speak-easy-synthesis

將它小修改以後，可以在這個頁面中，輸入想合成語音的文字，然後聽聽利用內建合成語音輸出的聲音。

測試內建的合成語音

在輸入區中輸入一些文字，按 Play 鈕，或是由下拉式選單更換語言後，就可以聽到瀏覽器的合成語音。

請輸入文字

速度：

1

語調

1

測試心得

測試完，目前大概有幾個發現 :

• 在 Window 中的 Chrome 使用「Mircorsoft Anna」的聲音，只有英文可以合成。
• 如果選的聲音是 Google 的，中文、英文都可以合成。
• 在 iOS 中，必須是能認得中文字(漢字)的語言才會合成中文字的部份，因此選中文系列的才能正常念出來。
• 在 FireFox 中，只能合成英文。
• Android 手機則還要看系統內建了什麼文字轉語音，像我的 Samsung 手機，如果是用預設的 Samsung 文字轉語音，居然也是沒有中文的；幸好它可以自己選用  Google 的，不過得進系統設定中去設定(設定／一般管理／語言及輸入／語音／文字到語音／慣用語音辨識引擎)；設定完，還得將瀏覽器關掉再重開，才能看到 Google 的文字轉語音的語言清單。
• 系統本身有沒有支援文字轉語音是重點，像我的 iPad 4 (iOS 10.3.4) 就沒有支援，所以在語言清單上，什麼也沒有。

程式編寫重點

MDN 的範例基本上已經很完整了，不過，我想，它可能沒有在 iOS 上測試過，iOS 很多功能都得先跟使用者「互動過」，才能正常運作，包括合成語音也是。

在 iOS 上，想要發出聲音，它必須將 speak 放在「touchend」或是「click」(click 的程序中有 touchend，所以主因還是 touchend)，不然 speak 就不會執行。所以範例中的的 Play 按鈕，改成用 onclick (這樣子沒有觸控的系統也能使用) 來觸發，而不是用原來的「submit」。

另外，輸入的文字如果太長，它會被中斷，然後下一次再呼叫 speak 時，就卡住不動了，所以為了要確保不會發生這樣的情形，在建立新的合成語音之前，可能要先呼叫 .cancel() 來清除之前累積的。

查看原始碼

參考資料

• https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis