【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…...
手把手教你用STM32F405和SD卡，在阿里云物联网平台上实现OTA升级（MQTT协议详解）
STM32F405实战：基于SD卡与阿里云物联网平台的OTA升级全流程解析 当嵌入式设备部署在野外或工业现场时，固件升级往往成为工程师的噩梦。传统方式需要技术人员携带烧录器奔赴现场，不仅效率低下，在设备数量庞大或分布广泛时更是不切实…...
Linux驱动——uart子系统驱动注册分析
韦东山驱动大全uart子系统笔记自整理——08_UART驱动情景分析_注册由于韦东山老师uart子系统的08注册情景分析的笔记很简略，所以在学完这节课后自己整理了一份详细笔记，包含TTY驱动框架，数据结构分析，以及注册过程分析，…...
FireRedASR-AED-L在软件测试中的应用：语音交互功能自动化测试
FireRedASR-AED-L在软件测试中的应用：语音交互功能自动化测试 你有没有想过，那些能听懂你说话的手机应用、智能音箱或者车载系统，它们的“听力”到底准不准？开发团队是怎么确保你每次说“播放音乐”或者“导航回家”，…...
STM32从入门到实战：两周速成指南
STM32快速入门指南：从零基础到项目实战1. 项目概述1.1 STM32与8051的对比分析对于已经掌握8051和C语言的开发者而言，STM32的学习曲线并不陡峭。关键在于理解何时需要从8051迁移到STM32平台：计算能力需求：当8051的主频无法满足复杂…...
从零到一实战：基于快马平台快速开发企业级jiyutrainer在线评测系统
今天想和大家分享一个很实用的开发经验——如何快速搭建一个企业级的在线编程评测系统。最近正好有个朋友想做一个类似jiyutrainer的编程练习平台，我就用InsCode(快马)平台试了试，效果出乎意料的好。 项目需求分析 首先明确我们需要实现的核心功能&#…...
京东云GPU服务器省钱攻略：如何根据业务需求灵活选择计费模式和虚拟化方案
京东云GPU服务器成本优化实战指南：精准匹配业务需求的选型策略 在AI与高性能计算领域，GPU服务器已成为企业技术基础设施的核心组件。然而，面对复杂的计费模式、多样的硬件配置以及差异化的虚拟化方案，许多技术决策者常常陷入"…...
数据库课程设计案例：基于深度感知的智能仓储管理系统
数据库课程设计案例：基于深度感知的智能仓储管理系统 每次路过大型物流仓库，看到那些高耸的货架和穿梭的叉车，我总会想，他们是怎么知道哪个货位是满的，哪个是空的？靠人工盘点？那得累死。靠传统…...
C#实战：基于WebAPI与Modbus构建EMS核心采集服务
1. 为什么需要EMS核心采集服务？ 在工业现场，我们经常会遇到几十台甚至上百台智能电表、传感器等设备需要监控。这些设备可能来自不同厂家，使用不同的通信协议，数据格式也各不相同。想象一下，如果每个设备都需要单独开发…...
OpenClaw负载测试：GLM-4.7-Flash并发处理能力评估
OpenClaw负载测试：GLM-4.7-Flash并发处理能力评估 1. 测试背景与目标 上周在尝试用OpenClaw自动化处理一批市场调研报告时，遇到了一个典型问题：当我同时提交20份PDF文件让AI助手提取关键数据时，系统开始出现响应延迟和部分任务超…...
【2026最新】AI产品经理学习路径全解析：顺序错了，努力全白费！
导语 为什么90%的人学不好AI产品经理？ 在2025年这个AI爆发的时代，AI产品经理已成为最炙手可热的职业之一。然而，许多“转行者”却在学习过程中频频踩坑： 学了3个月Python却连模型调参都不会？看懂了Prompt Engineeri…...