当前位置：首页 > VUE

vue实现语音发送

2026-01-17 18:09:13VUE

实现语音发送功能

在Vue中实现语音发送功能需要结合浏览器提供的Web Speech API和音频处理技术。以下是具体实现方法：

获取用户麦克风权限

使用navigator.mediaDevices.getUserMediaAPI请求麦克风访问权限：

async function startRecording() {
  try {
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
    // 处理音频流
  } catch (error) {
    console.error('麦克风访问被拒绝:', error)
  }
}

录制音频数据

使用MediaRecorder API录制音频：

let mediaRecorder
let audioChunks = []

function startRecording(stream) {
  mediaRecorder = new MediaRecorder(stream)
  mediaRecorder.start()

  mediaRecorder.ondataavailable = event => {
    audioChunks.push(event.data)
  }

  mediaRecorder.onstop = () => {
    const audioBlob = new Blob(audioChunks, { type: 'audio/wav' })
    // 处理录制完成的音频
  }
}

实现语音识别（可选）

如果需要语音转文字功能，可以使用Web Speech API的SpeechRecognition：

const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)()
recognition.lang = 'zh-CN' // 设置中文识别

recognition.onresult = event => {
  const transcript = event.results[0][0].transcript
  // 处理识别结果
}

recognition.start()

发送音频到服务器

将录制的音频发送到后端服务器：

function sendAudioToServer(audioBlob) {
  const formData = new FormData()
  formData.append('audio', audioBlob, 'recording.wav')

  fetch('/api/upload-audio', {
    method: 'POST',
    body: formData
  })
  .then(response => response.json())
  .then(data => {
    // 处理服务器响应
  })
}

Vue组件实现示例

完整Vue组件示例：

<template>
  <div>
    <button @click="toggleRecording">
      {{ isRecording ? '停止录音' : '开始录音' }}
    </button>
    <div v-if="audioUrl">
      <audio controls :src="audioUrl"></audio>
      <button @click="sendAudio">发送</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isRecording: false,
      mediaRecorder: null,
      audioChunks: [],
      audioUrl: ''
    }
  },
  methods: {
    async toggleRecording() {
      if (this.isRecording) {
        this.stopRecording()
      } else {
        await this.startRecording()
      }
      this.isRecording = !this.isRecording
    },
    async startRecording() {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
        this.mediaRecorder = new MediaRecorder(stream)
        this.audioChunks = []

        this.mediaRecorder.ondataavailable = event => {
          this.audioChunks.push(event.data)
        }

        this.mediaRecorder.start()
      } catch (error) {
        console.error('录音错误:', error)
      }
    },
    stopRecording() {
      this.mediaRecorder.stop()
      this.mediaRecorder.stream.getTracks().forEach(track => track.stop())

      const audioBlob = new Blob(this.audioChunks, { type: 'audio/wav' })
      this.audioUrl = URL.createObjectURL(audioBlob)
    },
    sendAudio() {
      const audioBlob = new Blob(this.audioChunks, { type: 'audio/wav' })
      // 调用发送方法
      this.$emit('audio-sent', audioBlob)
    }
  }
}
</script>