JavaScript语音识别与合成实现方法

本篇文章给大家分享《JavaScript实现语音识别与合成技术》，覆盖了文章的常见基础知识，其实一个语言的全部知识点一篇文章是不可能说完的，但希望通过这些问题，让读者对自己的掌握程度有一定的认识(B 数)，从而弥补自己的不足，更好的掌握它。

首先实现语音识别，通过webkitSpeechRecognition捕获用户语音并转文本，需设置语言、监听结果与错误事件；再实现语音合成，利用SpeechSynthesisUtterance将文本转语音，可配置语言、语速、音调等参数，并通过speak()播放。

语音识别与合成在现代Web应用中越来越常见，JavaScript结合Web API可以轻松实现这些功能。通过浏览器提供的SpeechRecognition和SpeechSynthesis接口，开发者能让网页“听懂”用户说话并“读出”文字内容。下面介绍如何使用这两个API完成语音识别与语音合成。

语音识别：让网页听懂你说的话

浏览器的 SpeechRecognition 接口（目前主要通过webkitSpeechRecognition支持）允许你捕获用户的语音输入并转换为文本。

• 检查浏览器是否支持语音识别
• 创建识别实例，设置参数如语言、是否连续识别
• 监听结果事件，获取识别到的文本

示例代码：

if ('webkitSpeechRecognition' in window) {
  const recognition = new webkitSpeechRecognition();
  recognition.lang = 'zh-CN'; // 设置中文
  recognition.continuous = false; // 单次识别
  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);
  };

  // 开始识别
  recognition.start();
} else {
  alert('当前浏览器不支持语音识别');
}

语音合成：让网页开口说话

SpeechSynthesis 是Web平台内置的语音合成接口，能将文本转为语音朗读出来，无需额外库。

• 使用speechSynthesis.getVoices()获取可用发音人
• 创建SpeechSynthesisUtterance实例，设置文本、音调、语速、音量等
• 调用speak()方法播放语音

示例代码：

function speak(text) {
  const utterance = new SpeechSynthesisUtterance(text);
  
  // 可选：设置语音参数
  utterance.lang = 'zh-CN';
  utterance.pitch = 1;   // 音调
  utterance.rate = 1.1;  // 语速
  utterance.volume = 1;  // 音量

  // 可选：选择特定发音人
  const voices = window.speechSynthesis.getVoices();
  const voice = voices.find(v => v.lang === 'zh-CN');
  if (voice) utterance.voice = voice;

  window.speechSynthesis.speak(utterance);
}

// 调用示例
speak('你好，这是语音合成的示例');

注意：getVoices()可能需要稍等加载，可添加延迟或监听voiceschanged事件。

实际应用场景建议

这类功能适合用于无障碍访问、语音助手、教育类应用或表单输入辅助。

• 语音识别建议添加启动按钮，避免自动唤醒带来的误操作
• 识别过程可显示“正在聆听”状态，提升用户体验
• 语音合成可配合按钮控制暂停、继续或停止
• 注意在移动端部分浏览器可能限制自动播放，需用户手势触发

好了，本文到此结束，带大家了解了《JavaScript语音识别与合成实现方法》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！