交談的網頁應用程式 - Speech Synthesis API 簡介

Web Speech API 可在 JavaScript 中新增語音辨識 (語音轉文字) 和語音合成 (文字轉語音) 功能。這篇文章將簡要介紹後者，因為該 API 已在 Chrome 33 版 (行動版和電腦版) 推出。如果您對語音辨識功能有興趣，Glen Shires 曾撰寫一篇精彩的文章，介紹語音辨識功能，標題為「Voice Driven Web Apps: Introduction to the Web Speech API」。

基本資訊

合成 API 最基本的用途，就是傳遞 speechSynthesis.speak() 和語音：

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

不過，您也可以變更參數，影響音量、語速、音調、語音和語言：

var msg = new SpeechSynthesisUtterance();
var voices = window.speechSynthesis.getVoices();
msg.voice = voices[10]; // Note: some voices don't support altering params
msg.voiceURI = 'native';
msg.volume = 1; // 0 to 1
msg.rate = 1; // 0.1 to 10
msg.pitch = 2; //0 to 2
msg.text = 'Hello World';
msg.lang = 'en-US';

msg.onend = function(e) {
    console.log('Finished in ' + event.elapsedTime + ' seconds.');
};

speechSynthesis.speak(msg);

設定語音

您也可以透過 API 取得引擎支援的語音清單：

speechSynthesis.getVoices().forEach(function(voice) {
    console.log(voice.name, voice.default ? voice.default :'');
});

接著，在發音內容物件上設定 .voice，以便設定不同的語音：

var msg = new SpeechSynthesisUtterance('I see dead people!');
msg.voice = speechSynthesis.getVoices().filter(function(voice) { return voice.name == 'Whisper'; })[0];
speechSynthesis.speak(msg);

示範

在 Google I/O 2013 的演講「More Awesome Web: features you've always wanted」(www.moreawesomeweb.com) 中，我展示了類似 Google Now/Siri 的示範，使用 Web Speech API 的 SpeechRecognition 服務搭配 Google Translate API，自動將麥克風輸入內容翻譯成其他語言：

示範：http://www.moreawesomeweb.com/demos/speech_translate.html

不幸的是，該應用程式使用未記錄 (且非官方的 API) 執行語音合成。我們現在有完整的 Web Speech API，可以將翻譯內容朗讀出來！我已更新示範，以便使用合成 API。

瀏覽器支援

Chrome 33 完全支援 Web Speech API，而 iOS 7 版 Safari 則僅部分支援。

特徵偵測

由於瀏覽器可能會個別支援 Web Speech API 的各個部分 (例如 Chromium 的情況)，因此建議您個別偵測每項功能：

if ('speechSynthesis' in window) {
    // Synthesis support. Make your web apps talk!
}

if ('SpeechRecognition' in window) {
    // Speech recognition support. Talk to your apps!
}