vue实现语音上传

Vue 实现语音上传功能

使用浏览器原生 API 录制语音

1. 获取用户麦克风权限
   通过 navigator.mediaDevices.getUserMedia 请求麦克风访问权限
   示例代码：

   const stream = await navigator.mediaDevices.getUserMedia({ audio: true })

2. 创建媒体录制器
   使用 MediaRecorder API 录制音频流
   示例代码：

   
   const mediaRecorder = new MediaRecorder(stream)
   let audioChunks = []

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

#### 前端处理录制数据

1. 开始/停止录制  
控制录制器的启动和停止  
示例代码：
```javascript
// 开始录制
mediaRecorder.start()

// 停止录制
mediaRecorder.stop()

1. 生成音频文件
   将录制的数据块转换为可上传的格式
   示例代码：

   mediaRecorder.onstop = () => {
   const audioBlob = new Blob(audioChunks, { type: 'audio/wav' })
   const audioFile = new File([audioBlob], 'recording.wav')
   }

文件上传实现

1. 创建上传表单
   使用 FormData 对象包装音频文件
   示例代码：

   const formData = new FormData()
   formData.append('audio', audioFile)

2. 发送到服务器
   通过 axios 或其他 HTTP 客户端上传
   示例代码：

   

   axios.post('/api/upload-audio', formData, {
   headers: {
    'Content-Type': 'multipart/form-data'
   }
   })

完整组件示例

<template>
  <div>
    <button @click="startRecording" :disabled="isRecording">开始录音</button>
    <button @click="stopRecording" :disabled="!isRecording">停止录音</button>
    <button @click="uploadAudio" :disabled="!audioFile">上传录音</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isRecording: false,
      mediaRecorder: null,
      audioFile: null
    }
  },
  methods: {
    async startRecording() {
      const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
      this.mediaRecorder = new MediaRecorder(stream)
      let audioChunks = []

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

      this.mediaRecorder.onstop = () => {
        const audioBlob = new Blob(audioChunks, { type: 'audio/wav' })
        this.audioFile = new File([audioBlob], 'recording.wav')
      }

      this.mediaRecorder.start()
      this.isRecording = true
    },
    stopRecording() {
      this.mediaRecorder.stop()
      this.isRecording = false
    },
    async uploadAudio() {
      const formData = new FormData()
      formData.append('audio', this.audioFile)

      try {
        await axios.post('/api/upload-audio', formData)
        alert('上传成功')
      } catch (error) {
        console.error('上传失败:', error)
      }
    }
  }
}
</script>

注意事项

1. 权限处理
   需要在 HTTPS 环境或 localhost 下才能获取麦克风权限
   可添加权限请求失败的处理逻辑

2. 文件格式
   WAV 格式兼容性较好，也可考虑 MP3 等压缩格式
   需根据服务器需求调整 MIME 类型

3. 用户体验
   添加录音时长显示
   提供录音播放预览功能
   显示上传进度