会说话的Web应用——语音合成API介绍

寸志· 5 个月前

Web Speech API为JavaScript加入了语音识别（语音转文本）和语音合成（文本转语音）两项功能。本文着重介绍后者，即最近加入到Chrome 33（桌面版和移动版）的API。如果你对语音识别感兴趣，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 ? '(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); 

演示

在我2013年Google I/O的演讲中，More Awesome Web: features you've always wanted，我为大家演示了Google Now，与Siri很相似。当时我使用的是Web Speech API的SpeechRecognition服务，结合Google翻译API，实时地讲麦克风输入翻译为另外的语言（演示）。

不过，它所使用的语音识别是一个没有文档同时也非官方的API。现在好了，我们拥有了完成的Web Speech API，将返回的翻译结果念出来！我更新了演示，使用了最新的识别API。

浏览器兼容性

Chrome 33已经完全支持Web Speech API，不过iOS7上的Safari只提供了部分支持。

特性检测

既然浏览器有可能支持部分支持Web Speech API（Chromium就是个例子），你也许需要分开检测浏览器是否支持特定的API：

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

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