当前位置：首页 > VUE

vue怎么实现语音识别

2026-02-22 23:42:47VUE

Vue 实现语音识别的方法

Vue 可以通过浏览器提供的 Web Speech API 或第三方库实现语音识别功能。以下是几种常见的实现方式：

使用 Web Speech API

Web Speech API 是浏览器原生支持的语音识别接口，无需额外引入库。

// 在 Vue 组件中
methods: {
  startSpeechRecognition() {
    const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
    recognition.lang = 'zh-CN'; // 设置语言为中文
    recognition.interimResults = false; // 是否返回临时结果

    recognition.onresult = (event) => {
      const transcript = event.results[0][0].transcript;
      this.text = transcript; // 将识别结果赋值给 Vue 的 data
    };

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

    recognition.start();
  }
}

使用第三方库（如 vue-voice-recognition）

vue-voice-recognition 是一个封装了 Web Speech API 的 Vue 插件。

安装：

npm install vue-voice-recognition

使用：

import VueVoiceRecognition from 'vue-voice-recognition';
Vue.use(VueVoiceRecognition);

// 在组件中
this.$recognition.start({
  lang: 'zh-CN',
  onResult: (text) => {
    this.text = text;
  },
  onError: (error) => {
    console.error(error);
  }
});

使用云服务 API（如百度语音识别）

如果需要更强大的语音识别功能，可以调用云服务 API。

安装百度语音识别 SDK：

npm install baidu-aip-sdk

使用：

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

methods: {
  async recognizeAudio(audioFile) {
    const voice = await fs.readFileSync(audioFile);
    const voiceBuffer = new Buffer(voice);
    const result = await client.recognize(voiceBuffer, 'wav', 16000, { dev_pid: 1536 }); // 1536 为中文普通话
    this.text = result.result.join('');
  }
}