JavaScript_语音识别与合成技术

JavaScript通过Web Speech API实现语音识别与合成，提升网页交互性。①使用SpeechRecognition接口将语音转文字，适用于搜索、表单输入等场景，需注意浏览器兼容性及HTTPS要求；②利用SpeechSynthesis与SpeechSynthesisUtterance实现文本朗读，可用于无障碍访问或提醒功能；③建议结合UI反馈优化体验，适用于教育、辅助工具等应用。

现在很多网站和应用都开始支持语音交互，JavaScript 在这方面提供了不少原生能力。通过 Web Speech API，开发者可以直接在浏览器中实现语音识别和语音合成，让用户用说话来操作页面，或者让网页“开口说话”。下面介绍这两个功能的基本用法和实际应用场景。

语音识别：SpeechRecognition

语音识别可以把用户的语音转换成文字，适用于搜索、表单输入、语音控制等场景。Web Speech API 提供了 SpeechRecognition 接口（注意：目前主要在 Chrome 浏览器中支持，其他浏览器可能需要使用前缀）。

基本使用步骤：

• 创建一个 SpeechRecognition 实例
• 设置识别语言、是否连续识别等参数
• 监听结果事件，获取识别出的文本
• 启动识别

const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
recognition.lang = 'zh-CN'; // 设置中文
recognition.interimResults = false; // 是否返回中间结果

recognition.onresult = function(event) {
  const transcript = event.results[0][0].transcript;
  console.log('识别结果：', transcript);
  document.getElementById('output').textContent = transcript;
};

recognition.onerror = function(event) {
  console.error('识别出错：', event.error);
};

// 开始识别
document.getElementById('startBtn').onclick = () => {
  recognition.start();
};

用户点击按钮后，浏览器会请求麦克风权限，说话内容会被转为文字并显示出来。

立即学习“Java免费学习笔记（深入）”；

语音合成：SpeechSynthesis

语音合成可以让网页朗读文字，适合无障碍访问、提醒功能或教育类应用。使用 window.speechSynthesis 和 SpeechSynthesisUtterance 即可实现。

Media.io AI Image Upscaler

Media.io推出的AI图片放大工具

62

查看详情

基本流程：

• 创建一个 SpeechSynthesisUtterance 对象，传入要朗读的文本
• 可设置语速、音调、音量和发音语言
• 调用 speechSynthesis.speak() 播放声音

const utterance = new SpeechSynthesisUtterance('你好，这是语音合成示例');
utterance.lang = 'zh-CN';
utterance.rate = 1;   // 语速
utterance.pitch = 1;  // 音调
utterance.volume = 1; // 音量

speechSynthesis.speak(utterance);

你还可以列出系统支持的发音人：

setTimeout(() => {
  const voices = speechSynthesis.getVoices();
  voices.forEach(v => console.log(v.name, v.lang));
}, 500);

实用建议与注意事项

虽然 Web Speech API 功能强大，但使用时需要注意以下几点：

• 语音识别需要 HTTPS 环境，在本地开发时 localhost 可以例外
• 部分浏览器不支持或需开启实验性功能（如 Chrome 的 flag）
• 移动设备上的兼容性较差，尤其是 iOS Safari 支持有限
• 语音识别是异步过程，网络延迟可能影响体验
• 长时间识别可能导致自动停止，需重新启动

可以结合 UI 给用户明确反馈，比如录音动画、波形图、识别状态提示等，提升交互体验。

以上就是JavaScript_语音识别与合成技术的详细内容，更多请关注php中文网其它相关文章！