文字转语音

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. 物理standby database的日常维护【转】

    1.停止Standby select process, status from v$managed_standby; --查看备库是否在应用日志进行恢复 alter database recover ...

  2. 【CISCN2019 华北赛区 Day1 Web1】Dropbox 1

    一.[CISCN2019 华北赛区 Day1 Web1]Dropbox 1 看题 首先是需要注册登录,然后进入是一个文件上传和下载的页面.尝试php一句话木马和burp抓包修改后缀的木马都失败,看来是 ...

  3. Spring扩展接口(3):BeanFactoryPostProcessor

    在此系列文章中,我总结了Spring几乎所有的扩展接口,以及各个扩展点的使用场景.并整理出一个bean在spring中从被加载到最终初始化的所有可扩展点的顺序调用图.这样,我们也可以看到bean是如何 ...

  4. Typora +Picgo 搭建个人笔记

    目录 Typora +Picgo 搭建个人笔记 一.Picgo +Github 搭建图床 1.基础设置 2. 将配置导出,方便下次使用 二.Typora:设置 : 1. 基本设置 2. 导出自动提交 ...

  5. Vue之class的用法

    Vue中class的使用总结如下: 使用形式v-bind:class  简写:class 1.在数组中使用一个class <!DOCTYPE html> <html lang=&qu ...

  6. 拿到开发板需要做的事情 -- 配置Python环境

    1.查看系统时间 date -R 2.修改系统时间 windows上时间项目时间正常,Ubuntu16.04上时间错误 - 贾斯丁哔哔 - 博客园 (cnblogs.com) 3.安装pip3 sud ...

  7. c#中建造者设计模式详解

    基础介绍:   将一个复杂对象的构建与它的表示分离,使得同样的构建过程可以创建不同的表示.   说白了就是将一个复杂的对象拆分成一个一个零件,然后按照既定顺序和规则进行组装,最终形成这个相对复杂的对象 ...

  8. linux 使用crontab 创建定时任务

    转载请注明出处: 在服务器中需要创建一个定时任务,每天执行去清理很早之前备份的文件,所以想到在linux上创建一个shell脚本,通过linux的 crontab 命令定时去执行该shell脚本,从而 ...

  9. PZthon

    一道新式题目,python.exe的分析 这个时候没有思路不要紧,直接wp 先用特别的软件执行.exe程序,就是对.exe进行反编译 然后在反编译脚本的目录写就有了一个打包文件夹 在里面找到文件的.p ...

  10. Lyndon 分解

    介绍 [模板]Lyndon 分解 #include<cstdio> #include<cstring> char s[5000005]; int main(){ scanf(& ...