在 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. 一个注解@Recover搞定丑陋的循环重试代码

    使用背景 在实际项目中其中一部分逻辑可能会因为调用了外部服务或者等待锁等情况下出现不可预料的异常,在这个时候我们可能需要对调用这部分逻辑进行重试,代码里面主要就是使用for循环写一大坨重试的逻辑,各种 ...

  2. 插值方法 - Newton多项式(非等距节点)

    不多话.Nowton插值多项式(非等距节点)代码: 1 # -*- coding: utf-8 -*- 2 """ 3 Created on Wed Mar 25 15: ...

  3. js常用的函数库

    阻止冒泡.默认行为.事件捕获 /* funname preventEventPropagation * desc 阻止冒泡事件&阻止默认行为&阻止事件捕获 * params {name ...

  4. Service worker (@nuxtjs/workbox) 采坑记

    PWA(Progressive Web App)是前端的大趋势,它能极大的加快前端页面的加载速度,得到近乎原生 app 的展示效果(其实难说).PWA 其实是多种前端技术的组合,其中最重要的一个技术就 ...

  5. H5本地存储:sessionStorage和localStorage

    作者:心叶时间:2018-05-01 18:30 H5提供了二种非常好用的本地存储方法:sessionStorage和localStorage,下面分别介绍一下: 1.sessionStorage:保 ...

  6. javaweb图书管理系统之账号密码验证登录

    验证账号与密码是否正确功能 一.注册功能 首先,在验证账号与密码是否正确的前提下的,需要先注册一个账号,如果没有账号,就会进不去,也无法验证. 其实,注册功能就是一个添加的功能,仿照我的第一篇文章,往 ...

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

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

  8. flex布局图片和文字同级,文字过多导致图片变形问题

    图片增加css样式即可 flex-grow: 0;flex-shrink: 0;

  9. 库存管理系统实现 C语言课设

    1 #include <stdio.h> 2 #include <stdlib.h> 3 #include <string.h> 4 5 //定义一个商品结构体 6 ...

  10. Spring5-IOC底层原理

    1.什么是IOC (1)控制反转,把对象创建和对象之间的调用过程,交给Spring进行管理 (2)使用IOC目的:为了降低耦合度 2.IOC底层原理 (1)xml解析.工厂模式.反射