当前位置：首页 > VUE

vue如何实现录音功能

2026-02-25 07:07:27VUE

使用浏览器原生API实现录音

Vue中可以通过浏览器的MediaRecorder API实现录音功能。需要先获取用户麦克风权限，然后创建录音实例并处理音频数据。

// 在Vue组件中
methods: {
  async startRecording() {
    try {
      this.stream = await navigator.mediaDevices.getUserMedia({ audio: true })
      this.mediaRecorder = new MediaRecorder(this.stream)
      this.chunks = []

      this.mediaRecorder.ondataavailable = (e) => {
        if (e.data.size > 0) 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()
    } catch (error) {
      console.error('录音失败:', error)
    }
  },

  stopRecording() {
    this.mediaRecorder.stop()
    this.stream.getTracks().forEach(track => track.stop())
  }
}

使用第三方库简化实现

vue-audio-recorder等专门库可以简化录音功能的实现流程：

npm install vue-audio-recorder

import VueAudioRecorder from 'vue-audio-recorder'
Vue.use(VueAudioRecorder)

// 组件模板
<template>
  <vue-audio-recorder
    :upload-url="uploadUrl"
    @stream="onStream"
    @recording="onRecording"
    @finished="onFinished"
  />
</template>

录音功能优化处理

添加录音状态显示和时长计算可以提升用户体验：

data() {
  return {
    isRecording: false,
    duration: 0,
    timer: null
  }
},
methods: {
  startTimer() {
    this.timer = setInterval(() => {
      this.duration++
    }, 1000)
  },

  stopTimer() {
    clearInterval(this.timer)
    this.duration = 0
  }
}

音频格式转换与处理

将录音转换为不同格式可以使用lamejs等库：

import { Mp3Encoder } from 'lamejs'

convertToMP3(audioData) {
  const encoder = new Mp3Encoder(1, 44100, 128)
  const mp3Data = encoder.encodeBuffer(audioData)
  return new Blob([mp3Data], { type: 'audio/mp3' })
}

录音权限检测

在开始录音前检测浏览器兼容性和权限状态：

vue如何实现录音功能

checkCompatibility() {
  return !!(navigator.mediaDevices && 
           navigator.mediaDevices.getUserMedia && 
           window.MediaRecorder)
},

async checkPermission() {
  try {
    const result = await navigator.permissions.query({ name: 'microphone' })
    return result.state === 'granted'
  } catch {
    return false
  }
}