使用 JavaScript 进行单词发音

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

  • 语音识别 (将所说的转换成文本文字 / speech to text);
  • 语音合成 (将文本文字读出来 / text to speech);

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

演示地址

文档和演示代码

开始使用

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

  • volume:声音;
  • rate:发音速度;
  • pitch:音调;
  • voice:声音;
  • language:语言(en,zh,ja…更多参考)

设置发音

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

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

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

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

浏览器支持

  • Chrome 33+
  • iOS7 safari部分支持 (测试iOS8支持,iOS9不支持)

兼容性检测

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

推荐框架

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

  • ResponsiveVoice.JS 是一款基于html5的跨平台的发音支持类库,支持超过56种语言和168种
    声音,分为免费版和商业版。Demo
  • speak.js 基于eSpeack改造而来的一款js单词拼读类库.
  • meSpeak.js 是一个100%的客户端发音类库,支持chrome和safari,并且无需要任何html元素;
  • say.js一款基于node.js的发音扩展类库。

持续更新中…

参考

  1. Web apps that talk – Introduction to the Speech SynthesisAPI
  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
2 收藏 1 评论

可能感兴趣的话题



直接登录
最新评论
跳到底部
返回顶部