Fork me on GitHub

Use JavaScript to Speech Your Text

使用JavaScript 拼读你的文本

在w3c草案中增加了对Web Speech Api的支持;主要作用在 两个非常重要的方面:

而chrome在版本33发布后宣布对该特性的支持;今天重要介绍第二部分。

开始使用

// 你可以直接打开你的控制台粘贴下面代码
var words = new SpeechSynthesisUtterance('Hello captain');
window.speechSynthesis.speak(words);

Demo2:

当然你还可以修改很多参数去调整你的发音:

var msg = new SpeechSynthesisUtterance();
var voices = window.speechSynthesis.getVoices();
msg.voice = voices[10]; // 
msg.voiceURI = 'native';
msg.volume = 1; // 0 to 1
msg.rate = 1; // 0.1 to 10
msg.pitch = 2; //0 to 2
msg.text = 'I am Stark';
msg.lang = 'en';

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

speechSynthesis.speak(msg);

设置发音

你可以通过下面函数获取可以使用的发音列表名称

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

大概你可以获取下面的一个列表

// 省略一部分结果
Google Deutsch 
Google US English 
Google UK English Female 
Google UK English Male 
Google 日本語 
Google 普通话(中国大陆)  
Google 國語(臺灣) 

接下来我们可以试验下改变发音名称

var msg = new SpeechSynthesisUtterance('hey captain,sometime I just want to break you perfect teeth');
msg.voice = speechSynthesis.getVoices().filter(function(voice) { return voice.name == 'Google US English'; })[0];
speechSynthesis.speak(msg);

除了英文,我们还可以使用其他语言

// 使用日语
var msg = new SpeechSynthesisUtterance('おはようございます');
msg.voice = speechSynthesis.getVoices().filter(function(voice) { return voice.name == 'Google 日本語'; })[0];
speechSynthesis.speak(msg);
// or 使用中文
var msg = new SpeechSynthesisUtterance('美国队长3');
msg.voice = speechSynthesis.getVoices().filter(function(voice) { return voice.name == 'Google 普通话(中国大陆)'; })[0];
speechSynthesis.speak(msg);

浏览器支持

兼容性检测

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

如果对于不支持的浏览器,我们可以使用老的方法,即将需要发音的单词发送到服务端进行处理,返回一个音频,类似如下:

// 使用来自谷歌翻译的音频
var audio = new Audio();
audio.src ='http://translate.google.com/translate_tts?ie=utf-8&tl=en&q=' + encodeURI('hello captain');
audio.play();

推荐框架

当然我们如果追求快速开发的话,我们现在依旧有成熟的框架来支持这个功能,让他实现更多浏览器的支持。

持续更新中…

参考

[1] Web apps that talk - Introduction to the Speech Synthesis API

[2] using-google-text-to-speech-in-javascript

[3] A More Awesome Web: Features You’ve Always Wanted - Google I/O 2013

[4] HTML Speech API Examples

更多说明: