Web Speech API 语音识别与合成

Web Speech API：SpeechRecognition语音识别（lang中文/continuous连续/interimResults中间结果）、SpeechSynthesis语音合成（Voice选择/rate/pitch）、语音助手雏形 · 难度：入门 · +10XP

Web Speech API —— 让网页会听会说

Web Speech API包含两部分：SpeechRecognition（语音识别，把说的话转成文字）和SpeechSynthesis（语音合成，把文字读出来）。不需要任何第三方库。

语音识别

const recognition = new webkitSpeechRecognition();
recognition.lang = 'zh-CN';
recognition.continuous = true;
recognition.onresult = (event) => {
  const text = event.results[event.results.length-1][0].transcript;
  console.log('你说的是：', text);
};
recognition.start();

语音合成（TTS）

const utterance = new SpeechSynthesisUtterance('你好，欢迎学习JavaScript！');
utterance.lang = 'zh-CN';
utterance.rate = 1.0; // 语速
utterance.pitch = 1.0; // 音高
speechSynthesis.speak(utterance);

动手练习

1. 基础练习：做一个"朗读"按钮——点击后把文本框中的中文读出来。
2. 进阶应用：做一个语音搜索框——用户说话后自动填入搜索关键词。
3. 项目实战：做一个中英双语的语音助手雏形——用语音输入，解析后执行简单命令（如"打开百度"）。