微信小程序语音转文字——同声传译

语音文件的播放使用audio标签的话，安卓支持，苹果不支持

登录: 微信小程序后台，在设置---->第三方设置---->插件管理---->添加插件，搜索’微信同声传译’

app.json

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

封装组件

<!--pages/menu/components/audioText/audioText.wxml-->
<view class="yuyinWrap bg">
  <!-- 文本输入框：可以手动输入，也可以语音识别输入 -->
  <van-field type="textarea" bindinput="edit" autosize model:value="{{ content }}" placeholder="长按按钮输入语音或直接输入文字" />
  <!-- 语音按钮 touchStart手指触摸开始 touchEnd手指触摸结束 -->
  <view style="cursor: pointer;" class="w100 center mt-10 relative">
    <view class="absolute w100 h100" style="left: 0;top: 0;z-index: 99;" bindtouchstart="touchStart" bindtouchend="touchEnd"></view>
    <image wx:if="{{recordState == 0 || recordState == 3}}" style="width: 260rpx; height: 68rpx;" src="../../../../assets/imgs/speak-1.png" alt="" />
    <image wx:if="{{recordState == 1}}" style="width: 260rpx; height: 68rpx;" src="../../../../assets/imgs/speak-2.png" alt="" />
    <image wx:if="{{recordState == 2}}" style="width: 260rpx; height: 68rpx;" src="../../../../assets/imgs/speak-3.png" alt="" />
  </view>
</view>

// pages/menu/components/audioText/audioText.js
// 引入插件
const plugin = requirePlugin('WechatSI');
// 获取全局唯一语音识别管理器
const manager = plugin.getRecordRecognitionManager();
import {
  wxp,
  uploadWx,
  baseURL,
} from '../../../../utils/index'
Component({
  options: {
    addGlobalClass: true,
  },
  /**
   * 组件的属性列表
   */
  properties: {

  },
  lifetimes: {
    attached: function () {
      // 在组件实例进入页面节点树时执行
      this.initSI();
    },
    detached: function () {
      // 在组件实例被从页面节点树移除时执行
    },
  },
  /**
   * 组件的初始数据
   */
  data: {
    // 录音状态0未在录音1正在录音2语音识别中3语音识别结束
    recordState: 0,
    content: '', // 内容
    url: '',
  },
  /**
   * 组件的方法列表
   */
  methods: {
    // 插件初始化
    initSI() {
      const that = this;
      // 有新的识别内容返回，则会调用此事件
      manager.onRecognize = function (res) {
        console.log(res);
      };
      // 正常开始录音识别时会调用此事件
      manager.onStart = function (res) {
        console.log('成功开始录音识别', res);
        wx.showToast({
          title: '开始录音',
          icon: 'none'
        })
        // 开始录音时-抖动一下手机
        wx.vibrateShort({
          type: 'medium'
        });
      };
      // 识别错误事件
      manager.onError = function (res) {
        console.error('error msg', res);
        const tips = {
          '-30003': '说话时间间隔太短，无法识别语音',
          '-30004': '没有听清，请再说一次~',
          '-30011': '上个录音正在识别中，请稍后尝试',
        };
        const retcode = res?.retcode.toString();
        retcode &&
          wx.showToast({
            title: tips[`${retcode}`],
            icon: 'none',
            duration: 2000,
          });
      };
      //识别结束事件
      manager.onStop = (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,
          });
          return;
        }
        wx.showToast({
          title: '正在转换文字',
          icon: 'none'
        })
        var text = res.result;
        uploadWx(res.tempFilePath).then(response => {
          if (response.statusCode == 200 && JSON.parse(response.data).code == 200) { //相当于success回调
            let resp = JSON.parse(response.data)
            if (resp.code == 200) {
              wx.showToast({
                title: '转换成功'
              });
              this.setData({
                content: text,
                url: baseURL + resp.fileName,
              });
              this.triggerEvent("getAudio", {
                content: text,
                url: baseURL + resp.fileName,
              });
            } else {
              wx.showToast({
                title: "上传失败，请重新录制",
                icon: 'none',
                duration: 2000
              })
              // this.reset()
            }
          } else {
            wx.showToast({
              title: "上传失败，请重新录制",
              icon: 'none',
              duration: 2000
            })
            // this.reset()
          }
        }).catch(() => {
          wx.showToast({
            title: "上传失败，请重新录制",
            icon: 'none',
            duration: 2000
          })
          // this.reset()
        })

      };
    },
    // 重新上传
    reset() {
      this.setData({
        recordState: 0,
        content: '',
        url: '',
      });
      this.triggerEvent("getAudio", {
        content: '',
        url: '',
      });
    },
    edit() {
      this.triggerEvent("getAudio", {
        content: this.data.content,
        url: this.data.url,
      });
    },
    // 手指触摸动作-开始录制语音
    touchStart() {
      // this.reset()
      this.setData({
        recordState: 1,
      });
      // 语音识别开始
      manager.start({
        duration: 60000,
        lang: 'zh_CN',
      });
    },
    // 手指触摸动作-结束录制
    touchEnd() {
      this.setData({
        recordState: 3,
      });
      // 语音识别结束
      manager.stop();
    },
  }
})

/* pages/menu/components/audioText/audioText.wxss */
.yuyinWrap {
  position: relative;
}

.yuyinCon {
  /* border: 1px solid #ccc; */
  width: 100% !important;
  margin: 0 auto;
  padding: 20rpx;
  box-sizing: border-box;
}

.yuyinBtn {
  width: 70%;
  height: 70rpx;
  /* position: absolute; */
  /* right: 112rpx; */
  /* bottom: 12rpx; */
  border: 1px solid #eee;
  background: #fff;
  line-height: 62rpx;
  font-size: 28rpx;
}

.yuyinBtnBg {
  background: #eee;
}

.yuyinBtn::after {
  color: #000;
  border-radius: 0;
  border: none;
  width: 100%;
}

组件的使用

<view class="label "><text class="red mr-2">*</text>语音描述详情</view>
<view class="mlr-16 pd-20 bg pt-20">
    <audio-text class="w100" bind:getAudio="getAudio"></audio-text>
</view>

getAudio(e) {
    console.log(e.detail)
    this.setData({
      soundRecordPath: e.detail.url,  //文件
      recordingFile: e.detail.content, //文字
    })
},