在 chrome 下使用比较好的中文语音包。

注意 speechSynthesis.getVoices() 有时候可能会返回空数组,需要做验证

var zhCnLangs = speechSynthesis.getVoices().filter(x => x.lang === 'zh-CN');
var microsoftKangkangLang = zhCnLangs.find(x=> x.name === 'Microsoft Kangkang - Chinese (Simplified, PRC)');
var hi = new window.SpeechSynthesisUtterance('001床位发起呼叫!');
hi.rate = 0.4; // 语速,从0.1-10,默认为1,2表示正常语速的两倍
hi.pitch =2; // 说话的高音,从 0-2,默认为1
hi.lang = 'zh-CN'; // 使用的语言,例如 zh-CN
hi.voice = microsoftKangkangLang;
window.speechSynthesis.speak(hi);

html5 tts(文字朗读)的更多相关文章

  1. 干货 | 调用AI api 实现网页文字朗读

    京东云上提供了足够多的人工智能api,并且都使用了http的方式进行了封装,用户可以方便在自己的系统中接入京东云的ai能力.今天就是介绍一下如何编写很少的代码就能使用京东云的语音合成api在网页中实现 ...

  2. Android Studio快速集成讯飞SDK实现文字朗读功能

    今天,我们来学习一下怎么在Android Studio快速集成讯飞SDK实现文字朗读功能,先看一下效果图: 第一步 :了解TTS语音服务 TTS的全称为Text To Speech,即“从文本到语音” ...

  3. HTML5火焰文字特效DEMO演示

    效果展示:http://hovertree.com/texiao/html5/26/ 效果图: 扫描二维码查看效果:

  4. HTML5火焰文字特效DEMO演示---转载

    只有google支持 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...

  5. [读码]HTML5像素文字爆炸重组

    [边读码,边学习,技术也好,思路也罢] [一款基于HTML5技术的文字像素爆炸重组动画特效,我们可以在输入框中指定任意文字,点击确定按钮后,就会将原先的文字爆炸散去,新的文字以像素点的形式组合起来,看 ...

  6. 基于HTML5自定义文字背景生成QQ签名档

    分享一款利用HTML5实现的自定义文字背景应用,首先我们可以输入需要显示的文字,并且为该文字选择一张背景图片,背景图片就像蒙版一样覆盖在文字上.点击生成QQ签名档即可将文字背景融为一体生成另外一张图片 ...

  7. HTML5 <Canvas>文字粒子化

    文字粒子化,额或者叫小圆圈化... 1 <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> ...

  8. TTS 文字转语音 ekho

    1.源码下载 使用svn客户端,执行如下命令下载 svn co https://svn.code.sf.net/p/e-guidedog/code/ 2.官方网站查看说明 http://www.egu ...

  9. C# TTS 文字和英文

    using System;using System.Globalization;using System.Linq;using System.Speech.Synthesis;using System ...

随机推荐

  1. scanf()格式化输入

    scanf();有种带[]的格式化输出方式 此格式控制符的基本格式为:%[scanfset] #include<stdio.h> int main() { char str[100] ; ...

  2. IMWEB 前端面试题汇总

    1.什么是盒子模型? CSS中的思维模型,每一个元素都包含margin,padding,boder,content区域,占一个盒子形状,整体称为盒模型. 2.简述一下src与href的区别? Href ...

  3. H5进阶篇--实现微信摇一摇功能

    在HTML5中,DeviceOrientation特性所提供的DeviceMotion事件封装了设备的运动传感器时间,通过改时间可以获取设备的运动状态.加速度等数据(另还有deviceOrientat ...

  4. 使用Egret插件压缩代码包体积,减少请求数量的实战教程

    在白鹭引擎发布了5.2.7版本中新增加了命令行,增加自动合图插件TextureMergerPlugin功能.今天,我们以一个EUI案例来展示自动合图插件的具体使用方法和注意事项. 此外,我们在本文还融 ...

  5. Android Studio安装问题

    安装问题可以参考:https://blog.csdn.net/y74364/article/details/96121530 但是gradle安装缓慢,需要FQ.有加速器FQ的可以开加速器安装,没有的 ...

  6. 每日所学之自学习大数据的Linux环境配置2

    今天设置网络 出现报错 明天找时间解决 不用解决了 刚才试了以下 又能下载了 描述一下问题: cannot find a valid baseurl for repo:base/7/x86_64 如果 ...

  7. JSDOM基础

    JavaScript 通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素. HTML DOM 模型被构造为对象的树: HTML DOM 树 JavaScript 能够改变页 ...

  8. IO流入门+简单案例实现

    IO流 总结内容 1. IO流是什么 2. 字符流和字节流 3. File常用API(前面类型为返回类型) 4. 编码转换 5. IO流实现流程 6. 输入输出流简单实现 7. 输入输出流简单实现 总 ...

  9. 关于Symbol.iterator 学习笔记

    1.可以部署在对象上的一个遍历器 2. 遍历器是一个函数,需要返回一个含有一个next 方法的对象 const likeArray = {0:'a', 1: 'b', 2: 'c',3: 'd'. l ...

  10. BlockingCollection实现生产者消费者

    很简单的代码,看注释 class Program { private static ManualResetEvent _manualResetEvent = new ManualResetEvent( ...