参考文档：https://www.cnblogs.com/lljun/p/11535807.html

<template>
  <div>
    <div class="home" style="margin:1vw;">
      <Button type="info" @click="startRecorder()"  style="margin:1vw;">开始录音</Button>
      <Button type="info" @click="stopRecorder()" style="margin:1vw;">结束录音</Button>
      <Button type="success" @click="playRecorder()" style="margin:1vw;">录音播放</Button>

      <Button type="info" @click="downPCM()" style="margin:1vw;">下载PCM</Button>
      <Button type="info" @click="downWAV()" style="margin:1vw;">下载WAV</Button>
      <Button  @click="zhuanwenz()" >转文字</Button>
      <br/>
      <div style="width:50%;height:150px;border:1px solid red;">
        <canvas id="canvas"></canvas>
        <span style="padding: 0 10%;"></span>
        <canvas id="playChart"></canvas>
      </div>
    </div>
  </div>

</template>

<script>
import Recorder from 'js-audio-recorder'
const lamejs = require('lamejs')
const recorder = new Recorder({
  sampleBits: 16,                 // 采样位数，支持 8 或 16，默认是16
  sampleRate: 48000,              // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000
  numChannels: 1,                 // 声道，支持 1 或 2， 默认是1
// compiling: false,(0.x版本中生效,1.x增加中)  // 是否边录边转换，默认是false
})
recorder.onprogress = function(params) {
  console.log('--------------START---------------')
  console.log('录音时长(秒)', params.duration);
  console.log('录音大小(字节)', params.fileSize);
  console.log('录音音量百分比(%)', params.vol);
  console.log('当前录音的总数据([DataView, DataView...])', params.data);
  console.log('--------------END---------------')
}
import {voiceList} from "@/api/modChannel";
import {whbxunfei,osswenz} from "@/api/modInterview";

export default {
  name: 'VoiceList',
  data() {
    return {
      //波浪图-录音
      drawRecordId:null,
      oCanvas : null,
      ctx : null,
      //波浪图-播放
      drawPlayId:null,
      pCanvas : null,
      pCtx : null,

      tableData: [],
      total: 0,
      page: 1,
      size: 5,
      resumeVo: {},
    }
  },
  mounted(){
    this.startCanvas();
  },
  methods:{
 
    handleClick(row){
      osswenz(row).then((res)=>{
        console.log(res);
      })
    },
    zhuanwenz(){
      whbxunfei().then(res=>{
        console.log(res);
      })
    },
    startCanvas(){
      //录音波浪
      this.oCanvas = document.getElementById('canvas');
      this.ctx = this.oCanvas.getContext("2d");
      //播放波浪
      this.pCanvas = document.getElementById('playChart');
      this.pCtx = this.pCanvas.getContext("2d");
    },

    /**
     *  录音的具体操作功能
     * */
    // 开始录音
    startRecorder () {
      recorder.start().then(() => {
        this.drawRecord();//开始绘制图片
      }, (error) => {
        // 出错了
        console.log(`${error.name} : ${error.message}`);
      });
    },
    // 结束录音
    stopRecorder () {
      recorder.stop()
      this.drawRecordId && cancelAnimationFrame(this.drawRecordId);
      this.drawRecordId = null;
    },
    // 录音播放
    playRecorder () {
      recorder.play();
      this.drawPlay();//绘制波浪图
    },
    /**
     *  下载录音文件
     * */
    //下载pcm
    downPCM(){
      //这里传参进去的时文件名
      recorder.downloadPCM('新文件');
    },
    //下载wav
    downWAV(){
      //这里传参进去的时文件名
      recorder.downloadWAV('新文件');
    },
    /**
     * 绘制波浪图-录音
     * */
    drawRecord () {
      // 用requestAnimationFrame稳定60fps绘制
      this.drawRecordId = requestAnimationFrame(this.drawRecord);

      // 实时获取音频大小数据
      let dataArray = recorder.getRecordAnalyseData(),
        bufferLength = dataArray.length;

      // 填充背景色
      this.ctx.fillStyle = 'rgb(200, 200, 200)';
      this.ctx.fillRect(0, 0, this.oCanvas.width, this.oCanvas.height);

      // 设定波形绘制颜色
      this.ctx.lineWidth = 2;
      this.ctx.strokeStyle = 'rgb(0, 0, 0)';

      this.ctx.beginPath();

      var sliceWidth = this.oCanvas.width * 1.0 / bufferLength, // 一个点占多少位置，共有bufferLength个点要绘制
        x = 0;          // 绘制点的x轴位置

      for (var i = 0; i < bufferLength; i++) {
        var v = dataArray[i] / 128.0;
        var y = v * this.oCanvas.height / 2;

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

      this.ctx.lineTo(this.oCanvas.width, this.oCanvas.height / 2);
      this.ctx.stroke();
    },
    /**
     * 绘制波浪图-播放
     * */
    drawPlay () {
      // 用requestAnimationFrame稳定60fps绘制
      this.drawPlayId = requestAnimationFrame(this.drawPlay);

      // 实时获取音频大小数据
      let dataArray = recorder.getPlayAnalyseData(),
        bufferLength = dataArray.length;

      // 填充背景色
      this.pCtx.fillStyle = 'rgb(200, 200, 200)';
      this.pCtx.fillRect(0, 0, this.pCanvas.width, this.pCanvas.height);

      // 设定波形绘制颜色
      this.pCtx.lineWidth = 2;
      this.pCtx.strokeStyle = 'rgb(0, 0, 0)';

      this.pCtx.beginPath();

      var sliceWidth = this.pCanvas.width * 1.0 / bufferLength, // 一个点占多少位置，共有bufferLength个点要绘制
        x = 0;          // 绘制点的x轴位置

      for (var i = 0; i < bufferLength; i++) {
        var v = dataArray[i] / 128.0;
        var y = v * this.pCanvas.height / 2;

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

      this.pCtx.lineTo(this.pCanvas.width, this.pCanvas.height / 2);
      this.pCtx.stroke();
    }
  }
}
</script>

<style scoped>

</style>