We may encounter this kind of situation in our work, we need to use WeChat voice recognition to assign content and enhance the user's experience, commonly known as the so-called force

Two, the effect

Refer to the article below

WeChat applet -- get voice and convert voice to text (plug-in: WeChat simultaneous interpretation)

3. Nanny level course

3.1 Add a plug-in to the background of the Mini Program: WeChat simultaneous interpretation

3.1.1 Settings -> Third Party Settings -> Add Plugin

3.1.2 Search plugin

3.1.3 After successfully adding, click Details

3.1.4 Copy its AppID and latest version number (useful for later order)

3.2 Configuration items

3.2.1 WeChat Native Mini Programs

Go to app.json for configuration

Among them, the value of version corresponds to the above version number, and the value of provider corresponds to the above AppID

"plugins": {
    "WechatSI": {
      "version": "0.3.4",
      "provider": "wx069ba97219f66d99"
    }
},

3.2.2 uniapp configuration

In the manifest.json file -> source view

 "plugins" : {
        "WechatSI" : {
            "version" : "0.3.4",
            "provider" : "wx069ba97219f66d99"
        }
    }

3.3 Page display

3.3.1 wxml code

<view class="yuyinWrap">
  <textarea class='yuyinCon' placeholder='请输入内容' value='{
   
   {content}}'></textarea>
  <!--  -->
  <view class=''>
    <button class="yuyinBtn {
   
   {recordState == true ? 'yuyinBtnBg':''}}" 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-image src="../resource/image/yuyin-min.png"></cover-image>
    <cover-view>开始语音</cover-view>
  </cover-view>
</view>

3.3.2 js code

Refer to the official documentation

WeChat Simultaneous Interpretation | WeChat Open Documentation

const app = getApp();
//引入插件：微信同声传译
const plugin = requirePlugin('WechatSI');
//获取全局唯一的语音识别管理器recordRecoManager
const manager = plugin.getRecordRecognitionManager();
 
Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    //语音
    recordState: false, //录音状态
    content:'',//内容
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //识别语音
    this.initRecord();
  },
  // 手动输入内容
  conInput: function (e) {
    this.setData({
      content: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('..............结束录音')
      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.content + res.result;
      that.setData({
        content: 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();
  },
})

3.3.3 css code

/* pages/yuyin/yuyin.wxss */
 
.yuyinWrap {
  position: relative;
  margin-top:300rpx;
}
 
.yuyinCon {
  border: 1px solid #ccc;
  margin: 0 auto;
  padding: 10rpx 10rpx 70rpx;
}
 
.yuyin {
  position: absolute;
  bottom: 0;
  left: 48rpx;
  font-size: 36rpx;
  color: #999;
  padding-bottom: 10rpx;
}
 
.yuyin icon.iconfont {
  font-size: 34rpx;
  padding: 0 17rpx 15rpx;
  border-radius: 50%;
  background: #73dbef;
  margin-right: 14rpx;
  color: #fff;
}
 
.consultYuyin {
  height: 100%;
  width: 90%;
}
 
.icon-jianpan1 {
  position: absolute;
  left: 10rpx;
  bottom: 6px;
  color: #606267;
  font-size: 60rpx;
}
 
.yuyinBtn {
  width: 70%;
  height: 70rpx;
  position: absolute;
  right: 112rpx;
  bottom: 12rpx;
  border: 1px solid #eee;
  background: #fff;
  color: #606267;
  line-height: 62rpx;
}
 
.yuyinBtnBg {
  background: #eee;
}
 
.yuyinBtn::after {
  /* background: #fff; *//* color: #000; */
  border-radius: 0;
  border: none;
}
 
.startYuyinImage {
  position: fixed;
  top: 210rpx;
  left: 50%;
  width: 190rpx;
  height: 240rpx;
  background: rgba(0, 0, 0, 0.6);
  border-radius: 20rpx;
  color: #fff;
  text-align: center;
  margin-left: -95rpx;
}
 
.startYuyinImage cover-image {
  margin: 30rpx auto;
  width: 100rpx;
  height: 100rpx;
}
 
.startYuyinImage cover-view {
  margin-top: 25rpx;
}