vue实现语音上传

实现语音上传功能

在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 })
})

注意事项

1. 浏览器兼容性：不同浏览器对Web Audio API的支持程度不同，建议在Chrome或Firefox上使用

2. 权限处理：首次使用需要用户授权麦克风权限，建议添加权限检测逻辑

   

3. 文件大小限制：长时间录音可能产生大文件，建议添加时长限制或压缩选项

4. 移动端适配：在移动设备上需要处理触摸事件和不同的用户交互方式

5. 错误处理：添加全面的错误处理逻辑，包括录音失败、上传失败等情况

通过以上步骤，可以在Vue应用中实现完整的语音录制和上传功能。根据实际需求，可以进一步扩展功能，如添加语音识别、实时传输等高级特性。