文字转语音

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. VSCode使用JavaScript刷LeetCode配置教程(亲试可以!)

    账号秘密都对,但是缺登录不成功的问题 诀窍可能是: 在属性设置中把LeetCode版本改成cn.点击LeetCode配置,修改Endpoint配置项,改成leetcode-cn,再次尝试登陆即可. 大 ...

  2. 挑战程序设计竞赛 2.2 poj 3040 Allowance 贪心

    https://vjudge.csgrandeur.cn/problem/POJ-3040 /* 作为创纪录的牛奶产量的奖励,约翰决定每周给贝西一小笔零用钱.FJ拥有一组N(1 <= N < ...

  3. QT Recursive repaint detected 检测到递归重绘

    1.打印绘图时的线程号,如果与主线程号不一致,则需要使用信号传递数据,在主线程窗体中绘图 如下: qDebug() << "当前线程:" <<QThread ...

  4. PTA乙级1038C++哈希解法

    #include"bits/stdc++.h" using namespace std; int main() { int a,b[105]={0}; long i,n,K; ci ...

  5. MySQL函数解读

    一.字符串函数 1.1.instr() INSTR(str,substr)一共有两个参数str被查询字符,substr查询字符,查询时下标从1开始记,只查询第一次出现的地方,为查询到显示为0 一般用法 ...

  6. 在Vue中使用Mock.js虚拟接口数据实例详解

    在Vue项目中使用Mock.js可以方便地模拟接口数据,用于前端开发和测试.Mock.js是一个生成随机数据的库,可以帮助我们快速构建虚拟接口数据.在本文中,我将通过一个实例来详细讲解在Vue中使用M ...

  7. Spring Cloud 整合

    前言 玩SpringCloud之前最好懂SpringBoot,别搞撑死骆驼的事.Servlet整一下变成Spring:SSM封装.加入东西就变为SpringBoot:SpringBoot再封装.加入东 ...

  8. Linux-目录层次标准

    版权声明:原创作品,谢绝转载!否则将追究法律责任. ----- 作者:kirin 根目录(/) 根目录是整个系统最重要的一个目录,因为不但所有的目录都是由根目录衍生出来的,同时根目录也与开机.还原.系 ...

  9. RTMP协议学习——Message与Chunk解读

    前言 之前通过对抓包数据的学习和分析,对RTMP协议有了一个整体的认知,大致了解了RTMP从建立连接到播放视频的流程,文章请看<RTMP协议学习--从握手到播放>.但是对于RTMP消息传输 ...

  10. Nginx根据Origin配置禁止跨域访问策略

    产品需要通过某所的安全测评扫描,其中提出一个关于跨域策略配置不当的问题,如下: 这个需要根据客户端传递的请求头中的Origin值,进行安全的跨站策略配置,目的是对非法的origin直接返回403错误页 ...