使用vue插件js-audio-recorder实现录音功能（各种简易按钮都有，便于后期修改）

一、理论参考

常用配置项 options

options

{
  // 采样位数，支持 8 或 16，默认是16
  sampleBits: 16,
  // 采样率，支持 11025、16000、22050、24000、44100、48000
  sampleRate: 48000,
  // 声道，支持 1 或 2， 默认是1
  numChannels: 1,
  // 是否边录边转换，默认是false
  compiling: false
}

new Recorder(options)
复制代码

常用属性 attrs

duration

// 时长
recorder.duration
复制代码

fileSize

// 文件大小
recorder.fileSize
复制代码

常用方法 getWAVBlob

获取数据方法

// 获取录音数据 buffer
recorder.getRecordAnalyseData()

// 获取播放数据 buffer
recorder.getPlayAnalyseData()
复制代码

录音方法

// 录音
recorder.start()

// 暂停
recorder.pause()

// 继续
recorder.resume()

// 结束
recorder.stop()
复制代码

播放方法

// 播放
recorder.play()

// 暂停
recorder.pausePlay()

// 继续
recorder.resumePlay()

// 结束
recorder.stopPlay()
复制代码

下载方法

// 下载 pcm 文件
recorder.downloadPCM()

// 下载 wam 文件
recorder.downloadWAV()
复制代码

销毁方法

// 销毁实例
recorder.destroy()

二、使用

安装

npm i js-audio-recorder

具体组件代码

<template>
  <div class="BaseRecorder">
    <div class="BaseRecorder-record">
      <el-button @click="startRecorder()" :disabled="recorder_state !== '无'">开始录音</el-button>
      <el-button @click="pauseRecorder()">暂停录音</el-button>
      <el-button @click="resumeRecorder()">继续录音</el-button>
      <el-button @click="stopRecorder()" :disabled="recorder_state === '无'">结束录音</el-button>
    </div>
    <div class="BaseRecorder-play">
      <el-button @click="playRecorder()" :disabled="play_state !== '无'">录音播放</el-button>
      <el-button @click="pausePlayRecorder()">暂停录音播放</el-button>
      <el-button @click="resumePlayRecorder()">恢复录音播放</el-button>
      <el-button @click="stopPlayRecorder()" :disabled="play_state === '无'"
        >停止录音播放</el-button
      >
    </div>
    <div class="BaseRecorder-download">
      <el-button @click="downPCM()">下载PCM格式录音</el-button>
      <el-button @click="downWAV()">下载WAV格式录音</el-button>
    </div>
    <div class="BaseRecorder-destroy">
      <el-button type="error" @click="destroyRecorder()">销毁录音</el-button>
    </div>
    <div class="BaseRecorder-wave">
      <p class="recorder_state">{{ recorder_state }}</p>
      <canvas ref="record"></canvas>
      <p class="recorder_state">{{ play_state }}</p>
      <canvas ref="play"></canvas>
    </div>
  </div>
</template>

<script>
  import Recorder from 'js-audio-recorder';

  export default {
    data() {
      return {
        recorder: null,
        // 波浪图-录音
        drawRecordId: null,
        // 波浪图-播放
        drawPlayId: null,
        // 录音状态
        recorder_state: '无',
        // 播放状态
        play_state: '无',
      };
    },
    mounted() {
      this.init();
    },
    methods: {
      // 初始化
      init() {
        this.recorder = new Recorder({
          // 采样位数，支持 8 或 16，默认是16
          sampleBits: 16,
          // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值
          sampleRate: 48000,
          // 声道，支持 1 或 2， 默认是1
          numChannels: 1,
          // 是否边录边转换，默认是false
          compiling: false,
        });
      },
      // 开始录音
      startRecorder() {
        this.recorder.start().then(
          () => {
            this.drawRecord();
            this.recorder_state = '录音中...';
          },
          error => {
            // 出错了
            console.log(`${error.name} : ${error.message}`);
          },
        );
      },
      // 继续录音
      resumeRecorder() {
        this.recorder.resume();
        this.drawRecord();
        this.recorder_state = '录音中...';
      },
      // 暂停录音
      pauseRecorder() {
        this.recorder.pause();
        this.recorder_state = '暂停录音';
        this.drawRecordId && cancelAnimationFrame(this.drawRecordId);
        this.drawRecordId = null;
      },
      // 结束录音
      stopRecorder() {
        this.recorder.stop();
        this.drawRecordId && cancelAnimationFrame(this.drawRecordId);
        this.drawRecordId = null;
        this.recorder_state = '无';
      },
      // 录音播放
      playRecorder() {
        this.recorder.play();
        this.drawPlay(); // 绘制波浪图
        this.play_state = '录音播放中';
      },
      // 暂停录音播放
      pausePlayRecorder() {
        this.recorder.pausePlay();
        this.play_state = '录音暂停播放';
      },
      // 恢复录音播放
      resumePlayRecorder() {
        this.recorder.resumePlay();
        this.drawPlay(); // 绘制波浪图
        this.play_state = '录音播放中';
      },
      // 停止录音播放
      stopPlayRecorder() {
        this.recorder.stopPlay();
        this.play_state = '无';
      },
      // 销毁录音
      destroyRecorder() {
        this.recorder.destroy().then(() => {
          console.log(this.drawRecordId, this.drawPlayId);
          this.drawRecordId && cancelAnimationFrame(this.drawRecordId);
          this.drawRecordId = null;

          this.drawPlayId && cancelAnimationFrame(this.drawPlayId);
          this.drawPlayId = null;

          this.init();
        });
      },

      /**
       *  下载录音文件
       * */
      // 下载pcm
      downPCM() {
        // 这里传参进去的时文件名
        this.recorder.downloadPCM('新文件');
      },
      // 下载wav
      downWAV() {
        // 这里传参进去的时文件名
        this.recorder.downloadWAV('新文件');
      },

      /**
       * 绘制波浪图-录音
       * */
      drawRecord() {
        this.drawRecordId = requestAnimationFrame(this.drawRecord);
        this.drawWave({
          canvas: this.$refs.record,
          dataArray: this.recorder.getRecordAnalyseData(),
          bgcolor: 'white',
          lineWidth: 1,
          lineColor: 'red',
        });
      },
      /**
       * 绘制波浪图-播放
       * */
      drawPlay() {
        this.drawPlayId = requestAnimationFrame(this.drawPlay);
        this.drawWave({
          canvas: this.$refs.play,
          dataArray: this.recorder.getPlayAnalyseData(),
        });
      },
      drawWave({
        canvas,
        dataArray,
        bgcolor = 'rgb(200, 200, 200)',
        lineWidth = 2,
        lineColor = 'rgb(0, 0, 0)',
      }) {
        if (!canvas) return;

        const ctx = canvas.getContext('2d');
        const bufferLength = dataArray.length;
        // 一个点占多少位置，共有bufferLength个点要绘制
        const sliceWidth = canvas.width / bufferLength;
        // 绘制点的x轴位置
        let x = 0;

        // 填充背景色
        ctx.fillStyle = bgcolor;
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // 设定波形绘制颜色
        ctx.lineWidth = lineWidth;
        ctx.strokeStyle = lineColor;

        ctx.beginPath();

        for (let i = 0; i < bufferLength; i++) {
          const v = dataArray[i] / 128;
          const y = (v * canvas.height) / 2;

          if (i === 0) {
            // 第一个点
            ctx.moveTo(x, y);
          } else {
            // 剩余的点
            ctx.lineTo(x, y);
          }
          // 依次平移，绘制所有点
          x += sliceWidth;
        }

        // 最后一个点
        ctx.lineTo(canvas.width, canvas.height / 2);
        ctx.stroke();
      },
    },
  };
</script>
<style lang="scss" scoped>
  .BaseRecorder {
    text-align: center;
    & > div {
      margin: 20px 0;
    }
    &-wave {
      canvas {
        width: 400px;
        height: 100px;
        border: 1px solid #ccc;
      }
    }
  }
  .recorder_state {
    font-size: 30px;
    color: red;
  }
</style>