vue项目实现录音

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>

注意事项

1. 浏览器兼容性：不同浏览器对音频 API 的支持程度不同，建议添加 polyfill 或检测浏览器兼容性。

2. 权限处理：需要用户授权麦克风权限，建议添加友好的权限提示。

3. 音频格式：MediaRecorder 默认生成的文件格式可能因浏览器而异，可以转换为通用格式如 WAV 或 MP3。

4. 移动端适配：移动设备可能有额外的限制，需要测试不同设备的兼容性。

5. 错误处理：添加适当的错误处理逻辑，处理用户拒绝权限或设备不可用等情况。