vue实现录音文件播放

使用 Vue 实现录音文件播放

准备工作

确保项目中已安装必要的依赖，如 vue-audio-recorder 或原生 Web Audio API。录音文件播放通常涉及录音、存储和播放三个核心环节。

录音功能实现

通过 navigator.mediaDevices.getUserMedia 获取麦克风权限并录制音频。以下为示例代码：

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

播放功能实现

利用 HTML5 的 <audio> 标签播放录制的音频文件。在模板中添加以下代码：

<template>
  <audio :src="recordedAudio" controls></audio>
  <button @click="startRecording">开始录音</button>
  <button @click="stopRecording">停止录音</button>
</template>

第三方库简化流程

使用 vue-audio-recorder 库可快速集成：

1. 安装库：

   npm install vue-audio-recorder

2. 在组件中使用：

   import { VueAudioRecorder } from 'vue-audio-recorder';
   export default {
   components: { VueAudioRecorder },
   methods: {
    onRecordingComplete(blob) {
      this.recordedAudio = URL.createObjectURL(blob);
    }
   }
   }

   模板部分：

   

   <vue-audio-recorder @recording-complete="onRecordingComplete" />
   <audio :src="recordedAudio" controls></audio>

注意事项

• 用户需授权麦克风权限，首次使用需处理浏览器弹窗。
• 不同浏览器对音频格式的支持可能不同，建议统一转换为 WAV 或 MP3 格式。
• 移动端需测试兼容性，部分功能可能需要 HTTPS 环境。