前端微信jssdk智能语音识别，完整案例

 给大家分享一下最近开发微信浏览器智能语音识别jssdk案例。前期准备调研使用微信jssdk前，先使用开发了科大讯飞的语音识别。最后讨论使用微信jssdk的语音识别，所以团队放弃采购科大讯飞，使用微信自带的wx jssdk的接口，完成了项目智能识别等功能。

在开始开发时，后端接口并没有提供接口，需要前端自己先研究出可行方案（这里的心酸不说了，哎）

1,首先准备工作，搭建node环境，构建vue2项目，HTML页面等(已有项目跳过)。

2.登录 微信公众号平台 ，注册一个订阅号（个人只能注册订阅号），登录到平台后台，点击开发者工具-web开发者工具，绑定自己的微信账号，方便测试使用。

3，微信订阅号有了之后，下载微信开发者工具

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

使用公众号网页调试，开发者可以调试微信网页授权和微信JS-SDK

以上完成准备工作，

1，现在写入vue页面，首先引入weixin-js-sdk，然后执行命令npm install

import wx from "weixin-js-sdk";

2，在填写wx.config里面必填的数据之前，使用微信开发者工具输入（前提是并没有后台接口提供，如果后端接口提供了接口wx.config的数据那就忽略）

https://www.weixinsxy.com/jssdk/  

获取wx.config里面需要的参数

复制到代码里面

     wx.config({
          debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: "wxf8b4f85f3a794e77", // 必填，公众号的唯一标识
          timestamp: "1618478691", // 必填，生成签名的时间戳
          nonceStr: "u5a07gzMzQLzR0tQ", // 必填，生成签名的随机串
          signature: "deb9695dd99753754077c226454b3991febfdcbe", // 必填，签名
          jsApiList: [
            "startRecord",
            "stopRecord",
            "translateVoice",
            "onVoicePlayEnd",
            "stopVoice",
            "pauseVoice",
            "playVoice",
            "onVoiceRecordEnd",
          ], // 必填，需要使用的JS接口列表
        });
 // wx.config成功后会走wx.ready,失败会走wx.error
        wx.ready(() => {
          // 成功后使用wx,checkJSapI测试你要用的API是否可以用
          wx.checkJsApi({
            jsApiList: [
              "startRecord",
              "stopRecord",
              "translateVoice",
              "onVoicePlayEnd",
              "stopVoice",
              "pauseVoice",
              "playVoice",
              "onVoiceRecordEnd",
            ],
            success(res) {
              console.log(res, "语音识别成功");
              // 以键值对的形式返回，可用的api值true，不可用为false
              // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
              // 如果这里成功了就改变一个标记下方你就正常调用方法，如果没成功那就改变为false，下方调用API的时候给个友情提示。
            },
            error(res) {
              console.log("失败");
            },
          });
          wx.onVoiceRecordEnd({
            // 录音时间超过一分钟没有停止的时候会执行 complete 回调
            complete: function (res) {
              alert("录音停止");
              sessionStorage.setItem("localId", JSON.stringify(res.localId));
            },
          });
          //注册微信播放录音结束事件【一定要放在wx.ready函数内】
          wx.onVoicePlayEnd({
            success: function (res) {
              this.offOrNo = false;
            },
          });
        });
        wx.error((res) => {
          console.log("失败");
        });

然后我们添加点击播放 识别按钮的方法直接调用官方的方法即可

开始录音接口（开始录音没有保存完整的音频ID,只有停止录音接口才会保存完整的录音视频）

wx.startRecord();

停止录音接口

wx.stopRecord({
  success: function (res) {
    var localId = res.localId;
  }
});

识别音频并返回识别结果接口

1.在识别音频的时候，要放在停止音频函数里面，不然取不到值，这里在微信开发者工具里面显示的是"只是一个调试的结果"，这是音频无法在微信开发者工具中解析

wx.stopRecord({
  success: function (res) {
     wx.translateVoice({
        localId: this.localId, // 需要识别的音频的本地Id，由录音相关接口获得
        isShowProgressTips: 1, // 默认为1，显示进度提示
        complete: function (res) {
          if (res.translateResult)) {
            //这里需要转义一下
            this.msg = JSON.parse(JSON.stringify(res.translateResult));
            alert("识别结果：" + res.translateResult);
           
          } else {
            this.msg = "无法识别";
          }
        },
      });
  }
});

此时我们已经完成功能的基本需求了，这时候发现放到手机里获取不到appid,

需要后端配合写接口，关注公众号。提供wx.config里的参数。

接下来我们要解决在微信浏览器里使用语音功能遇到的问题

1.我们要开发一个 按住说话，松开结束的功能

<button
 @touchstart="gostart"
 @touchmove="gomove"
 @touchend="goend"
 @touchcancel="gocancel"
>
按住说话
</button>

这里就会遇到问题，

1、频繁的按住录音，松开停止录音，发现卡住了，一直在录音中。

所以我们要给开始录音做一个延时

watch:{
    'time':{
        handler(val){
            if(val==1){
                wx.startRecord();//开始录音
            }
        }
    }
},
methods:{
    gostart(){
        event.preventDefault()
        this.time=0
        this.timer=setInterval(()=>{
            this.time++
        },500)
    }
    gosend(){
        clearInterval(this.timer)
        event.preventDefault()
        if(this.time<1)return
        wx.stopRecord();//停止录音
    }
    gocancel(){
        clearInterval(this.timer)
        event.preventDefault()
        wx.stopRecord();//停止录音
    }
}

2、还会遇到ios端上滑页面，打断录音，页面touchend失效，页面卡不动的问题。只需要加上 @touchcancel="gocancel"  就行了。弹框打断，切屏打断问题解决。

后续问题 ，还有在ios底部会有返回底部栏，适配问题。导致跳转页面返回原来页面，获取不到appid，导致无法录音的问题。我在继续后面补充，今天就写到这里，散会。