【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>
相关文章：
【HTML5】HTML5 语音合成
一、前言 前一段时间在项目中需要用到播报文字语音。找到了 HTML 5 有这样的功能。 现在有时间进行总结下。 二、SpeechSynthesis SpeechSynthesis 接口是语音服务的控制接口。它可以用于获取设备上关于可用的合成声音的信息， 开始、暂停语音，或者别…...
顺序表的实现
目录 一. 数据结构相关概念 二、线性表 三、顺序表概念及结构 3.1顺序表一般可以分为： 3.2 接口实现： 四、基本操作实现 4.1顺序表初始化 4.2检查空间，如果满了，进行增容编辑 4.3顺序表打印 4.4顺序表销毁 4.5顺…...
深度学习中的池化
1 深度学习池化概述 1.1 什么是池化 池化层是卷积神经网络中常用的一个组件，池化层经常用在卷积层后边，通过池化来降低卷积层输出的特征向量，避免出现过拟合的情况。池化的基本思想就是对不同位置的特征进行聚合统计。池化层主要是模仿人的…...
Java面试整理-Java设计模式
Java中的设计模式通常是从更广泛的面向对象设计模式中借鉴而来的，这些模式旨在解决特定的设计问题和改善代码的可维护性、灵活性和可扩展性。设计模式大致可以分为三类：创建型、结构型和行为型。以下是这三类中一些常见的设计模式： 创建型模式 单例模式（Singleton）：确保一…...
用CHAT了解更多知识点
问CHAT：什么是硅基生命和碳基生命？ CHAT回复：硅基生命和碳基生命是两种理论性的生物体类型，这些生物体主要是由硅或碳元素以及其他元素构成的。 碳基生命是我们当前所熟知的生命形式。碳元素能够形成稳定且复杂的分子，…...
一个利用摸鱼时间背单词的软件
大家好，我是 Java陈序员。 最近进入了考试季，各种考试，英语四六级、考研、期末考等。不知道大家的英语四六级成绩怎么样呢？ 记得大学时，英语四级都是靠高中学习积累的老本才勉强过关。 而六级则是考了多次ÿ…...
Matlab/Simulink的一些功能用法笔记（3）
01--引言 最近加入到一个项目组，有一些测试需要去支持，通过了解原先团队的测试方法后，自己作了如下改善，大大提高了工作效率。这也许就是软件开发的意义吧，能够去除一些重复的机械的人工操作并且结果还非常不可靠。 …...
Wafer晶圆封装工艺介绍
芯片封装的目的（The purpose of chip packaging）: 芯片上的IC管芯被切割以进行管芯间连接，通过引线键合连接外部引脚，然后进行成型，以保护电子封装器件免受环境污染（水分、温度、污染物等）&…...
Mac OS 13+,Apple Silicon,删除OBS虚拟摄像头(virtual camera),
原文链接: https://www.reddit.com/r/MacOS/comments/142cv OBS为了捕获摄像头视频,将虚拟摄像头插件内置为系统插件了.如下 直接删除没有权限的,要删除他,在mac os 13以后,需要关闭先关闭苹果系统的完整性保护(SIP) Apple 芯片(M1,....)的恢复模式分为两种,回退恢复模式,和…...
精解 ES6 Promise 用法
🐱 个人主页：SHOW科技，公众号：SHOW科技 🙋♂️ 作者简介：2020参加工作，专注于前端各领域技术，共同学习共同进步，一起加油呀！ 💫优质专栏&#x…...
Linux之基础I/O
目录 一、C语言中的文件操作 二、系统文件操作I/O 三、文件描述符fd 1、文件描述符的引入 2、对fd的理解 3、文件描述符的分配规则 四、重定向 1、重定向的原理 2、重定向的系统调用dup2 五、Linux下一切皆文件 一、C语言中的文件操作 1、打开和关闭 在C语言的文…...
Linux开发工具——gcc篇
gcc的使用 文章目录 gcc的使用 历史遗留问题（普通用户sudo） gcc编译过程 预处理（进行宏替换） 编译（生成汇编） 汇编（生成机器可识别代码） 链接（生成可执行文件或库文件&a…...
C#通讯——关于Winform中的简单的Http服务器与客户端
C#通讯——关于Winform中的简单的Http服务器与客户端 前言一、Http是什么？二、简单的Http服务器三、简单的Http客户端四、实际调用五、Winform中Http服务器和WebApi的区别？ 前言 在实际项目中通讯的交互的过程中，遇见数据传输时同事和我说用…...
Mendelson AS2 介绍下载和配置
最近与一家国外公司做EDI对接，并且EDI通讯工具是基于AS2协议的。目前开源的as2的开源项目有openas2,Mendelson AS2，和国人写的freeas2但是，现在freeas2已经被从开源中国不能下载了，变为收费的版本了。 如果你需要使用基于AS2协议…...
旅游海报图怎么做二维码展示？扫码即可查看图片
现在旅游攻略的海报可以做成二维码印刷在宣传单单页或者分享给用户来了解目的地的实际情况，出行路线、宣传海报等。用户只需要扫描二维码就可以查看内容，更加的方便省劲，那么旅游海报的图片二维码制作的技巧有哪些呢？使用图片二维…...
常用git指令
初始化Git仓库:git init 添加文件到暂存区:git add <file> 提交更改到本地仓库:git commit -m "commit message" 查看本地仓库的提交历史:git log 创建分支:git branch <branch_name> 切换分支:git checkout <branch_name> 查看所有分支:git…...
【FPGA】分享一些FPGA协同MATLAB开发的书籍
在做FPGA工程师的这些年，买过好多书，也看过好多书，分享一下。 后续会慢慢的补充书评。 【FPGA】分享一些FPGA入门学习的书籍【FPGA】分享一些FPGA协同MATLAB开发的书籍 【FPGA】分享一些FPGA视频图像处理相关的书籍 【FPGA】分享一些FPGA高速…...
幺模矩阵-线性规划的整数解特性
百度百科:幺模矩阵 在线性规划问题中，如果A为幺模矩阵，那么该问题具有最优整数解特性。也就是说使用单纯形法进行求解，得到的解即为整数解。无需再特定使用整数规划方法。 m i n c T x s . t . { A x ≥ b x ≥ 0 \begin{align*} min \quad…...
数据分析思维
Why&What 数据分析是为了驱动决策赋能业务。在数据分析过程中需要对目标进行拆解量化，如何拆解量化目标便是数据分析思维。 在任务拆解过程中使用的软件、统计模型、分析方法等为分析工具和手段，如何在恰当的场景合理的使用这些工具、模型、方法、手…...
C++ boost planner_cond_.wait(lock) 报错1225
1.如下程序段 boost unique_lock doesn’t own the mutex: Operation not permitted 问题： 其中makePlan是一个线程。这里的unlock导致错误这个报错 boost unique_lock doesn’t own the mutex: Operation not permitted bool navigation::makePlan(){ //cv::named…...
从WWDC看苹果产品发展的规律
WWDC 是苹果公司一年一度面向全球开发者的盛会，其主题演讲展现了苹果在产品设计、技术路线、用户体验和生态系统构建上的核心理念与演进脉络。我们借助 ChatGPT Deep Research 工具，对过去十年 WWDC 主题演讲内容进行了系统化分析，形成了这份…...
解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八
现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet，点击确认后如下提示 最终上报fail 解决方法 内核升级导致，需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...
pam_env.so模块配置解析
在PAM（Pluggable Authentication Modules）配置中， /etc/pam.d/su 文件相关配置含义如下： 配置解析 auth required pam_env.so1. 字段分解 字段值说明模块类型auth认证类模块，负责验证用户身份&am…...
LLMs 系列实操科普（1）
写在前面： 本期内容我们继续 Andrej Karpathy 的《How I use LLMs》讲座内容，原视频时长 ~130 分钟，以实操演示主流的一些 LLMs 的使用，由于涉及到实操，实际上并不适合以文字整理，但还是决定尽量整理一份笔…...
省略号和可变参数模板
本文主要介绍如何展开可变参数的参数包 1.C语言的va_list展开可变参数 #include <iostream> #include <cstdarg>void printNumbers(int count, ...) {// 声明va_list类型的变量va_list args;// 使用va_start将可变参数写入变量argsva_start(args, count);for (in…...
第7篇：中间件全链路监控与 SQL 性能分析实践
7.1 章节导读 在构建数据库中间件的过程中，可观测性 和 性能分析 是保障系统稳定性与可维护性的核心能力。 特别是在复杂分布式场景中，必须做到： 🔍 追踪每一条 SQL 的生命周期（从入口到数据库执行）&#…...
系统掌握PyTorch：图解张量、Autograd、DataLoader、nn.Module与实战模型
本文较长，建议点赞收藏，以免遗失。更多AI大模型应用开发学习视频及资料，尽在聚客AI学院。 本文通过代码驱动的方式，系统讲解PyTorch核心概念和实战技巧，涵盖张量操作、自动微分、数据加载、模型构建和训练全流程&#…...
学习一下用鸿蒙DevEco Studio HarmonyOS5实现百度地图
在鸿蒙（HarmonyOS5）中集成百度地图，可以通过以下步骤和技术方案实现。结合鸿蒙的分布式能力和百度地图的API，可以构建跨设备的定位、导航和地图展示功能。 1. 鸿蒙环境准备 开发工具：下载安装 De…...
快速排序算法改进:随机快排-荷兰国旗划分详解
随机快速排序-荷兰国旗划分算法详解 一、基础知识回顾1.1 快速排序简介1.2 荷兰国旗问题 二、随机快排 - 荷兰国旗划分原理2.1 随机化枢轴选择2.2 荷兰国旗划分过程2.3 结合随机快排与荷兰国旗划分 三、代码实现3.1 Python实现3.2 Java实现3.3 C实现 四、性能分析4.1 时间复杂度…...
从零开始了解数据采集（二十八）——制造业数字孪生
近年来，我国的工业领域正经历一场前所未有的数字化变革，从“双碳目标”到工业互联网平台的推广，国家政策和市场需求共同推动了制造业的升级。在这场变革中，数字孪生技术成为备受关注的关键工具，它不仅让企业“看见”设…...