当前位置：首页 > VUE

vue实现语音上传

2026-01-17 10:53:24VUE

实现语音上传功能

在Vue中实现语音上传功能需要结合浏览器的Web Audio API和文件上传逻辑。以下是一个完整的实现方案：

录音功能实现

安装依赖库recorder-core和wav编码器：

npm install recorder-core

创建录音组件：

import Recorder from 'recorder-core'
import 'recorder-core/src/engine/wav'
import 'recorder-core/src/extensions/waveview'

export default {
  data() {
    return {
      recorder: null,
      recording: false,
      audioBlob: null,
      waveView: null
    }
  },
  methods: {
    async startRecording() {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
        this.recorder = new Recorder({
          type: 'wav',
          sampleRate: 16000,
          bitRate: 16
        })
        this.recorder.open(() => {
          this.recorder.start()
          this.recording = true

          // 可视化波形
          this.waveView = Recorder.WaveView({ elem: '#wave' })
          this.recorder.onProcess = (buffers) => {
            this.waveView.input(buffers[buffers.length-1])
          }
        }, stream)
      } catch (error) {
        console.error('录音权限被拒绝:', error)
      }
    },

    stopRecording() {
      if (this.recorder && this.recording) {
        this.recorder.stop((blob, duration) => {
          this.audioBlob = blob
          this.recording = false
          this.recorder.close()
        }, console.error)
      }
    }
  }
}

上传功能实现

创建上传方法：

methods: {
  async uploadAudio() {
    if (!this.audioBlob) return

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

    try {
      const response = await axios.post('/api/upload-audio', formData, {
        headers: {
          'Content-Type': 'multipart/form-data'
        }
      })
      console.log('上传成功:', response.data)
    } catch (error) {
      console.error('上传失败:', error)
    }
  }
}

组件模板

<template>
  <div>
    <div id="wave" style="height:100px;background:#f0f0f0"></div>

    <button 
      @click="startRecording" 
      :disabled="recording">
      开始录音
    </button>

    <button 
      @click="stopRecording" 
      :disabled="!recording">
      停止录音
    </button>

    <button 
      @click="uploadAudio" 
      :disabled="!audioBlob">
      上传录音
    </button>

    <audio v-if="audioBlob" controls :src="URL.createObjectURL(audioBlob)"></audio>
  </div>
</template>

服务器端处理

Node.js示例（使用Express）：

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

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