vue实现语音唤醒

Vue 实现语音唤醒功能

准备工作

确保项目已集成 Web Speech API 或第三方语音识别库（如百度语音、阿里云语音等）。浏览器需支持 webkitSpeechRecognition（Chrome 推荐）。

核心代码实现

1. 初始化语音识别对象
   在 Vue 组件中创建语音识别实例：

   const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
   recognition.lang = 'zh-CN'; // 设置语言
   recognition.interimResults = false; // 是否返回临时结果
   recognition.continuous = true; // 持续监听

2. 绑定事件监听
   添加开始监听和结果处理逻辑：

   recognition.onstart = () => {
     console.log('语音唤醒已启动');
   };
   recognition.onresult = (event) => {
     const transcript = event.results[event.results.length - 1][0].transcript;
     if (transcript.includes('唤醒词')) { // 自定义唤醒词
       this.$emit('wake-up'); // 触发唤醒事件
     }
   };

3. 控制语音识别启停
   通过方法控制开始/停止：

   

   methods: {
     startListening() {
       recognition.start();
     },
     stopListening() {
       recognition.stop();
     }
   }

优化与兼容性

• 降级方案：检测浏览器兼容性，若不支持则提示用户：

  if (!('webkitSpeechRecognition' in window)) {
    alert('当前浏览器不支持语音功能');
  }

• 性能优化：通过 debounce 控制高频词识别频率，避免重复触发。

第三方库集成示例（以百度语音为例）

1. 安装 SDK：

   npm install baidu-aip-sdk

2. 调用语音识别服务：

   const AipSpeech = require('baidu-aip-sdk').speech;
   const client = new AipSpeech(APP_ID, API_KEY, SECRET_KEY);

注意事项

• 用户需授权麦克风权限。
• 唤醒词需根据实际场景调整，支持多语言配置。
• 移动端可能存在兼容性问题，建议真机测试。