当前位置：首页 > VUE

vue 实现录音功能

2026-03-30 03:38:32VUE

实现录音功能的基本步骤

在Vue中实现录音功能通常涉及浏览器提供的MediaRecorder API。以下是一个完整的实现方案。

安装依赖

需要安装recordrtc库简化录音处理：

npm install recordrtc

核心代码实现

创建AudioRecorder.vue组件：

<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
        this.recorder.stream.stop()
      })
    }
  }
}
</script>

功能扩展建议

录音时长限制：

// 在startRecording方法中添加
setTimeout(() => {
if (this.isRecording) {
 this.stopRecording()
}
}, 60000) // 60秒自动停止

保存录音文件：

methods: {
saveRecording() {
 const blob = this.recorder.getBlob()
 const file = new File([blob], 'recording.wav', { type: 'audio/wav' })
 // 上传逻辑...
}
}

录音可视化：

vue 实现录音功能

// 添加音频分析器
const audioContext = new AudioContext()
const analyser = audioContext.createAnalyser()
const source = audioContext.createMediaStreamSource(stream)
source.connect(analyser)

注意事项

需要在HTTPS环境或localhost下使用录音功能
iOS设备需要特殊处理，确保在用户交互事件中触发录音
不同浏览器支持的音频格式可能不同，建议测试兼容性

错误处理

async startRecording() {
  try {
    // ...原有代码
  } catch (error) {
    if (error.name === 'NotAllowedError') {
      alert('请允许麦克风权限')
    } else {
      alert('录音初始化失败')
    }
  }
}

以上实现提供了完整的录音功能基础，可根据实际需求进一步扩展和完善。