如何在HTML5中通过WebSpeechAPI实现文本转语音播报及语音识别功能-H5教程-PHP中文网

web speech api包含语音合成与识别两大功能：speechsynthesis支持全浏览器tts，可配置语言、语速等；speechrecognition仅chromium系支持，需用户授权且限https环境。

如何在html5中通过webspeechapi实现文本转语音播报及语音识别功能

Web Speech API 提供了两个核心功能：语音合成（Text-to-Speech，TTS）和语音识别（Speech Recognition），分别由 SpeechSynthesis 和 SpeechRecognition（或 webkitSpeechRecognition）接口实现。目前语音合成在所有主流浏览器中支持良好，而语音识别仅在 Chrome、Edge（基于 Chromium）等 Blink 内核浏览器中稳定可用，Firefox 和 Safari 尚未原生支持。

一、文本转语音（SpeechSynthesis）

使用 window.speechSynthesis 可将文字朗读出来，支持选择语言、音量、语速、音调等参数。

anything-to-html

将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。

下载

先检查浏览器是否支持：if ('speechSynthesis' in window)
获取可用语音列表（含语言标识如 zh-CN、en-US）：speechSynthesis.getVoices()；注意需监听 voiceschanged 事件，因初始时列表可能为空
创建并配置 SpeechSynthesisUtterance 实例：
<script><br> const utterance = new SpeechSynthesisUtterance('你好，欢迎使用语音播报');<br> utterance.lang = 'zh-CN';<br> utterance.rate = 0.9; // 语速（0.1–10，默认1）<br> utterance.pitch = 1; // 音调（0–2，默认1）<br> utterance.volume = 1; // 音量（0–1，默认1）<br> speechSynthesis.speak(utterance);<br> </script>
可监听 onstart、onend、onerror 等事件做状态反馈
暂停、恢复、取消：用 speechSynthesis.pause()、resume()、cancel()

二、语音识别（SpeechRecognition）

该功能允许用户说话，浏览器将其转为文字。当前仅 Chromium 系浏览器支持，需使用前缀接口 webkitSpeechRecognition。

检测兼容性：const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
初始化识别器：const recognition = new SpeechRecognition();
关键配置项：
recognition.lang = 'zh-CN';
recognition.continuous = false;（单次识别）或 true（持续识别）
recognition.interimResults = true;（是否返回中间结果）
recognition.maxAlternatives = 1;
绑定事件：
onresult：识别成功后触发，结果在 event.results 中，每项是 SpeechRecognitionResult，其中 item(0).transcript 是文本
onstart / onend / onerror：用于控制 UI 状态（如按钮变色、提示信息）
启动识别：recognition.start();；需用户主动触发（如点击按钮），不能自动调用（出于隐私限制）
停止识别：recognition.stop(); 或 recognition.abort();（立即终止，不触发 onend）

三、实用注意事项

语音识别必须在 HTTPS 或 localhost 下运行，HTTP 站点会被浏览器拒绝访问麦克风
首次使用会弹出麦克风权限请求，需用户手动授权；若被拒绝，后续调用 start() 会触发 onerror 并报错 not-allowed
中文识别效果依赖系统语音模型，Chrome 中 zh-CN 支持较好，但对口音、语速、背景噪音较敏感
避免频繁 start/stop，建议加防抖或状态锁防止重复调用
移动端需注意：部分 Android Chrome 版本存在识别后无回调的问题，建议降级 fallback 或提示用户更新浏览器

四、简单整合示例（带基础 UI）

一个「点击说话 → 输入框显示识别结果 → 点击播报」的双向 demo：

HTML：<button id="startBtn">开始听写</button><textarea id="output"></textarea><button id="speakBtn">朗读内容</button>
JS 中分别绑定两个功能，注意识别结束自动填充 textarea，点击 speakBtn 时取其值调用 speechSynthesis.speak()
添加加载语音列表逻辑（speechSynthesis.onvoiceschanged），优先选中文语音
识别出错时在 textarea 显示错误码（如 no-speech、aborted），提升调试效率