当前位置：首页 > VUE

vue播放录音实现

2026-02-20 12:16:43VUE

实现录音功能

在Vue中实现录音功能通常需要使用浏览器提供的Web Audio API或第三方库。以下是一种基于recorder-core和lamejs的解决方案。

安装依赖：

npm install recorder-core lamejs

录音组件示例

创建一个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 Recorder from 'recorder-core'
import 'recorder-core/src/engine/mp3'
import 'recorder-core/src/engine/mp3-engine'

export default {
  data() {
    return {
      recorder: null,
      isRecording: false,
      audioUrl: null
    }
  },
  methods: {
    async startRecording() {
      try {
        const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
        this.recorder = new Recorder({
          type: 'mp3',
          sampleRate: 16000,
          bitRate: 16
        })
        this.recorder.open(stream, () => {
          this.recorder.start()
          this.isRecording = true
        })
      } catch (error) {
        console.error('录音权限被拒绝:', error)
      }
    },
    stopRecording() {
      if (this.recorder) {
        this.recorder.stop((blob, duration) => {
          this.audioUrl = URL.createObjectURL(blob)
          this.isRecording = false
          this.recorder.close()
        }, error => {
          console.error('录音失败:', error)
        })
      }
    }
  }
}
</script>

使用原生Web Audio API

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

export default {
  methods: {
    async startNativeRecording() {
      const stream = await navigator.mediaDevices.getUserMedia({ audio: true })
      const mediaRecorder = new MediaRecorder(stream)
      const audioChunks = []

      mediaRecorder.ondataavailable = event => {
        audioChunks.push(event.data)
      }

      mediaRecorder.onstop = () => {
        const audioBlob = new Blob(audioChunks)
        this.audioUrl = URL.createObjectURL(audioBlob)
      }

      mediaRecorder.start()
      this.nativeRecorder = mediaRecorder
    }
  }
}

注意事项

浏览器录音功能需要HTTPS环境或localhost才能正常工作不同浏览器对音频格式的支持可能不同，MP3格式兼容性较好移动端设备可能需要额外处理自动暂停问题录音前应检查用户权限并处理拒绝情况

音频可视化

可以添加音频波形可视化效果，使用Web Audio API的AnalyserNode：

setupVisualizer(audioContext) {
  const analyser = audioContext.createAnalyser()
  analyser.fftSize = 256
  const bufferLength = analyser.frequencyBinCount
  const dataArray = new Uint8Array(bufferLength)

  function draw() {
    requestAnimationFrame(draw)
    analyser.getByteFrequencyData(dataArray)
    // 使用dataArray绘制波形
  }

  draw()
  return analyser
}

以上方法提供了在Vue中实现录音功能的基本方案，可根据实际需求进行调整和扩展。

vue播放录音实现