Web Speech API包含语音合成与识别两大功能：SpeechSynthesis支持全浏览器TTS，可配置语言、语速等；SpeechRecognition仅Chromium系支持，需用户授权且限HTTPS环境。

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

一、文本转语音（SpeechSynthesis）

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

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

二、语音识别（SpeechRecognition）

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

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• 检测兼容性：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），提升调试效率