当前位置：首页 > VUE

vue项目实现录音

2026-03-29 19:29:04VUE

Vue 项目实现录音功能

使用 Web Audio API 和 MediaRecorder

在 Vue 项目中实现录音功能，可以通过 Web Audio API 和 MediaRecorder API 实现。以下是一个完整的实现方案：

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

<script>
export default {
  data() {
    return {
      isRecording: false,
      mediaRecorder: null,
      audioChunks: [],
      audioUrl: null
    }
  },
  methods: {
    async startRecording() {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
        this.mediaRecorder = new MediaRecorder(stream)
        this.mediaRecorder.ondataavailable = event => {
          this.audioChunks.push(event.data)
        }
        this.mediaRecorder.onstop = () => {
          const audioBlob = new Blob(this.audioChunks, { type: 'audio/wav' })
          this.audioUrl = URL.createObjectURL(audioBlob)
          this.audioChunks = []
          stream.getTracks().forEach(track => track.stop())
        }
        this.mediaRecorder.start()
        this.isRecording = true
      } catch (error) {
        console.error('录音权限获取失败:', error)
      }
    },
    stopRecording() {
      this.mediaRecorder.stop()
      this.isRecording = false
    }
  }
}
</script>

使用第三方库 recorder.js

对于更复杂的音频处理需求，可以使用 recorder.js 库：

安装依赖：

npm install recorder-js

实现代码：

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

<script>
import Recorder from 'recorder-js'

export default {
  data() {
    return {
      isRecording: false,
      recorder: null,
      audioUrl: null
    }
  },
  methods: {
    async startRecording() {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
        const audioContext = new (window.AudioContext || window.webkitAudioContext)()
        this.recorder = new Recorder(audioContext)
        this.recorder.init(stream)
        this.recorder.start()
        this.isRecording = true
      } catch (error) {
        console.error('录音初始化失败:', error)
      }
    },
    async stopRecording() {
      const { blob } = await this.recorder.stop()
      this.audioUrl = URL.createObjectURL(blob)
      this.isRecording = false
    }
  }
}
</script>