【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…...
第19节 Node.js Express 框架
Express 是一个为Node.js设计的web开发框架，它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用，和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...
ESP32 I2S音频总线学习笔记（四）： INMP441采集音频并实时播放
简介 前面两期文章我们介绍了I2S的读取和写入，一个是通过INMP441麦克风模块采集音频，一个是通过PCM5102A模块播放音频，那如果我们将两者结合起来，将麦克风采集到的音频通过PCM5102A播放，是不是就可以做一个扩音器了呢…...
【决胜公务员考试】求职OMG——见面课测验1
2025最新版！！！6.8截至答题，大家注意呀！ 博主码字不易点个关注吧,祝期末顺利~~ 1.单选题(2分) 下列说法错误的是:（ B ） A.选调生属于公务员系统 B.公务员属于事业编 C.选调生有基层锻炼的要求 D…...
大语言模型（LLM）中的KV缓存压缩与动态稀疏注意力机制设计
随着大语言模型（LLM）参数规模的增长，推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长，而KV缓存的内存消耗可能高达数十GB（例如Llama2-7B处理100K token时需50GB内存&a…...
2025季度云服务器排行榜
在全球云服务器市场，各厂商的排名和地位并非一成不变，而是由其独特的优势、战略布局和市场适应性共同决定的。以下是根据2025年市场趋势，对主要云服务器厂商在排行榜中占据重要位置的原因和优势进行深度分析： 一、全球“三巨头”…...
用机器学习破解新能源领域的“弃风”难题
音乐发烧友深有体会，玩音乐的本质就是玩电网。火电声音偏暖，水电偏冷，风电偏空旷。至于太阳能发的电，则略显朦胧和单薄。 不知你是否有感觉，近两年家里的音响声音越来越冷，听起来越来越单薄？ —…...
免费PDF转图片工具
免费PDF转图片工具 一款简单易用的PDF转图片工具，可以将PDF文件快速转换为高质量PNG图片。无需安装复杂的软件，也不需要在线上传文件，保护您的隐私。 工具截图 主要特点 🚀 快速转换：本地转换，无需等待上…...
Kafka入门-生产者
生产者 生产者发送流程： 延迟时间为0ms时，也就意味着每当有数据就会直接发送 异步发送API 异步发送和同步发送的不同在于：异步发送不需要等待结果，同步发送必须等待结果才能进行下一步发送。 普通异步发送 首先导入所需的k…...
C++课设：简易日历程序（支持传统节假日 + 二十四节气 + 个人纪念日管理）
名人说：路漫漫其修远兮，吾将上下而求索。—— 屈原《离骚》 创作者：Code_流苏(CSDN)（一个喜欢古诗词和编程的Coder😊） 专栏介绍：《编程项目实战》 目录 一、为什么要开发一个日历程序？1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...
Web中间件--tomcat学习
Web中间件–tomcat Java虚拟机详解 什么是JAVA虚拟机 Java虚拟机是一个抽象的计算机，它可以执行Java字节码。Java虚拟机是Java平台的一部分，Java平台由Java语言、Java API和Java虚拟机组成。Java虚拟机的主要作用是将Java字节码转换为机器代码&#x…...