Web Speech API 可纯前端实现语音驱动 DOM 变更与原始文本合成：先检测并初始化 SpeechRecognition（Chrome 最稳，Safari 不支持）和 SpeechSynthesis；识别稳定后提取清洗后的 transcript，匹配预设指令更新 DOM；再根据指令语义获取目标 DOM 文本内容，用对应语言的 SpeechSynthesisUtterance 合成反馈；需用 cancel()、stop() 和 onend 协调识别与合成，防止冲突。
直接用 Web Speech API 实现“语音驱动 DOM 属性变更 + 原始文本合成”，核心在于把语音识别（听）和语音合成（说）两个模块串联起来，并在识别结果稳定后，触发 DOM 操作与二次合成反馈。整个流程不依赖服务器，纯前端完成。
一、先确保浏览器支持并初始化双模块
SpeechRecognition 和 SpeechSynthesis 都需显式检测，部分浏览器（如 Safari）对 SpeechRecognition 支持有限或需用户手势激活：
- 检查 speechSynthesis：始终可用（Chrome/Firefox/Edge/Safari 均已稳定支持）
- 检查 SpeechRecognition：Chrome 最稳定；Firefox 使用
webkitSpeechRecognition；Safari 目前不支持，需降级为按钮触发或禁用识别功能 - 推荐写法：不要直接 new SpeechRecognition()，而是用特性检测 + 动态加载回退逻辑
二、监听语音输入，提取原始文本并触发 DOM 更新
语音识别完成后，result 事件返回的 event.results[0][0].transcript 就是原始识别文本。可直接用于操作 DOM：
- 例如识别到 “把标题颜色改成红色”，可解析关键词后执行：
document.querySelector('h1').style.color = 'red' - 更健壮的做法是匹配预设指令集（如
['显示菜单', '放大字体', '朗读当前段落']），避免自由语句歧义 - 注意：识别结果可能含标点或多余空格，建议先
.trim().replace(/[^\w\s\u4e00-\u9fa5]/g, '')清洗（保留中文、英文、数字、空格）
三、用原始文本做语音合成反馈（非复述指令，而是内容本身）
关键点：不是合成识别出的指令句（如“把标题颜色改成红色”），而是合成它所指向的**目标 DOM 内容**——这才是“原始文本合成”的本意：
- 比如用户说“朗读第一段”，就取
document.querySelector('p').textContent，传给SpeechSynthesisUtterance - 若用户说“读标题”，就取
document.querySelector('h1').innerText，作为 utterance.text - 务必设置
utterance.lang匹配文本语言（如中文用'zh-CN'），否则发音生硬
四、同步控制与防冲突处理
语音识别中用户可能连续说话，而合成又在播放，容易堆叠或打断。需主动管理状态：
- 调用
speechSynthesis.cancel()在新合成前清空队列 - 用
recognition.stop()在合成开始时暂停识别，避免边说边听导致干扰 - 监听
utterance.onend回调，在合成结束后自动恢复识别（如需持续交互） - 避免在
onresult中直接调用speak()—— 应封装为独立函数，加防抖或状态锁
