当前位置：首页 > JavaScript

js实现语音输入

2026-03-01 10:12:44JavaScript

实现语音输入的基本方法

使用Web Speech API中的SpeechRecognition接口可以轻松实现语音输入功能。以下是一个完整的实现示例：

// 检查浏览器是否支持语音识别
if ('webkitSpeechRecognition' in window || 'SpeechRecognition' in window) {
  const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
  const recognition = new SpeechRecognition();

  // 设置识别参数
  recognition.continuous = false;  // 是否连续识别
  recognition.interimResults = false;  // 是否返回临时结果
  recognition.lang = 'zh-CN';  // 设置语言

  // 开始识别
  recognition.start();

  // 处理识别结果
  recognition.onresult = (event) => {
    const transcript = event.results[0][0].transcript;
    console.log('识别结果:', transcript);
  };

  // 处理错误
  recognition.onerror = (event) => {
    console.error('识别错误:', event.error);
  };
} else {
  console.error('当前浏览器不支持语音识别');
}

进阶功能实现

增加连续识别和实时反馈功能：

js实现语音输入

const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
recognition.continuous = true;
recognition.interimResults = true;

recognition.onresult = (event) => {
  let interimTranscript = '';
  let finalTranscript = '';

  for (let i = event.resultIndex; i < event.results.length; i++) {
    const transcript = event.results[i][0].transcript;
    if (event.results[i].isFinal) {
      finalTranscript += transcript;
    } else {
      interimTranscript += transcript;
    }
  }

  console.log('临时结果:', interimTranscript);
  console.log('最终结果:', finalTranscript);
};

兼容性处理方案

针对不同浏览器提供备用方案：

function startSpeechRecognition() {
  try {
    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
    if (!SpeechRecognition) throw new Error('API not supported');

    const recognition = new SpeechRecognition();
    // 配置和事件处理...
    recognition.start();
    return recognition;
  } catch (error) {
    console.warn('语音识别不可用:', error);
    // 可以在这里提供备用输入方式
    return null;
  }
}

语言和方言设置

支持多种语言识别：

js实现语音输入

const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();

// 支持的语言列表
const languages = {
  '中文(普通话)': 'zh-CN',
  '英文(美国)': 'en-US',
  '日语': 'ja-JP',
  '韩语': 'ko-KR'
};

// 设置语言
function setLanguage(langCode) {
  recognition.lang = langCode;
}

性能优化建议

减少资源消耗的实用技巧：

在不需要时停止识别：recognition.stop()
限制识别时长：设置超时自动停止
合理使用连续识别模式，避免不必要的资源占用
考虑使用Web Worker处理大量识别结果

用户界面集成示例

将语音输入与UI元素结合：

<button id="micButton">开始语音输入</button>
<div id="result"></div>

<script>
  const micButton = document.getElementById('micButton');
  const resultDiv = document.getElementById('result');

  micButton.addEventListener('click', () => {
    const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
    recognition.lang = 'zh-CN';

    recognition.onresult = (event) => {
      resultDiv.textContent = event.results[0][0].transcript;
    };

    recognition.start();
  });
</script>