文字转语音

SpeechSynthesisUtterance是HTML5中新增的API,用于将指定文字合成为对应的语音

function sayTTS(content) {
const synth = window.speechSynthesis;
const msg = new SpeechSynthesisUtterance()
msg.text = content;//文字内容
msg.lang = "zh-CN";//使用的语言:中文
msg.volume = 1;
//声音音量:0-1
msg.rate = 0.8;
//语速:0-10
msg.pitch = 0.8;
//音高:0-1
synth.speak(msg);
//播放
msg.onend = () => {
console.log("语音播报结束");
}

事件

    //暂停
synth.pause();
//重新开始
synth.resume();
//取消
synth.cancel();
//获取支持的语言数组. 注意:必须添加在voiceschanged事件中才能生效
synth.getVoices
	msg.lang:使用语言
msg.onboundary:语音达到单词或句子边界时触发
msg.onend: 语音说完后触发(这是一个函数)
msg.onerror: 错误时触发
msg.onmark: 语音到达指定的 SSML “标记” 标签时触发
msg.onpause: 暂停
msg.onresume: 恢复暂停
msg.onstart: 开始
msg.pitch: 音高
msg.rate: 语速
msg.text: 文本
msg.voice: 语音
msg.volume: 音量

兼容

ie不支持,目前主流浏览器如Chrome,Edge,Safari等等都是支持的

js文字转语音播放SpeechSynthesisUtterance的更多相关文章

  1. JS实现文字转语音播放

    JS实现文字转语音播放背景实现方式第一种:百度文字转语音开放API第二种:微软TTS语音引擎第三种:SpeechSynthesisUtterance总结背景在做项目的过程中,经常会遇到场景是客户要求播 ...

  2. js文字转语音并播放

    这里调用的是百度文字转语音开放API html: <div> <input type="text" id="ttsText"> < ...

  3. js模仿微信语音播放的小功能

    自己写的一个模仿微信语音播放的小功能,实现的主要功能是:点击播放,点击暂停,播放切换,,,  代码如下: <!DOCTYPE html> <html lang="en&qu ...

  4. js仿微信语音播放

    html结构如下: <div class="app-voice-you" voiceSrc="xx.mp3"> <img class=&quo ...

  5. js文字转语音(speechSynthesis)

    环境: windows 官网网址: https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis 基础使用: var msg = n ...

  6. web端文字转语音的几种方案

    最近在开发一个微信排队取号的的系统,其中对于服务员端(管理端) 需要有呼叫功能,即点按钮 就播出"xxx号顾客请就座"的声音. 经过在网上一番搜索研究,web端实现指定文字的语音播 ...

  7. Delphi文字转语音TTS【支持选择语音库,播放,暂停,开始,停止,生成语音文件,设置音量,设置语速】

    作者QQ:(648437169) 点击下载➨文字转语音TTS [Delphi 文字转语音TTS]调用系统自带的TTS组件,支持XP,vista,win7,win8,win10系统,支持选择语音库,播放 ...

  8. Android文字转语音

    虽然视觉上的反馈通常是给用户提供信息最快的方式,但这要求用户把注意力设备上.当用户不能查看设备时,则需要一些其他通信的方法.Android提供了强大的文字转语音Text-to-Speech,TTS A ...

  9. jQuery语音播放插件

    自己做jQuery插件:将audio5js封装成jQuery语音播放插件   日前的一个项目需要用到语音播放功能.发现Audio5js符合需求且使用简单,又鉴于jQuery控件便于开发操作,于是有了以 ...

  10. Android技术分享-文字转语音并朗读

    Android技术分享-文字转语音并朗读 最近在做一个项目,其中有一个功能是需要将文本转换成语音并播放出来.下面我将我的做法分享一下. 非常令人开心的是,Android系统目前已经集成了TTS,提供了 ...

随机推荐

  1. 14.11 Socket 基于时间加密通信

    在之前的代码中我们并没有对套接字进行加密,在未加密状态下我们所有的通信内容都是明文传输的,这种方式在学习时可以使用但在真正的开发环境中必须要对数据包进行加密,此处笔者将演示一种基于时间的加密方法,该加 ...

  2. Go包介绍与初始化:搞清Go程序的执行次序

    Go包介绍与初始化:搞清Go程序的执行次序 目录 Go包介绍与初始化:搞清Go程序的执行次序 一.main.main 函数:Go 应用的入口函数 1.1 main.main 函数 1.2 main.m ...

  3. nginx虚拟机及热部署(在线升级)

    实现热部署(在线升级): 热部署方案一 (有弊端,不利于回滚) 查看nginx版本及源编译差数: /usr/local/nginx/sbin/nginx -V 预编译/ 编译/ 安装:在预编译之前,先 ...

  4. 【matplotlib 实战】--雷达图

    雷达图(Radar Chart),也被称为蛛网图或星型图,是一种用于可视化多个变量之间关系的图表形式.雷达图是一种显示多变量数据的图形方法.通常从同一中心点开始等角度间隔地射出三个以上的轴,每个轴代表 ...

  5. Python 日期和时间处理教程:datetime 模块的使用

    Python 中的日期不是独立的数据类型,但我们可以导入一个名为 datetime 的模块来使用日期作为日期对象. 示例:导入 datetime 模块并显示当前日期: import datetime ...

  6. Linux运维技能图谱

    前言 该技能图谱依个人经验绘制,不适用于所有运维岗位.对于刚入行的从业者,也不需要按照图谱全学一遍,应该根据岗位工作内容来学习.有些技术我也不会,但作为一个选项我也写进去了,比如容器运行时有Docke ...

  7. 理解maven命令package、install、deploy的联系与区别(转)

    https://blog.csdn.net/zhaojianting/article/details/80324533 我们在用maven构建java项目时,最常用的打包命令有mvn package. ...

  8. [Python急救站]密码判断

    用Python做一个密码判断,用户输入注册密码,需要6位以上,包含数字.大写字母.小写字母. import re a = re.compile('[a-z]') b = re.compile('[A- ...

  9. 高效开发与设计:提效Spring应用的运行效率和生产力

    引言 现状和背景 Spring框架是广泛使用的Java开发框架之一,它提供了强大的功能和灵活性,但在大型应用中,由于Spring框架的复杂性和依赖关系,应用的启动时间和性能可能会受到影响.这可能导致开 ...

  10. LabVIEW用布尔控件实现上升沿和下降沿触发

    我们利用了第三方布尔控件来记录摇杆的高低电平状态,并和摇杆布尔控件组成布尔数组,转换成十进制数进行判断上升沿和下降. 上升沿触发.例如一开始第三方布尔控件为T,夹紧松开布尔控件为F,然后我这时把摇杆控 ...