vue实现录音文件播放

Vue 实现录音文件播放

在 Vue 中实现录音文件播放通常涉及以下步骤：录音、存储录音文件、播放录音文件。以下是具体实现方法。

录音功能实现

使用 navigator.mediaDevices.getUserMedia 获取麦克风权限并录制音频：

// 在 Vue 组件中
data() {
  return {
    mediaRecorder: null,
    audioChunks: [],
    audioBlob: null,
    audioUrl: null
  };
},
methods: {
  async startRecording() {
    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
    this.mediaRecorder = new MediaRecorder(stream);
    this.mediaRecorder.ondataavailable = (event) => {
      this.audioChunks.push(event.data);
    };
    this.mediaRecorder.start();
  },
  stopRecording() {
    this.mediaRecorder.stop();
    this.mediaRecorder.onstop = () => {
      this.audioBlob = new Blob(this.audioChunks, { type: 'audio/wav' });
      this.audioUrl = URL.createObjectURL(this.audioBlob);
      this.audioChunks = [];
    };
  }
}

播放录音功能

使用 HTML5 的 <audio> 元素播放录制的音频：

<template>
  <div>
    <button @click="startRecording">开始录音</button>
    <button @click="stopRecording">停止录音</button>
    <button @click="playRecording" v-if="audioUrl">播放录音</button>
    <audio ref="audioPlayer" :src="audioUrl" controls v-if="audioUrl"></audio>
  </div>
</template>

<script>
export default {
  methods: {
    playRecording() {
      this.$refs.audioPlayer.play();
    }
  }
};
</script>

保存录音文件

将录音文件保存到本地或上传到服务器：

methods: {
  saveRecording() {
    const a = document.createElement('a');
    a.href = this.audioUrl;
    a.download = 'recording.wav';
    a.click();
  },
  async uploadRecording() {
    const formData = new FormData();
    formData.append('audio', this.audioBlob, 'recording.wav');
    await axios.post('/upload', formData);
  }
}

注意事项

• 确保浏览器支持 MediaRecorder API。
• 在 HTTPS 环境下或本地开发环境（localhost）中使用 getUserMedia。
• 录音完成后释放对象 URL 以避免内存泄漏：

beforeDestroy() {
  if (this.audioUrl) {
    URL.revokeObjectURL(this.audioUrl);
  }
}

通过以上方法，可以在 Vue 中实现录音文件的录制、播放和保存功能。