JavaScript TTS 文本发音

2016/08/24 15:50
阅读数 1.8K

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

语音识别 (将所说的转换成文本文字 / speech to text); 语音合成 (将文本文字读出来 / text to speech); 而chrome在版本33发布后宣布对该特性的支持;今天重要介绍第二部分。

开始使用 speack "hello captain"

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

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

change accent "I am Stark"

volume:声音; rate:发音速度; pitch:音调; voice:声音; language:语言(en,zh,ja…更多参考) 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 國語(臺灣) 接下来我们可以试验下改变发音名称

change voice

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); 除了英文,我们还可以使用其他语言

speak 'おはようございます' 说出“美国队长”

// 使用日语 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); 浏览器支持 Chrome 33+ iOS7 safari部分支持 (测试iOS8支持,iOS9不支持) 兼容性检测

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(); 推荐框架 当然我们如果追求快速开发的话,我们现在依旧有成熟的框架来支持这个功能,让他实现更多浏览器的支持。

ResponsiveVoice.JS 是一款基于html5的跨平台的发音支持类库,支持超过56种语言和168种 声音,分为免费版和商业版。 Demo

speak.js 基于eSpeack改造而来的一款js单词拼读类库.

meSpeak.js 是一个100%的客户端发音类库,支持chrome和safari,并且无需要任何html元素;

say.js一款基于node.js的发音扩展类库。

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部