当前位置：首页 > VUE

vue实现语音发送

2026-03-09 23:49:00VUE

实现语音发送功能

在Vue中实现语音发送功能需要结合浏览器提供的Web API和第三方库。以下是具体实现方法：

使用Web Speech API录制音频

Web Speech API是浏览器原生提供的语音识别和合成接口，可用于录制用户语音：

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

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

  stopRecording() {
    this.mediaRecorder.stop()
    this.isRecording = false

    this.mediaRecorder.onstop = () => {
      const audioBlob = new Blob(this.audioChunks)
      this.sendAudio(audioBlob)
      this.audioChunks = []
    }
  },

  sendAudio(blob) {
    const formData = new FormData()
    formData.append('audio', blob, 'recording.webm')

    // 发送到服务器
    axios.post('/api/upload-audio', formData)
      .then(response => {
        console.log('语音发送成功', response)
      })
  }
}

使用第三方库增强功能

对于更复杂的语音处理，可以使用以下库：

RecordRTC：提供更强大的录制功能
```
import RecordRTC from 'recordrtc'
```

methods: { startRecording() { navigator.mediaDevices.getUserMedia({ audio: true }) .then(stream => { this.recorder = RecordRTC(stream, { type: 'audio' }) this.recorder.startRecording() this.isRecording = true }) },

stopRecording() { this.recorder.stopRecording(() => { this.recorder.getDataURL(dataURL => { this.sendAudio(dataURL) }) }) } }


2. WaveSurfer.js：添加音频波形可视化
```javascript
import WaveSurfer from 'wavesurfer.js'

mounted() {
  this.wavesurfer = WaveSurfer.create({
    container: '#waveform',
    waveColor: 'violet',
    progressColor: 'purple'
  })
}

methods: {
  playRecording() {
    this.wavesurfer.loadBlob(this.audioBlob)
  }
}

服务器端处理

接收语音的服务器端示例(Node.js)：

const multer = require('multer')
const upload = multer({ dest: 'uploads/' })

app.post('/api/upload-audio', upload.single('audio'), (req, res) => {
  console.log('收到语音文件:', req.file)
  // 处理音频文件...
  res.send({ status: 'success' })
})

用户界面组件

Vue模板示例：

vue实现语音发送

<template>
  <div>
    <button 
      @mousedown="startRecording" 
      @mouseup="stopRecording"
      :disabled="isRecording"
    >
      按住说话
    </button>

    <div v-if="isRecording" class="recording-indicator">
      正在录音...
    </div>

    <div id="waveform"></div>

    <button @click="playRecording" v-if="audioBlob">
      播放录音
    </button>
  </div>
</template>