发出语音的 Web 应用 - Speech Synthesis API 简介

Web Speech API 可为 JavaScript 添加语音识别（语音转文字）和语音合成（文字转语音）功能。由于该 API 最近已在 Chrome 33（移动版和桌面版）中推出，因此本文将简要介绍后者。如果您对语音识别感兴趣，不妨参阅 Glen Shires 前段时间撰写的关于语音识别功能的精彩文章“Voice Driven Web Apps: Introduction to the Web Speech API”（以语音为驱动的 Web 应用：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 :'');
});

然后，通过对 utterance 对象设置 .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”（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，而 iOS7 版 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!
}