Vue驱动PC端轻松实现录音与AMR文件播放

2023-10-15 07:12:43

一、项目设置与初始化

项目初始化：使用Vue CLI或其他工具创建一个新的Vue.js项目。
安装依赖：在终端中运行以下命令安装必要的依赖项：

npm install recorderjs

二、添加Recorder.js库

导入库：在您的main.js文件中，导入Recorder.js库：

import Recorder from 'recorderjs';

初始化录音器：在Vue组件中，创建一个录音器实例：

export default {
  data() {
    return {
      recorder: null,
      isRecording: false,
      recordedChunks: []
    };
  },
  methods: {
    startRecording() {
      this.isRecording = true;
      this.recorder = new Recorder();
      this.recorder.record();
    },
    stopRecording() {
      this.isRecording = false;
      this.recorder.stop();
      this.recorder.exportWAV(this.exportWAVCallback);
    },
    exportWAVCallback(blob) {
      const reader = new FileReader();
      reader.onload = () => {
        this.recordedChunks.push(reader.result);
      };
      reader.readAsDataURL(blob);
    }
  }
};

三、AMR文件播放

安装AMR播放库：使用以下命令安装AMR播放库：

npm install amr-player

导入库：在您的main.js文件中，导入AMR播放库：

import AMRPlayer from 'amr-player';

初始化播放器：在Vue组件中，创建一个播放器实例：

export default {
  data() {
    return {
      player: null,
      isPlaying: false,
      currentAMRFile: null
    };
  },
  methods: {
    playAMR(amrFile) {
      this.isPlaying = true;
      this.currentAMRFile = amrFile;
      this.player = new AMRPlayer();
      this.player.open(amrFile);
      this.player.play();
    },
    stopPlaying() {
      this.isPlaying = false;
      this.player.pause();
      this.player.close();
    }
  }
};

四、使用Vue组件

在模板中使用组件：在您的Vue模板中，使用以下组件：

<template>
  <div>
    <button @click="startRecording">开始录音</button>
    <button @click="stopRecording">停止录音</button>
    <button v-if="recordedChunks.length > 0" @click="playAMR(recordedChunks[0])">播放录音</button>
  </div>
</template>

在脚本中使用组件：在您的Vue脚本中，使用以下代码：

export default {
  data() {
    return {
      recordedChunks: []
    };
  },
  methods: {
    startRecording() {
      this.recorder = new Recorder();
      this.recorder.record();
    },
    stopRecording() {
      this.recorder.stop();
      this.recorder.exportWAV(this.exportWAVCallback);
    },
    exportWAVCallback(blob) {
      const reader = new FileReader();
      reader.onload = () => {
        this.recordedChunks.push(reader.result);
      };
      reader.readAsDataURL(blob);
    }
  }
};