我的 Chrome 會說話

#Chrome #Web Speech API
蒼時弦也
技術文章
我的 Chrome 會說話

這是很多年前的事情了，當時看到別人的 Chrome 竟然會說話，讓我震驚了很久。但是花了很多年都沒有找到要怎麼做，不過最近因為一些關係，我終於知道了他的秘密！




首先，這不是鬼故事！這篇文章要討論的是 Web Speech API 這個由 Google 所提交的功能。主要就是做「語音轉文字」跟「文字轉語音」兩件事情，像是有在玩遊戲可能有用過 Discord 這種類似 Slack 的通訊軟體，裡面提供的朗讀功能應該就是透過這個 API 實作的。

Web Speech API

在 Web Speech API 裡面其實只有兩個功能「語音轉文字」跟「文字轉語音」兩種。文字轉語音的功能可能比較常見，我們可以在像是在一些地方看到。

像是 Google 搜尋右邊的「麥克風」圖示，就是利用 Web Speech API 所製作的功能，讓我們可以利用講話的方式直接輸入搜尋的關鍵字。

Google 搜尋的語音框

另外就是將文字念出來，也就是這篇文章要討論的內容。

Hello World

那麼，要怎麼讓 Chrome （或者 Firefox 發出聲音呢？）

var msg = new SpeechSynthesisUtterance('Hello World');
window.speechSynthesis.speak(msg);

首先，我們要產生出一個 SpeechSynthesisUntterance 物件，把要講的東西放進去。然後再透過 speechSynthesis 提供的 speak 把他唸出來。

var msg = new SpeechSynthesisUtterance('世界你好！');
window.speechSynthesis.speak(msg);

當然，講中文也是完全沒有問題的。

主要是這個 API 預設會用作業系統（Ex. macOS 的 VoiceOver 功能）所以不管是哪個瀏覽器預設都會用同樣的聲音講話。

調整語音

因為作業系統中可能會針對各種國家的語言提供語音，所以同樣是中文，我們也可以從 zh-TW 切換到 zh-HK 讓他用廣東話的方式念出來。

var voices = window.speechSynthesis.getVoices();
var msg = new SpeechSynthesisUtterance('世界你好！');
msg.voice = voices[35]; // 每台電腦/瀏覽器結果可能略有不同

window.speechSynthesis.speak(msg);

目前似乎只有 Safari 可以正常使用，其他瀏覽器不一定可以用。

另外就是 SynthesisUtterance 還有幾個參數可以玩。

  • pitch - 語調 0 ~ 2 設定，越大音越高
  • volume - 音量

小結

這個功能在某些應用情境，像是聊天機器人。或者類似 Discord 這種通訊軟體，算是很有用的。不過似乎很少人在討論，就算是 Google 查詢「Speech API」也還不一定會看到，不過作為一個有趣的小功能倒是值得一試。

印象中可以選擇男聲或者女聲，但是找不到。也許是 Chrome 裡面提供的語音包才有，不過目前 Chrome (66.0) 似乎切換語音不太正常，就暫時無法測試。

參考文章

  • http://blog.zhusee.in/post/56286985943/web-speech-api-part-i-using-speech-synthesis-to-make-bro
  • https://developers.google.com/web/updates/2014/01/Web-apps-that-talk-Introduction-to-the-Speech-Synthesis-API

原文刊載於弦而時習之