mpvue微信小程序语言识别文字

此项目是根据mpvue开发，如用原生小程序方法进行相应的参数定义修改就可以了

小程序管理后台 --> 设置 --> 第三方服务 --> 插件管理中查找插件名称「微信同声传译」

image.png

去app.json进行配置(微信同声传译详情能看到appid和更新 记录)

"plugins": {

    "WechatSI": {

      "version": "0.2.2",

      "provider": "wx069ba97219f66d99"

    }

  }

image.png

定义语音转文字组件

<template>
  <div class="auth-pop" v-if="status">
     <div class="videoText">
        <div class="videoTextTitle">
            <div  style="width:60rpx;height:60rpx;"></div>
            <div>识别中</div>
            <div>
              <img @click="closeToast" src="https://download.fengyouhui.net/fyh_internet_hospital/img/icon/video_close.png" style="width:60rpx;height:60rpx;" alt="">
            </div>
        </div>
        <div>
          <div style="text-align:center;">
              <div class="video_title">{{videoSubmitTitle}}</div>
              <div >
                <img src="https://download.fengyouhui.net/fyh_internet_hospital/img/IM/video_line.gif" alt="" style="width:613rpx;height:155rpx;display: inline-block;">
              </div>
              <div :class="videoSubmitStatus?'video_submit':'video_submit_after'" @click="stopVideo">{{videoSubmitText}}</div>
              <!-- <view  catchtouchstart="streamRecord"  catchtouchend="endStreamRecord"> 语音识别按钮 </view> -->
              <!-- <div :class="videoSubmitStatus?'video_submit':'video_submit_after'" @touchstart="touchStart" @touchend="touchEnd">{{videoSubmitText}}</div> -->
            </div>
        </div>
     </div>
  </div>
</template>

<script>
var plugin = requirePlugin("WechatSI");
let manager = plugin.getRecordRecognitionManager();

  export default {
    data() {
      return {
        videoSubmitText:'说完了',
        videoSubmitStatus:true,
        text:''
      }
    },
    model:{
      prop:'text',
      event:'changeText'
    },
    props:{
        status:{
            type:String,
            default:'default',
            required: false
        },
        videoTextBack:{
          type:Function,
        } 
    },
    watch: {
      status(value){
        // this.status = true;
        this.touchStart();
        console.log(this.status);
        console.log(this.videoSubmitStatus)
        
      }
    },
    onLoad(){
       this.initRecord()
    },
    methods:{
       //识别语音 -- 初始化
        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.result);
            if (res.result == '') {
              wx.showModal({
                title: '提示',
                content: '听不清楚，请重新说一遍！',
                showCancel: false,
                success: function (res) {}
              })
              // return;
            }
            var text = that.text + res.result;
             that.$emit('videoTextBack',text);
            // that.setData({
            //   content: text
            // })
            console.log(text)
          }
        },
        //语音  --按住说话
        touchStart: function (e) {
          // this.status = true;
          this.videoSubmitStatus = true;
          // 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();
          // this.videoSubmitText='说完了';
          // this.videoSubmitStatus = true;
          // this.status = false;
        },
      closeToast(){
        this.$emit('videoTextBack','');
        this.videoSubmitText='说完了';
        this.videoSubmitStatus = true;
        this.status = false;
      },
       stopVideo(){
        // wx.stopRecord();
        this.touchEnd();
        // this.videoSubmitTitle='识别中';
      },
    }
  };
</script>

<style scoped lang="less">
  .videoTextTitle{
    padding: 30rpx 20rpx;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    font-size: 36rpx;
    color: #202020;
  }
 .video_submit{
    padding: 15rpx 52rpx;
    border: solid 1rpx #2173F9;
    border-radius: 36rpx;
    display: inline-block;
    color: #2173F9;
    margin: 55rpx 0;
  }
  .video_submit_after{
    padding: 15rpx 52rpx;
    border: solid 1rpx #909090;
    border-radius: 36rpx;
    display: inline-block;
    color: #909090;
    margin: 55rpx 0;
  }
  .auth-pop{
    position: fixed;
    display: block;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 9;
    background: rgba(0,0,0,0.6);
  }
  .videoText{
    background: #fff;
    position: absolute;
    bottom: 0;
    width: 100%;
    border-radius:28rpx 28rpx 0px 0px;
  }
  .tab{
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    left: 0;
    top: 0;
  }
  .box {
    width: 280px;
    background: #fff;
    font-size: 15px;
    color: #8D8D8D;
    padding-top: 15px;
    border-radius: 14px;
    overflow: hidden;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    line-height: 24px;
    text-align: center;
    .p1 {
      color: #000000;
      font-size: 18px;
      line-height: 40px;
    }
    .p2{
      box-sizing: border-box;
      padding: 15px 15px;
      text-align: left;
    }
    .p3 {
      height: 50px;
      line-height: 50px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      border-top: 1px solid #DDDDDD;
      span,button {
        width: 50%;
        height: 100%;
        text-align: center;
        border: none;
        font-size: 15px;
        line-height: 50px;
      }
      .no{
        color: #FF3535;
        border-right: 1px solid #DDDDDD;
      }
      .yes {
        color: #485ED9;
        background: transparent;
        box-shadow: none;
      }
    }
  }
</style>

调用组件

<videoText :status="videoTextStatus" @videoTextBack="videoTextBack"></videoText>
//这个方法是弹出转文字框
 inquiryLanguage(){
      this.videoTextStatus = true;
      },
//这个是回调函数
      videoTextBack(value){
        this.videoTextStatus = false;
        this.content = value;
      },
videoTextStatus  //data 定义这个status true是弹语言转文字框，false隐藏