当前位置：首页 > VUE

vue实现录音文件播放

2026-01-12 05:06:35VUE

实现录音文件播放的方法

在Vue中实现录音文件播放需要结合HTML5的Web Audio API或第三方库。以下是两种常见的方法：

使用HTML5 Audio元素

通过Vue动态绑定<audio>元素的src属性实现播放：

<template>
  <div>
    <audio ref="audioPlayer" controls></audio>
    <button @click="playRecord">播放录音</button>
  </div>
</template>

<script>
export default {
  methods: {
    playRecord() {
      const audio = this.$refs.audioPlayer
      audio.src = URL.createObjectURL(this.recordBlob) // recordBlob为录音的Blob对象
      audio.play()
    }
  }
}
</script>

使用Web Audio API

对于更复杂的音频处理：

// 在methods中
playWithWebAudio() {
  const audioContext = new (window.AudioContext || window.webkitAudioContext)()
  const fileReader = new FileReader()

  fileReader.onload = e => {
    audioContext.decodeAudioData(e.target.result, buffer => {
      const source = audioContext.createBufferSource()
      source.buffer = buffer
      source.connect(audioContext.destination)
      source.start(0)
    })
  }

  fileReader.readAsArrayBuffer(this.recordBlob)
}

处理录音文件格式

常见录音格式处理方式：

MP3/WAV文件可直接用<audio>播放
PCM原始数据需要转换为可播放格式
WebM格式可能需要检查浏览器兼容性

// 转换Blob为可播放URL
const audioUrl = URL.createObjectURL(blob)
this.$refs.audioPlayer.src = audioUrl

第三方库集成

考虑使用以下库简化实现：

wavesurfer.js：提供可视化波形
recordrtc：处理复杂录音场景
howler.js：高级音频控制

安装wavesurfer示例：

npm install wavesurfer.js

使用示例：

import WaveSurfer from 'wavesurfer.js'

// 在组件中
this.wavesurfer = WaveSurfer.create({
  container: '#waveform',
  waveColor: 'violet',
  progressColor: 'purple'
})
this.wavesurfer.loadBlob(this.recordBlob)

浏览器兼容性处理

添加polyfill保证兼容性：

// 在main.js中
import 'webrtc-adapter'

处理iOS自动播放限制：

// 必须由用户手势触发
document.addEventListener('touchstart', () => {
  audioContext.resume()
}, { once: true })

完整组件示例

<template>
  <div>
    <div id="waveform"></div>
    <audio ref="audioPlayer" controls></audio>
    <button @click="playAudio">播放</button>
    <button @click="stopAudio">停止</button>
  </div>
</template>

<script>
import WaveSurfer from 'wavesurfer.js'

export default {
  data() {
    return {
      wavesurfer: null,
      audioBlob: null
    }
  },
  mounted() {
    this.wavesurfer = WaveSurfer.create({
      container: '#waveform',
      backend: 'WebAudio',
      waveColor: '#409EFF',
      progressColor: '#303133'
    })
  },
  methods: {
    playAudio() {
      if (this.audioBlob) {
        this.wavesurfer.loadBlob(this.audioBlob)
      }
    },
    stopAudio() {
      this.wavesurfer.stop()
    },
    // 接收录音Blob
    setRecordBlob(blob) {
      this.audioBlob = blob
      this.$refs.audioPlayer.src = URL.createObjectURL(blob)
    }
  }
}
</script>

vue实现录音文件播放