当前位置：首页 > VUE

vue实现发送语音消息

2026-01-22 15:55:41VUE

实现语音消息的基本流程

在Vue中实现语音消息功能通常涉及录音、音频处理和发送三个核心环节。需要使用浏览器提供的Web Audio API和MediaRecorder API，结合前端框架的特性完成开发。

录音功能实现

通过navigator.mediaDevices.getUserMedia获取麦克风权限，创建MediaRecorder实例：

// 在Vue组件methods中
startRecording() {
  navigator.mediaDevices.getUserMedia({ audio: true })
    .then(stream => {
      this.mediaRecorder = new MediaRecorder(stream)
      this.audioChunks = []

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

      this.mediaRecorder.start()
    })
}

停止录音并处理音频

录音结束后将音频数据转换为可发送格式：

stopRecording() {
  return new Promise(resolve => {
    this.mediaRecorder.onstop = () => {
      const audioBlob = new Blob(this.audioChunks, { type: 'audio/wav' })
      const audioUrl = URL.createObjectURL(audioBlob)
      resolve({ blob: audioBlob, url: audioUrl })
    }
    this.mediaRecorder.stop()
    this.mediaRecorder.stream.getTracks().forEach(track => track.stop())
  })
}

音频可视化显示

使用<audio>元素播放录音，添加波形可视化：

<template>
  <audio :src="audioUrl" controls></audio>
  <canvas ref="waveform" width="300" height="100"></canvas>
</template>

发送音频到服务器

通过FormData上传音频文件：

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

  axios.post('/api/upload-audio', formData, {
    headers: { 'Content-Type': 'multipart/form-data' }
  }).then(response => {
    console.log('Upload success', response)
  })
}

权限处理与兼容性

添加权限请求失败处理：

vue实现发送语音消息

startRecording() {
  navigator.mediaDevices.getUserMedia({ audio: true })
    .catch(err => {
      console.error('Microphone access denied:', err)
      this.$emit('error', 'MICROPHONE_ACCESS_DENIED')
    })
    .then(stream => {
      // ...录音逻辑
    })
}

完整组件示例

<template>
  <div>
    <button @click="toggleRecording">
      {{ isRecording ? 'Stop' : 'Record' }}
    </button>
    <audio v-if="audioUrl" :src="audioUrl" controls></audio>
    <button v-if="audioUrl" @click="sendAudio">Send</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isRecording: false,
      mediaRecorder: null,
      audioChunks: [],
      audioBlob: null,
      audioUrl: ''
    }
  },
  methods: {
    toggleRecording() {
      if (this.isRecording) {
        this.stopRecording().then(({ blob, url }) => {
          this.audioBlob = blob
          this.audioUrl = url
        })
      } else {
        this.startRecording()
      }
      this.isRecording = !this.isRecording
    },
    // 其他方法同上
  }
}
</script>