【HTML5】HTML5 语音合成

一、前言

前一段时间在项目中需要用到播报文字语音。找到了 HTML 5 有这样的功能。

现在有时间进行总结下。

二、SpeechSynthesis

SpeechSynthesis 接口是语音服务的控制接口。它可以用于获取设备上关于可用的合成声音的信息,

开始、暂停语音,或者别的命令。(MDN)

SpeechSynthesis 是 window 上面的属性,可以直接调用。

属性:

下面的都是只读属性

paused:是否处于暂停状态,返回 Boolean 值

pending:语音播报队列中是否有需要说的语音,返回 Boolean 值

speaking:是否正在进行语音播报(包括暂停状态),返回 Boolean 值

事件:

onvoiceschanged:当 getVoices 返回的 voices 列表改变时触发

方法:

cancel:移除所有语音播报队列中的语音

getVoices:返回当前设备可用的声音列表

pause:暂停语音播报

resume:把对象设置为非暂停状态,如果是暂停就继续

speak:添加一个 utterance 到语音播报队列,会在其他语音播报后播报

三、SpeecheSynthesisUtterance

SpeecheSynthesisUtterance 是语音请求的一个类。需要实例化才可以使用。

它包含语音要阅读的内容以及如何阅读(例如语言、音调、音量等)

属性:

lang:读取或设置当前要阅读的语音

pitch:读取或设置阅读的音调

rate:读取或设置阅读的语速

text:读取或设置阅读的内容

voice:读取或设置阅读的声音(不同的浏览器有不同内置的人声)

volume:读取或设置阅读的音量

事件:

boundary:当阅读到单词或句子的边界时触发

end:当阅读结束时触发

error:当阅读报错时触发

mark:当阅读到 SSML 标记时触发

pause:当阅读暂停时触发

resume:当阅读设置为非暂停时触发

start:开始阅读时触发

上面的事件都是用 addEventListenter 绑定事件,同时也可以用对应的 onEventname 绑定事件

四、示例

上面两个 API 可以满足基本的语音播报需要了,下面就是一个示例

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta http-equiv="X-UA-Compatible" content="IE=edge" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>语音合成</title><style>/* input{width: 500px;height: 200px;} */</style>
</head><body><div><h3><a href="https://blog.csdn.net/yb305/article/details/111219007" target="_blank">语音合成使用 文字语音播报</a></h3><h3><a href="https://www.jianshu.com/p/92dec635f6c5" target="_blank">HTML5语音合成Speech Synthesis API简介</a></h3><textarea rows="5" cols="100" id="input" placeholder="请输入内容"></textarea><div><p><label>语言:</label><select id="lange"><option value="zh-cn" selected>中文</option><option value="en-US">英文</option></select></p><p><label>音量:</label><input type="range" min="0" max="1" step="0.1" id="volume" /></p><p><label>音速:</label><input type="range" min="0" max="10" step="0.1" id="rate" /></p><p><label>音色:</label><input type="range" min="0" max="2" step="0.1" id="pitch" /></p></div><div><button type="button" id="submit">播报</button><button type="button" id="suspend">暂停</button><button type="button" id="recovery">恢复</button><button type="button" id="stop">停止</button></div></div><script>// 1.获取input框输入的内容function getValue() {//定义全局对象const obj = {text: "",lange: "zh-cn",volume: 1,rate: 1,pitch: 1,};//点击“播报”按钮const Dom = document.getElementById("submit");Dom.onclick = function () {const value = document.getElementById("input").value;if (!value) return;console.log("点击获取内容1", value);obj.text = value;speeck(obj);};//按下回车键按钮window.onkeyup = function (e) {// console.log("e",e);const value = document.getElementById("input").value;if (e.keyCode !== 13 || !value) return;console.log("回车获取内容2", value);obj.text = value;speeck(obj);};//暂停播报const suspend = document.getElementById("suspend");suspend.onclick = function () {window.plays.pause(); //暂停};//恢复播报const recovery = document.getElementById("recovery");recovery.onclick = function () {window.plays.resume(); //恢复};//停止播报const stop = document.getElementById("stop");stop.onclick = function () {window.plays.cancel(); //停止};//选择语言const lange = document.getElementById("lange");lange.onchange = function (v) {console.log("选择语言", v);console.log("选择语言-2", v.target.value);obj.lange = v.target.value;speeck(obj);};//选择音量const volume = document.getElementById("volume");volume.onchange = function (v) {console.log("选择音量", v.target.value);obj.volume = v.target.value;speeck(obj);};//选择音速const rate = document.getElementById("rate");rate.onchange = function (v) {console.log("选择音速", v.target.value);obj.rate = v.target.value;speeck(obj);};//选择音色const pitch = document.getElementById("pitch");pitch.onclick = function (v) {console.log("选择音色", v.target.value);obj.pitch = v.target.value;speeck(obj);};}//调用执行getValue();//2.语音播报function speeck(data) {console.log("播报时", data);//SpeechSynthesisUtterance对象,主要用来构建语音合成实例window.voice = new window.SpeechSynthesisUtterance();// 对象合成方法Object.assign(window.voice, data)//speechSynthesis对象,主要作用是触发行为,例如读,停,还原window.plays = window.speechSynthesis;window.plays.speak(window.voice);}</script>
</body></html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/238828.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

位运算:Leetcode137.只出现一次的数字(2)

题目描述&#xff1a; 给你一个整数数组 nums &#xff0c;除某个元素仅出现 一次 外&#xff0c;其余每个元素都恰出现 三次 。请你找出并返回那个只出现了一次的元素。 示例 1&#xff1a; 输入&#xff1a;nums [2,2,3,2] 输出&#xff1a;3示例 2&#xff1a; 输入&…

《工具箱-SVN》SVN安装、备份、迁移教程

文章目录 一、服务器搭建SVN1.检查SVN是否存在2.安装SVN3.创建版本库4.创建版本库存放文件地址5.修改配置文件5.1 vim authz5.2 vim passwd5.3 vim svnserve.conf 6.启动并查看SVN7.SVN Checkout8.SVN Update9.SVN Commit 二、SVN-无法连接主机&#xff0c;目标计算机积极拒绝&…

案例 | 电源自动检测测试系统为某电子科技公司定制电源测试解决方案

一、测试背景 陕西某电子科技公司是一家专业生产设计军品电源、集成电路以及电子元器件的高新技术企业&#xff0c;公司虽有一套半自动ATE测试系统&#xff0c;但使用过程繁琐复杂且无法满足日益增长的测试需求&#xff0c;因此公司现需要一套更加优秀的全自动电源测试系统来应…

工具系列:PyCaret介绍_多分类代码示例

&#x1f44b; 工具系列&#xff1a;PyCaret介绍_多分类代码示例 PyCaret 介绍 PyCaret是一个开源的、低代码的Python机器学习库&#xff0c;可以自动化机器学习工作流程。它是一个端到端的机器学习和模型管理工具&#xff0c;可以大大加快实验周期并提高生产效率。 与其他开…

HDFS NFS Gateway(环境配置,超级详细!!)

&#x1f42e;博主syst1m 带你 acquire knowledge&#xff01; ✨博客首页——syst1m的博客&#x1f498; &#x1f618;《CTF专栏》超级详细的解析&#xff0c;宝宝级教学让你从蹒跚学步到健步如飞&#x1f648; &#x1f60e;《大数据专栏》大数据从0到秃头&#x1f47d;&…

【论文阅读】FreeU: Free Lunch in Diffusion U-Net

FreeU: 无需训练直接提升扩散模型生成效果。 paper&#xff1a;https://arxiv.org/abs/2309.11497 code&#xff1a;GitHub - ChenyangSi/FreeU: FreeU: Free Lunch in Diffusion U-Net 1. 介绍 贡献&#xff1a; •研究并揭示了U-Net架构在扩散模型中去噪的潜力&#xff0…

Redis单机、主从、哨兵、集群配置

单机配置启动 Redis安装 下载地址&#xff1a;Download | Redis 安装步骤&#xff1a; 1: 安装gcc编译器&#xff1a;yum install gcc 2: 将下载好的redis‐5.0.3.tar.gz文件放置在/usr/local文件夹下&#xff0c;并解压redis‐5.0.3.tar.gz文件 wget http://download.re…

react生命周期详解,代码示例(新生命周期,与旧生命周期对比)

旧生命周期&#xff1a;https://blog.csdn.net/kkkys_kkk/article/details/135130549?spm1001.2014.3001.5501 目录 React 生命周期中常见的坑 为什么要移除 “will” 相关生命周期方法呢&#xff1f; Fiber是什么 新生命周期图示 新增生命周期与功能变化 完整生命周期…

C语言操作符详解+运算符优先级表格

目录 前言 一、操作符是什么&#xff1f; 二、操作符的分类 三、算术操作符 四、逻辑操作符 五、比较操作符 六、位操作符 七、赋值操作符 八、其他操作符 九、运算符优先级表格 总结 前言 在编写程序时&#xff0c;最常用到的就是操作符&#xff0c;本文将详细的介绍…

KWin、libdrm、DRM从上到下全过程 —— drmModeAddFBxxx(28)

接前一篇文章:KWin、libdrm、DRM从上到下全过程 —— drmModeAddFBxxx(27) 上回书在探究i915_gem_object_lookup_rcu函数调用idr_find函数时所传递的参数的时候,由第1个实参&file->object_idr引出了对于它是在何时何处赋值的探索。 static inline struct drm_i915_…

RAG框架LlamaIndex核心——各种索引应用分析

目录 LLM私域数据训练问题 什么是LlamaIndex 提供的工具 如何使用 一些核心术语

Golang 的内存管理

文章目录 1.内存管理角色1.常见的内存分配方法线性分配器空闲链表分配器TCMalloc 2.Go 内存管理组件mspanmcache初始化替换微分配器 mcentralmheap 3.内存分配4.内存管理思想参考文献 1.内存管理角色 内存管理一般包含三个不同的组件&#xff0c;分别是用户程序&#xff08;Mu…

对比学习综述

1.简介 2.相关工作 2.1、Inst Disc 代理任务&#xff1a;个体判别。把每一个图片看作是一种类别&#xff0c;把每一个图片都区分开来。 正负样本选择&#xff1a;正样本是图片本身&#xff0c;负样本是数据集里的其他图片&#xff0c;该文章从memory bank中随机抽取4096个负…

【C语言】指针详解(三)

1.指针运算 指针的基本运算有三种&#xff0c;分别是:⭐指针-整数 ⭐指针-指针 ⭐指针的关系运算 1.1指针 - 整数 因为数组在内存中是连续存放的&#xff0c;只要知道第一个元素的地址&#xff0c;顺藤摸瓜就能找到后面的所有元素。 int arr[10]{1,2,3,4,5,6,7,8,9,10} #inc…

劈窗算法反演地表温度

目录 摘要操作步骤提取热红外单波段提取NDVI同步像元分辨率与个数劈窗算法地表温度反演制图 摘要 主要使用HJ-2&#xff08;环境减灾二号卫星&#xff09;的IRS传感器的两个热红外波段&#xff0c;以及红波段与近红波段计算得到的NDVI&#xff0c;使用劈窗算法&#xff0c;得到…

贪吃蛇(五)蛇撞墙

上节我们实现了蛇身向右移动的功能&#xff0c;原理就是增加一个节点&#xff0c;删除一个节点。 本节我们处理蛇撞墙重置的功能 实现原理 在移动函数中检查蛇头&#xff08;链表尾节点&#xff09;是否达到墙边的坐标&#xff0c;这里有四种撞墙的情况&#xff1a; 上墙&am…

排障启示录-终端无法接入网络

问题现象&#xff1a;终端连接无线提示无法接入 可能故障方向&#xff1a; 1、策略限制终端接入 2、接入过程不完整 3、存在反制 4、距离较远导致无法接入 信息收集&#xff1a; 全部终端无法接入&#xff1a; 从AP后台打印wifilog或者空口抓包&#xff0c;查看终端从接…

linux怎么做定时执行命令

在Linux中&#xff0c;可以使用cron命令来定时执行命令。cron是一个在指定时间自动执行命令或脚本的守护进程。以下是在Linux中设置定时执行命令的步骤&#xff1a; 1.打开终端&#xff0c;输入以下命令以编辑crontab文件&#xff1a; crontab -e 2.在打开的编辑器中&#xff0…

随笔:集成学习:关于随机森林,梯度提升机的东拉西扯

1.集成学习 这里不会描述算法过程。 当我们有许多学习器对同一个任务做出判断&#xff0c;他们预测的概率可能各不相同&#xff0c;比如预测一个男生(小徐)会不会喜欢另一个女生(小雪)&#xff0c;支持向量机算出来小徐爱上小雪的概率是0.8&#xff0c;朴素贝叶斯认为是0.3&a…

qt线程池子线程辅助类传信号

import sys from PyQt5.QtWidgets import QApplication, QMainWindow, QPushButton from PyQt5.QtCore import QObject, QRunnable, pyqtSignal, QThreadPool# 辅助类&#xff0c;用于定义信号 class WorkerSignals(QObject):print(pass signal)finished pyqtSignal(bool) # …