js文字转语音播放SpeechSynthesisUtterance
文字转语音
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的更多相关文章
- JS实现文字转语音播放
JS实现文字转语音播放背景实现方式第一种:百度文字转语音开放API第二种:微软TTS语音引擎第三种:SpeechSynthesisUtterance总结背景在做项目的过程中,经常会遇到场景是客户要求播 ...
- js文字转语音并播放
这里调用的是百度文字转语音开放API html: <div> <input type="text" id="ttsText"> < ...
- js模仿微信语音播放的小功能
自己写的一个模仿微信语音播放的小功能,实现的主要功能是:点击播放,点击暂停,播放切换,,, 代码如下: <!DOCTYPE html> <html lang="en&qu ...
- js仿微信语音播放
html结构如下: <div class="app-voice-you" voiceSrc="xx.mp3"> <img class=&quo ...
- js文字转语音(speechSynthesis)
环境: windows 官网网址: https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis 基础使用: var msg = n ...
- web端文字转语音的几种方案
最近在开发一个微信排队取号的的系统,其中对于服务员端(管理端) 需要有呼叫功能,即点按钮 就播出"xxx号顾客请就座"的声音. 经过在网上一番搜索研究,web端实现指定文字的语音播 ...
- Delphi文字转语音TTS【支持选择语音库,播放,暂停,开始,停止,生成语音文件,设置音量,设置语速】
作者QQ:(648437169) 点击下载➨文字转语音TTS [Delphi 文字转语音TTS]调用系统自带的TTS组件,支持XP,vista,win7,win8,win10系统,支持选择语音库,播放 ...
- Android文字转语音
虽然视觉上的反馈通常是给用户提供信息最快的方式,但这要求用户把注意力设备上.当用户不能查看设备时,则需要一些其他通信的方法.Android提供了强大的文字转语音Text-to-Speech,TTS A ...
- jQuery语音播放插件
自己做jQuery插件:将audio5js封装成jQuery语音播放插件 日前的一个项目需要用到语音播放功能.发现Audio5js符合需求且使用简单,又鉴于jQuery控件便于开发操作,于是有了以 ...
- Android技术分享-文字转语音并朗读
Android技术分享-文字转语音并朗读 最近在做一个项目,其中有一个功能是需要将文本转换成语音并播放出来.下面我将我的做法分享一下. 非常令人开心的是,Android系统目前已经集成了TTS,提供了 ...
随机推荐
- 物理standby database的日常维护【转】
1.停止Standby select process, status from v$managed_standby; --查看备库是否在应用日志进行恢复 alter database recover ...
- 【CISCN2019 华北赛区 Day1 Web1】Dropbox 1
一.[CISCN2019 华北赛区 Day1 Web1]Dropbox 1 看题 首先是需要注册登录,然后进入是一个文件上传和下载的页面.尝试php一句话木马和burp抓包修改后缀的木马都失败,看来是 ...
- Spring扩展接口(3):BeanFactoryPostProcessor
在此系列文章中,我总结了Spring几乎所有的扩展接口,以及各个扩展点的使用场景.并整理出一个bean在spring中从被加载到最终初始化的所有可扩展点的顺序调用图.这样,我们也可以看到bean是如何 ...
- Typora +Picgo 搭建个人笔记
目录 Typora +Picgo 搭建个人笔记 一.Picgo +Github 搭建图床 1.基础设置 2. 将配置导出,方便下次使用 二.Typora:设置 : 1. 基本设置 2. 导出自动提交 ...
- Vue之class的用法
Vue中class的使用总结如下: 使用形式v-bind:class 简写:class 1.在数组中使用一个class <!DOCTYPE html> <html lang=&qu ...
- 拿到开发板需要做的事情 -- 配置Python环境
1.查看系统时间 date -R 2.修改系统时间 windows上时间项目时间正常,Ubuntu16.04上时间错误 - 贾斯丁哔哔 - 博客园 (cnblogs.com) 3.安装pip3 sud ...
- c#中建造者设计模式详解
基础介绍: 将一个复杂对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示. 说白了就是将一个复杂的对象拆分成一个一个零件,然后按照既定顺序和规则进行组装,最终形成这个相对复杂的对象 ...
- linux 使用crontab 创建定时任务
转载请注明出处: 在服务器中需要创建一个定时任务,每天执行去清理很早之前备份的文件,所以想到在linux上创建一个shell脚本,通过linux的 crontab 命令定时去执行该shell脚本,从而 ...
- PZthon
一道新式题目,python.exe的分析 这个时候没有思路不要紧,直接wp 先用特别的软件执行.exe程序,就是对.exe进行反编译 然后在反编译脚本的目录写就有了一个打包文件夹 在里面找到文件的.p ...
- Lyndon 分解
介绍 [模板]Lyndon 分解 #include<cstdio> #include<cstring> char s[5000005]; int main(){ scanf(& ...