当前位置：首页 > VUE

vue实现语音发送

2026-03-30 11:39:05VUE

实现语音发送功能

在Vue中实现语音发送功能需要结合浏览器提供的Web Speech API或第三方语音识别库。以下是基于Web Speech API的实现方法：

引入Web Speech API

浏览器原生支持语音识别功能，通过webkitSpeechRecognition或SpeechRecognition接口调用：

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

创建Vue组件

创建一个语音输入组件，包含录音按钮和结果显示：

<template>
  <div>
    <button @click="startRecording">{{ isRecording ? '停止录音' : '开始录音' }}</button>
    <p v-if="transcript">识别结果: {{ transcript }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isRecording: false,
      transcript: '',
      recognition: null
    };
  },
  methods: {
    startRecording() {
      if (this.isRecording) {
        this.recognition.stop();
        this.isRecording = false;
        return;
      }

      this.recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
      this.recognition.lang = 'zh-CN';
      this.recognition.interimResults = false;

      this.recognition.onresult = (event) => {
        const transcript = event.results[0][0].transcript;
        this.transcript = transcript;
        this.$emit('voice-input', transcript);
      };

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

      this.recognition.start();
      this.isRecording = true;
    }
  }
};
</script>

发送语音到服务器

将识别后的文本发送到服务器处理：

methods: {
  sendVoiceMessage() {
    if (!this.transcript) return;

    axios.post('/api/voice-messages', {
      text: this.transcript,
      timestamp: new Date().toISOString()
    }).then(response => {
      console.log('语音消息发送成功', response.data);
    }).catch(error => {
      console.error('发送失败', error);
    });
  }
}