vue中使用微信jssdk语音聊天功能

1、绑定域名
2、引入JS文件
前面两步不细说，直接看官方文档就行，官方文档
3、wx.config配置：
在这边要注意有一个坑必须要注意一下：可能会遇到安卓系统配置正常，ios上面报签名无效配置失败。
如果是使用的hash模式的路由应该不会遇到这种情况，毕竟使用官方的方法取#前面的地址应该都是一样的。如果用的history路由模式的要注意一下：
因为用的是vue单页spa，在单页spa方面vue的history在iOS中页面地址会始终为第一次进入的链接地址。然后微信那边校验的页面地址跟我们传的不一样就会出现校验失败的问题，所以在ios中我们要判断一下，记录第一次进入的地址，然后将他传给接口就可以了。
我们可以在路由守卫中存储第一次进入的地址：

// 路由加载前
router.beforeEach((to, _from, next) => {
  if(!window.initUrl){
    window.initUrl = location.href.split('#')[0];
  }
  next()
})

 // 获取小程序配置
    getWxConfig() {
      let req = {
        url:'',
      };
      // 判断ios和安卓
      if (this.agent == 'ios') {
        req.url = window.initUrl;
      }else{
        req.url = window.location.href.split("#")[0];
      }
      this.$apiData.getWxConfig(req).then((res) => {
        if (res.data.code == "0000") {
          wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来。
            appId: data.appId, // 必填，公众号的唯一标识
            timestamp: data.timestamp, // 必填，生成签名的时间戳
            nonceStr: data.nonceStr, // 必填，生成签名的随机串
            signature: data.signature, // 必填，签名
            jsApiList: [ "startRecord","stopRecord", "playVoice","pauseVoice","stopVoice","uploadVoice", "downloadVoice","downloadVoice","translateVoice","onVoiceRecordEnd",], // 必填，需要使用的JS接口列表
          });
        } 
      });
    },

4、录音

（1）、按住录音

  // 开始录音
    startRecord(e) {
      e.preventDefault();
      this.isCancel = false;
      this.startMove = e.touches[0].pageX; //获取起点坐标
      this.isStartVoice = true;
      this.translateResult = "";
      this.voiceTime = 0;
      this.voiceTime = 0;
      wx.startRecord({
        success: () => {
          this.voiceTimer = setInterval(() => {
            this.voiceTime++;
          }, 1000);
          this.voiceEnd();
        },
        cancel: () => {
          this.tipsHandler("用户拒绝授权录音");
        },
      });
    },

（2）、取消录音

 // 取消录音
    cancelSay(e) {
       e.preventDefault();
      this.stopMove = e.targetTouches[0].pageX; //获取滑动实时坐标
      //滑动距离超过100的时候显示删除和取消按钮
      if (this.stopMove - this.startMove > 100) {
        this.showDeleteIcon = true;
        this.isCancel = true;
      } else {
        this.showDeleteIcon = false;
        this.isCancel = false;
      }
    },

(3)、手指松开，停止录音

   // 松开
    gotouchend(e) {
      e.preventDefault();
      this.isStartVoice = false;
      this.showDeleteIcon = false;
      this.voiceStop();
    },

(4)、停止录音

    // 停止录音
    voiceStop() {
      wx.stopRecord({
        success:async (res) => {
          console.log(res);
          clearInterval(this.voiceTimer);
          this.voiceLocalId = res.localId;
          if (!this.isCancel) {
              this.isUploadVoice = true;
              await this.upVoice();
              await  this.translateVoice();
          }
        },
        fail: (error) => {
          this.tipsHandler(error + "语音停止失败");
        },
      });
    },

（5）、上传语音

  //  上传语音
    upVoice() {
      wx.uploadVoice({
        localId: this.voiceLocalId, // 需要上传的音频的本地ID，由stopRecord接口获得
        isShowProgressTips: 0, // 默认为1，显示进度提示
        success: (res) => {
          this.voiceServerId = res.serverId; // 返回音频的服务器端ID
        },
        fail: (error) => {
          this.isUploadVoice = false;
          this.tipsHandler(error + "上传失败");
        },
      });
    },

（6）、录音时间超过一分钟没有停止时，停止录音事件

voiceEnd() {
      let that = this;
      wx.onVoiceRecordEnd({
        // 录音时间超过一分钟没有停止的时候会执行 complete 回调
        complete: async  (res)=> {
          that.voiceLocalId = res.localId;
          clearInterval(that.voiceTimer);
          that.isStartVoice = false;
          that.showDeleteIcon = false;
          await  that.upVoice();
          await  that.translateResult();
        },
      });
    },

（7）、语音转换文字

 // 语音转换结果
    translateVoice() {
      let that = this;
      wx.translateVoice({
        localId: that.voiceLocalId, // 需要识别的音频的本地Id，由录音相关接口获得
        isShowProgressTips: 0, // 默认为1，显示进度提示
        success: function (res) {
          that.translateResult = res.translateResult; 
          console.log(res.translateResult, "res.translateResult"); // 语音识别的结果
        },
      });
    },

5、播放音频
播放音频我用的audio标签，要注意的是，这里面有个坑,安卓可以正常播放，ios不能正常播放，我查了查，网上说“由于 iOS Safari 限制不允许 audio autoplay, 必须用户主动交互(例如 click)后才能播放 audio, 因此我们通过一个用户交互事件主动 play 一下 audio”
我刚开始是在点击的时候动态创建一个audio标签，我发现不太行，用了一下方法，解决了ios不能播放的问题：

 playVoice(fileCode,id){
        let url = 音频地址;
        this.playUrl(url,id);
  },
  playUrl(url,id){
    document.getElementById(id).setAttribute('src',url);
    var audio = document.getElementById(id);
	     audio.pause();
        audio.play();
  },

6、实现效果图（我没截完，随便截了几张）：