使用 JavaScript 进行单词发音 Use JavaScript to Speech Your Text
在w3c草案中增加了对Web Speech Api的支持;主要作用在
两个非常重要的方面:
语音识别 (将所说的转换成文本文字 / speech to text);
语音合成 (将文本文字读出来 / text to speech);
而chrome在版本33发布后宣布对该特性的支持;今天重要介绍第二部分。
演示地址
文档和演示代码
开始使用
// 你可以直接打开你的控制台粘贴下面代码
var words = new SpeechSynthesisUtterance('Hello captain');
window.speechSynthesis.speak(words);
当然你还可以修改很多参数去调整你的发音:
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 國語(臺灣)
接下来我们可以试验下改变发音名称
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);
浏览器支持
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种
声音,分为免费版和商业版。Demospeak.js 基于eSpeack改造而来的一款js单词拼读类库.
meSpeak.js 是一个100%的客户端发音类库,支持chrome和safari,并且无需要任何html元素;
say.js一款基于node.js的发音扩展类库。
持续更新中...
参考
Web apps that talk - Introduction to the Speech SynthesisAPI
using-google-text-to-speech-in-javascript
A More Awesome Web: Features You've Always Wanted - Google I/O 2013
HTML Speech API Examples
使用 JavaScript 进行单词发音 Use JavaScript to Speech Your Text相关推荐
- javascript英语单词音节拆分_英语启蒙:自然拼读之单词合成与分割
这是软实力英语的第542篇原创文章. 培养孩子的语音意识,是培养阅读能力的重要组成部分.研究表明,语音意识差的孩子阅读能力也较差. 具体来说,就是自然拼读(phonics)的过程,包括:1. 字母及字 ...
- javascript英语单词音节拆分_英语单词音节的划分:成音节详解
提示:点击单词可以听到发音,所有示例单词发音均为英式音标发音 在语音学里,一个音节通常要有一个元音,一般情况是由一个元音加上一个或多个辅音构成.但是有些辅音比较特殊,这些辅音通常比较响亮,可以和其他的 ...
- JavaScript初学者系列一:JavaScript基础(上)
写作目的: 本系列是自己平时学习JS的笔记,我也是js初学者,高手见笑,您也可以选择绕过,写这个系列的目的,希望能和大家一道在JavaScript方面有所提高,与初学者共同进步! 本小节分以下内容: ...
- javascript 高级程序设计_所以 JavaScript 到底是什么?我居然懵了????
前言 引用<JavaScript 高级程序设计第四版>中说的话 --"从简单的输入验证脚本到强大的编程语言,JavaScript 的崛起没有任何人预测到.它很简单,学会用只要几分 ...
- 《JavaScript启示录》——1.21 JavaScript对象和Object()对象
本节书摘来自异步社区<JavaScript启示录>一书中的第1章,第1.21节,作者:[美]Cody Lindley著,更多章节内容可以访问云栖社区"异步社区"公众号查 ...
- 如何在另一个JavaScript文件中包含一个JavaScript文件?
JavaScript中是否有类似于CSS中@import的内容,可让您在另一个JavaScript文件中包含一个JavaScript文件? #1楼 而不是在运行时添加,而是使用脚本在上传之前进行串联. ...
- 前端之JavaScript第一天学习(1)-JavaScript 简介
javaScript 是世界上最流行的编程语言. 这门语言可用于 HTML 和 web,更可广泛用于服务器.PC.笔记本电脑.平板电脑和智能手机等设备. JavaScript 是脚本语言 JavaSc ...
- 【JavaScript】理解与使用Javascript中的回调函数
在Javascript中,函数是第一类对象,这意味着函数可以像对象一样按照第一类管理被使用.既然函数实际上是对象:它们能被"存储"在变量中,能作为函数参数被传递,能在函数中被创建, ...
- JavaScript可否多线程? 深入理解JavaScript定时机制
JavaScript的setTimeout与setInterval是两个很容易欺骗别人感情的方法,因为我们开始常常以为调用了就会按既定的方式执行, 我想不少人都深有同感, 例如 setTimeout( ...
最新文章
- ORB-SLAM3中的ORB提取
- 清华发布《中国AI发展报告2018》:中科院系统AI论文产出全球第一
- 通俗易懂的Word Embeddings
- AI:2020年WAIC世界人工智能大会2020年7月9日9:30-12:00开幕式《李彦宏、Elon Musk、马云等大佬演讲》
- 学会这些Python美图技巧,就等着女朋友夸你吧
- nmap常用参数详解
- psychopy 与脑电打码 eeg
- 路由重分布列表控制例子
- 原创]Windows Gdi入门初级应用(VC SDK)
- 判断域名来源的操作【window.location.host.indexOf(‘域名关键词‘)】 - 代码篇
- Ecere SDK:用于GUI和图形的跨平台工具包
- 直接调用高德地图_高德上线“充电地图”功能 覆盖全国96%充电桩信息
- git 删除和复制远程分支
- 20145122《Android开发基础》实验四实验报告
- centos安装python3_CentOS安装Python3-阿里云开发者社区
- 实时系统性能测试指标及方法
- java jtable 单元格合并_JTable单元格合并AAA
- day1------安装部署k8s之完成(3)
- caution: filename not matched:xxx
- 关于WIN10开机启动慢的一些问题解决