当前位置：首页 > VUE

vue实现录音

2026-03-07 14:14:09VUE

Vue 实现录音功能

在Vue中实现录音功能通常需要借助浏览器提供的Web Audio API和MediaRecorder API。以下是实现步骤：

vue实现录音

安装依赖

需要安装recordrtc库来处理录音：

vue实现录音

npm install recordrtc

基本实现代码

<template>
  <div>
    <button @click="startRecording">开始录音</button>
    <button @click="stopRecording" :disabled="!isRecording">停止录音</button>
    <audio v-if="audioUrl" :src="audioUrl" controls></audio>
  </div>
</template>

<script>
import RecordRTC from 'recordrtc'

export default {
  data() {
    return {
      isRecording: false,
      recorder: null,
      audioUrl: null
    }
  },
  methods: {
    async startRecording() {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
        this.recorder = new RecordRTC(stream, {
          type: 'audio',
          mimeType: 'audio/wav'
        })
        this.recorder.startRecording()
        this.isRecording = true
      } catch (error) {
        console.error('录音权限被拒绝:', error)
      }
    },

    stopRecording() {
      this.recorder.stopRecording(() => {
        const blob = this.recorder.getBlob()
        this.audioUrl = URL.createObjectURL(blob)
        this.isRecording = false

        // 可以在这里处理blob，如上传到服务器
        // this.uploadAudio(blob)
      })
    },

    uploadAudio(blob) {
      const formData = new FormData()
      formData.append('audio', blob, 'recording.wav')
      // 使用axios或其他HTTP库上传
    }
  }
}
</script>

使用原生MediaRecorder API实现

如果不使用第三方库，可以使用原生API：

<script>
export default {
  methods: {
    async startRecording() {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
        this.mediaRecorder = new MediaRecorder(stream)
        this.chunks = []

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

        this.mediaRecorder.onstop = () => {
          const blob = new Blob(this.chunks, { type: 'audio/wav' })
          this.audioUrl = URL.createObjectURL(blob)
        }

        this.mediaRecorder.start()
        this.isRecording = true
      } catch (error) {
        console.error('录音错误:', error)
      }
    },

    stopRecording() {
      this.mediaRecorder.stop()
      this.isRecording = false
    }
  }
}
</script>