当前位置：首页 > JavaScript

js实现声控

2026-02-01 15:37:40JavaScript

使用 Web Speech API 实现声控

Web Speech API 是浏览器原生支持的语音识别和合成接口，无需额外库即可实现声控功能。以下是一个基础实现示例：

// 创建语音识别对象
const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
recognition.lang = 'zh-CN'; // 设置语言为中文

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

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

  // 执行声控指令
  if (transcript.includes('打开')) {
    document.getElementById('targetElement').style.display = 'block';
  }
};

// 错误处理
recognition.onerror = (event) => {
  console.error('识别错误:', event.error);
};

增强功能实现

为提高识别准确性和交互体验，可添加以下优化：

js实现声控

// 连续识别模式
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;
    }
  }

  document.getElementById('feedback').innerText = interimTranscript;
};

语音合成反馈

实现系统语音反馈增强交互：

function speak(text) {
  const utterance = new SpeechSynthesisUtterance(text);
  utterance.lang = 'zh-CN';
  speechSynthesis.speak(utterance);
}

// 在指令执行后调用
speak('指令已执行');

兼容性处理

检测浏览器支持情况并提供备用方案：

js实现声控

if (!('webkitSpeechRecognition' in window) && !('SpeechRecognition' in window)) {
  alert('您的浏览器不支持语音识别API');
} else {
  // 正常初始化代码
}

权限管理

现代浏览器要求用户明确授权麦克风权限：

navigator.permissions.query({ name: 'microphone' }).then(permissionStatus => {
  permissionStatus.onchange = () => {
    if (permissionStatus.state === 'granted') {
      recognition.start();
    }
  };
});

实际应用示例

结合具体场景的完整实现：

const voiceCommands = {
  '刷新页面': () => location.reload(),
  '返回首页': () => window.location.href = '/',
  '搜索': (query) => {
    const searchQuery = query.replace('搜索', '').trim();
    window.open(`https://www.baidu.com/s?wd=${encodeURIComponent(searchQuery)}`);
  }
};

recognition.onresult = (event) => {
  const transcript = event.results[0][0].transcript.trim();

  for (const [command, action] of Object.entries(voiceCommands)) {
    if (transcript.startsWith(command)) {
      action(transcript);
      break;
    }
  }
};

标签: js