使用 JavaScript 进行单词发音 Use JavaScript to Speech Your

xingqiba 发布于2019-08-19 18:08 / 2274人阅读

摘要：在草案中增加了对的支持主要作用在两个非常重要的方面语音识别将所说的转换成文本文字语音合成将文本文字读出来而在版本发布后宣布对该特性的支持今天重要介绍第二部分。是一款基于的跨平台的发音支持类库，支持超过种语言和种声音，分为免费版和商业版。

在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种
声音，分为免费版和商业版。Demo

speak.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

超融合服务器 idc机房托管使用javascript javascript使用行内使用javascript javascript数组使用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/79215.html

FCC 成都社区·前端周刊第 11 期

摘要：正式发布已正式发布，新版本重点关注工具链以及工具链在中的运行速度问题。文章内容包括什么是内存，内存生命周期，中的内存分配，内存释放，垃圾收集，种常见的内存泄漏以及如何处理内存泄漏的技巧。 1. Angular 6 正式发布 Angular 6.0.0 已正式发布，新版本重点关注工具链以及工具链在 Angular 中的运行速度问题。Angular v6 是统一整体框架、Material ...

lentrue 2019-08-22 17:01 评论0 收藏0
FCC 成都社区·前端周刊第 11 期

摘要：正式发布已正式发布，新版本重点关注工具链以及工具链在中的运行速度问题。文章内容包括什么是内存，内存生命周期，中的内存分配，内存释放，垃圾收集，种常见的内存泄漏以及如何处理内存泄漏的技巧。 1. Angular 6 正式发布 Angular 6.0.0 已正式发布，新版本重点关注工具链以及工具链在 Angular 中的运行速度问题。Angular v6 是统一整体框架、Material ...

NusterCache 2019-08-29 15:17 评论0 收藏0
FCC 成都社区·前端周刊第 11 期

摘要：正式发布已正式发布，新版本重点关注工具链以及工具链在中的运行速度问题。文章内容包括什么是内存，内存生命周期，中的内存分配，内存释放，垃圾收集，种常见的内存泄漏以及如何处理内存泄漏的技巧。 1. Angular 6 正式发布 Angular 6.0.0 已正式发布，新版本重点关注工具链以及工具链在 Angular 中的运行速度问题。Angular v6 是统一整体框架、Material ...

betacat 2019-08-02 10:21 评论0 收藏0
基于云计算上的人工智能服务

摘要：全球主要的云计算提供商现在提供基于云计算的人工智能产品。显然，由于从头开始构建这样一个系统的费用高昂，人工智能作为一项服务仍然一直位于行业巨头所在的领域。在用于人工智能服务的品牌下，公司提供不少于项服务。如今，采用人工智能的企业遇到了一个主要障碍，那就是在内部开发人工智能产品成本高昂，因此有了外包人工智能产品的需求。而对于从中小企业到预算受限的大型企业来说，通过云计算来采用人工智能的成本要低...

Leo_chen 2019-04-30 14:32 评论0 收藏0