vue实现语音对话

Vue 实现语音对话功能

核心依赖

1. Web Speech API
   浏览器原生支持的语音识别与合成接口，无需额外安装库。

   • SpeechRecognition：语音转文字（需注意兼容性，Chrome 支持较好）。
   • SpeechSynthesis：文字转语音。

2. 第三方库（可选）

   • annyang：简化语音识别流程的轻量库。
   • vue-speech：Vue 封装的语音插件。

基础实现步骤

语音识别（用户说话 → 文字）

// 在 Vue 组件中
export default {
  data() {
    return {
      recognition: null,
      transcript: ''
    }
  },
  mounted() {
    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
    this.recognition = new SpeechRecognition();
    this.recognition.lang = 'zh-CN'; // 设置语言
    this.recognition.interimResults = true; // 实时返回结果

    this.recognition.onresult = (event) => {
      const result = event.results[event.results.length - 1];
      this.transcript = result[0].transcript;
    };
  },
  methods: {
    startListening() {
      this.recognition.start();
    },
    stopListening() {
      this.recognition.stop();
    }
  }
}

语音合成（文字 → 机器发音）

methods: {
  speak(text) {
    const utterance = new SpeechSynthesisUtterance(text);
    utterance.lang = 'zh-CN'; // 设置语言
    window.speechSynthesis.speak(utterance);
  }
}

优化与兼容性处理

1. 兼容性兜底
   检测浏览器是否支持 API，否则提示用户：

   if (!('webkitSpeechRecognition' in window)) {
     alert('当前浏览器不支持语音功能，请使用 Chrome 或 Edge。');
   }

2. 错误监听

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

3. 权限请求
   首次调用 recognition.start() 时会自动触发麦克风权限弹窗。

完整示例代码

<template>
  <div>
    <button @click="startListening">开始说话</button>
    <button @click="stopListening">停止</button>
    <button @click="speak('你好，我是语音助手')">播放语音</button>
    <p>识别结果: {{ transcript }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      recognition: null,
      transcript: ''
    };
  },
  mounted() {
    if ('webkitSpeechRecognition' in window) {
      const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
      this.recognition = new SpeechRecognition();
      this.recognition.lang = 'zh-CN';
      this.recognition.interimResults = true;

      this.recognition.onresult = (event) => {
        const result = event.results[event.results.length - 1];
        this.transcript = result[0].transcript;
      };

      this.recognition.onerror = (event) => {
        console.error('Error:', event.error);
      };
    }
  },
  methods: {
    startListening() {
      if (this.recognition) this.recognition.start();
    },
    stopListening() {
      if (this.recognition) this.recognition.stop();
    },
    speak(text) {
      const utterance = new SpeechSynthesisUtterance(text);
      utterance.lang = 'zh-CN';
      window.speechSynthesis.speak(utterance);
    }
  }
};
</script>

注意事项

1. HTTPS 环境
   Web Speech API 在部分浏览器中要求部署在 HTTPS 下才能使用。

2. 用户交互触发
   浏览器通常要求语音识别必须由用户操作（如点击按钮）直接触发，不能自动运行。

3. 多语言支持
   修改 lang 参数可切换语言（如 en-US、ja-JP）。