小程序语音识别=＞插件：微信同声传译

前言：利用小程序自己的插件：微信同声传译

将识别出来的语音添加到自己想要放的位置

效果图：

 

步骤： 

第一步：在小程序后台添加该插件

        设置--》第三方设置--》插件管理

添加后的效果： 

 第二步：在app.json中添加此插件

 它的版本号以及id通过详情获取

 第三步：在需要用的wxml页面引入html相关代码

        这是按钮的html代码

<view class="weui-cell__bd">
    <button class=" videoBtn {{recordState == true ? 'videoBtnBg':''}}" bindtouchstart="touchStart" bindtouchend="touchEnd">
          <text wx:if="{{recordState == false}}">按住 说话</text>
          <text wx:else>松开 结束</text>
        </button>
      </view>

        这是语音弹框的代码

<cover-view class="startYuyinImage" wx:if="{{recordState == true}}">
  <cover-icon></cover-icon>
  <cover-image src="../../assets/images/sounds.png"></cover-image>
  <cover-view>开始语音</cover-view>
</cover-view>

 第四步：对应页面的js文件

const plugin = requirePlugin('WechatSI');
const manager = plugin.getRecordRecognitionManager();
Page({
data:{
    recordState: false,
    questionForm:{
      adders:'请选择位置',
      msg:''
    },
},
onLoad(options) {
    this.initRecord();
},
// 手动输入内容
  conInput: function (e) {
    this.setData({
      "questionForm.msg":e.detail.value,
    })
  },
  //识别语音 -- 初始化
  initRecord: function () {
    const that = this;
    // 有新的识别内容返回，则会调用此事件
    manager.onRecognize = function (res) {
      console.log(res)
    }
    // 正常开始录音识别时会调用此事件
    manager.onStart = function (res) {
      console.log("成功开始录音识别", res)
    }
    // 识别错误事件
    manager.onError = function (res) {
      console.error("error msg", res)
    }
    //识别结束事件
    manager.onStop = function (res) {
      console.log('..............结束录音',res)
      console.log('录音临时文件地址 -->' + res.tempFilePath); 
      console.log('录音总时长 -->' + res.duration + 'ms'); 
      console.log('文件大小 --> ' + res.fileSize + 'B');
      console.log('语音内容 --> ' + res.result);
      if (res.result == '') {
        wx.showModal({
          title: '提示',
          content: '听不清楚，请重新说一遍！',
          showCancel: false,
          success: function (res) {}
        })
        return;
      }
      var text = that.data.questionForm.msg + res.result;
      that.setData({
        "questionForm.msg": text
      })
    }
  },
  //语音  --按住说话
  touchStart: function (e) {
    this.setData({
      recordState: true  //录音状态
    })
    // 语音开始识别
    manager.start({
      lang: 'zh_CN',// 识别的语言，目前支持zh_CN en_US zh_HK sichuanhua
    })
  },
  //语音  --松开结束
  touchEnd: function (e) {
    this.setData({
      recordState: false
    })
    // 语音结束识别
    manager.stop();
  },

})

第五步：css

.videoBtn {width: 50%;}
.videoBtn text{color:#fff;}
.videoBtnBg {background: #bdb4b4;}
.startYuyinImage {display:flex;justify-content:center;flex-flow: column;
  position: fixed;
  top: 216rpx;
  left: 50%;
  width: 240rpx;
  height: 300rpx;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 20rpx;
  color: #fff;
  text-align: center;
  margin-left: -120rpx;}
.startYuyinImage cover-image {margin:0 auto; width:64rpx;height:100rpx;}
.startYuyinImage cover-view {margin-top: 25rpx;}

 到这就已经完成了小程序自带插件：微信同声传译的简单使用        (#^.^#)