vue使用js-audio-recorder实现一句话识别功能

需求： 今天接到一个项目需求，就是后台调用腾讯云语音识别，前端拿到录音base64数据源调用数据接口实现y一句话识别搜索功能!
相关资源下载：

因为有很多地方需要用到这个搜索功能！为了方便，所以我封装成一个组件的形式！

<template>
  <div class="recordPlagin">
    <!-- 录音提示 -->
    <div class="mask" v-if="yingPingDisPlay">
      <img src="../assets/help/yuYin/yingPingBo.gif" />
      <span>正在听，松开进行搜索!</span>
    </div>
    <!-- 按钮 -->
    <!-- <div @touchstart="gtouchstart()" @touchend="gtouchend()" style="background-image: linear-gradient(#FE4C6B, #FE4C6B); font-weight: bold; border-radius: 20px; display: flex;align-items: center;color: #fff; center;padding: 5px 2%;width: 30%;margin: 10px 33%;justify-content: space-evenly;">
      <img style="width: 20px;height: 20px;" src="../assets/help/lu_yin.png" />
      <div>{{viodeText}}</div>
    </div> -->
    <div class="buttonImg" @touchstart="gtouchstart()" @touchend="gtouchend()" :style="{backgroundImage:'url('+buttonImg+')'}">

    </div>
  </div>
</template>
<script>
  import Recorder from 'js-audio-recorder'
  var recorder = new Recorder({
    sampleBits: 16, // 采样位数，支持 8 或 16，默认是16
    sampleRate: 16000, // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000
    numChannels: 1, // 声道，支持 1 或 2， 默认是1
    // compiling: false,(0.x版本中生效,1.x增加中)  // 是否边录边转换，默认是false
  })

  // 绑定事件-打印的是当前录音数据
  recorder.onprogress = function(params) {
    // alert('--------------START---------------')
    // alert('录音时长(秒)', params.duration);
    // alert('录音大小(字节)', params.fileSize);
    // alert('录音音量百分比(%)', params.vol);
    // alert('当前录音的总数据([DataView, DataView...])', params.data);
    // alert('--------------END---------------')
  }
export default {
  data() {
    return {
      viodeText: '长按说话',
      search: '',
      yingPingDisPlay:false,
      buttonImg:require('../assets/help/yuyin_sh.png'),
    };
  },
  mounted() {
    //获取录音权限
    Recorder.getPermission().then(() => {
      // this.$vux.toast.text('获取权限成功', 'top');
    }, (error) => {
      alert(`${error.name} : ${error.message}`);
    });

  },
  methods: {
    gtouchstart() {
      // this.viodeText = '松开搜索'
      this.buttonImg = require('../assets/help/yuyin_ss.png');
      this.startRecorder();
      this.yingPingDisPlay = true;
    },
    gtouchend(event) {
      this.yingPingDisPlay = false;
      // this.viodeText = '长按说话'
      this.buttonImg = require('../assets/help/yuyin_sh.png');
      this.stopRecorder();
      this.getRecorder();
    },
    //开始录音
    startRecorder() {
      recorder.start().then(() => {
      }, (error) => {
        // 出错了
        alert(`${error.name} : ${error.message}`);
      });
    },
    // 结束录音
    stopRecorder() {
      recorder.stop()
    },
    //获取onload里面的录音信息
    getRecordInfo(e) {
      var that = this;
      let wavValue = e.split("base64,")[1];
      var data = {
        ProjectId: 0, //腾讯云项目 ID
        SubServiceType: 2, //一句话识别
        SourceType: 1, //语音数据
        EngSerViceType: "16k_zh",
        VoiceFormat: "wav", //识别音频的音频格式。
        Data: wavValue,
        UsrAudioKey: "snimay",
        FilterDirty:1,//是否过滤脏词
        FilterPunc:2,//是否过滤标点符号
        FilterModal:2//是否过语气词
      };
      console.log(data)
      that.$vux.loading.show({text: '语音识别中！'});
      that.$axios
        .post(
          "/common.do",
          that.$qs.stringify({
            method: this.$method.METHOD_API_CATEGORYMODULE,
            data: JSON.stringify(data),
          })
        )
        .then((res) => {
          setTimeout(() => {
            that.$vux.loading.hide();
          }, 10);
          if (res.data.data.Result == '' || res.data.data.Result == undefined) {
            that.$vux.toast.text('抱歉，没有听清楚！', 'middle');
          } else {
            const { Result } = res.data.data;
            that.$emit('abc', Result);
            // alert(this.key_word)
            // this.getProblemusercollect();
          }
        });
    },
    //获取录音wav
    getRecorder() {
      let toltime = recorder.duration; //录音总时长
      let fileSize = recorder.fileSize; //录音总大小
      // alert(`时间:${toltime},大小:${toltime}`)
      // let PCMBlob = recorder.getPCMBlob(); //获取 PCM 数据
      var wav = recorder.getWAVBlob(); //获取 WAV 数据
      var reader = new FileReader();
      reader.readAsDataURL(wav);
      this.search = '';
      reader.onload = () => {
        this.search = reader.result;
        //调用其他方法
        this.getRecordInfo(this.search, '', )
      }
    }
  }
};
</script>
<style scoped lang="less">
  .recordPlagin{
    position: fixed;
    bottom: 50px;
    width: 100%;
    .mask{
      background: #fff;
      margin-bottom: 35px;
      img{
        width: 100%;
      }
      span{
        display: flex;
        justify-content: center;
        opacity: 0.5;
      }
    }
    .buttonImg{
       width: 135px;
       height: 37.44px;
       background-size: 100% 100%;
       margin: auto;
    }
  }
</style>

遇到的难点总结： 说真的，这里还真的遇到有些问题！

之前用过uniapp的语音识别插件：https://ext.dcloud.net.cn/search?q=%E8%AF%AD%E9%9F%B3%E8%AF%86%E5%88%AB 但是uniapp中的uni.xxx在vue中为undefind！所以找了vue中的js-audio-recorder插件！但是这插件也有问题！获取不到语音数据源！
之前用过uniapp的语音识别插件：https://ext.dcloud.net.cn/search?q=%E8%AF%AD%E9%9F%B3%E8%AF%86%E5%88%AB 但是uniapp中的uni.xxx在vue中为undefind！所以找了vue中的js-audio-recorder插件！但是这插件也有问题！获取不到语音数据源！