当前位置:   article > 正文

微信小程序语音转文字(插件:微信同声传译)-全网最详细介绍_微信小程序同声传译插件

微信小程序同声传译插件

微信小程序中将语音转文字,可以使用插件:微信同声传译。下面介绍怎么引入插件,以及使用插件前需要做什么配置。


一、登录小程序后台

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

二、添加插件

如果怎么搜索都搜不到这个插件,哪怕你去修改小程序类目,也无法搜索到插件的话
那就只能去服务市场添加这个插件了。 微信服务市场
点击添加,然后选择你需要用到插件的小程序,就可以了
添加插件
关于无法搜索到插件问题,官方的回复是:可能是小程序类目问题导致无法添加该插件。

三、使用插件前的配置

1、添加成功之后,在插件管理中这样看到。点击详情查看插件的appid和最新版本号。后面需要用到
在这里插入图片描述
2、在app.json文件的plugins中填入插件appid和版本号。(小程序项目的app.json的plugins字段中可以声明使用插件)。如下图
appJson

四、demo代码实现

1、wxml代码:主要就俩部分,一个文本输入框,一个语音识别按钮

<view class="yuyinWrap">
  <!-- 文本输入框:可以手动输入,也可以语音识别输入 -->
  <textarea
    class='yuyinCon' placeholder='请输入内容' value='{{content}}'
  ></textarea>
  <!-- 语音按钮 touchStart手指触摸开始 touchEnd手指触摸结束 -->
  <view>
    <button
      class="yuyinBtn {{recordState==1 || recordState==2 ? 'yuyinBtnBg':''}}"
      bindtouchstart="touchStart" bindtouchend="touchEnd"
    >
      <text wx:if="{{recordState == 0 || recordState == 3}}">按住 说话</text>
      <text wx:if="{{recordState == 1}}">松开 结束</text>
      <text wx:if="{{recordState == 2}}">语音识别中...</text>
    </button>
  </view>
</view>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17

2、js代码

// 引入插件
const plugin = requirePlugin('WechatSI');
// 获取全局唯一语音识别管理器
const manager = plugin.getRecordRecognitionManager();
Page({
  data: {
  	// 录音状态0未在录音1正在录音2语音识别中3语音识别结束
    recordState: 0, 
    content: '', // 内容
  },
  onLoad() {
  	this.initSI();
  },
  // 插件初始化
  initSI() {
    const that = this;
    // 有新的识别内容返回,则会调用此事件
    manager.onRecognize = function (res) {
      console.log(res);
    };
    // 正常开始录音识别时会调用此事件
    manager.onStart = function (res) {
      console.log('成功开始录音识别', res);
      // 开始录音时-抖动一下手机
      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 = 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,
        });
        return;
      }
      var text = that.data.content + res.result;
      that.setData({
        content: text,
      });
    };
  },
  // 手指触摸动作-开始录制语音
  touchStart() {
    this.setData({
      recordState: 1,
    });
    // 语音识别开始
    manager.start({
      duration: 30000,
      lang: 'zh_CN',
    });
  },
  // 手指触摸动作-结束录制
  touchEnd() {
    this.setData({
      recordState: 3,
    });
    // 语音识别结束
    manager.stop();
  },
});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83

3、wxss代码

.yuyinWrap {
  position: relative;
}
.yuyinCon {
  border: 1px solid #ccc;
  margin: 0 auto;
  padding: 10rpx 10rpx 70rpx;
}
.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 {
  color: #000;
  border-radius: 0;
  border: none;
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27

五、踩坑记录

1、在录制语音时,报错-30007, -30012的错误码的时候。
官方文档说明:先是开始录制时,启动参数错误,报30007错误码。启动报错,结束自然也报错30012。 微信同声传译开发文档

错误码Value
-30007start启动参数错误
-30012当前无识别任务进行时调用stop错误

最后发现:在启动时,参数只传了lang识别的语言参数,没传duration录音时长参数。
我加上这参数duration,然后就能成功录制识别语音了。
但在开发文档中,这俩参数都不是必传参数。(这个问题有点懵)
2、-30003报错码,不要惊慌。你的语音识别功能没问题。这个错误表示录制语音时间太短,无法识别

错误码Value
-30003录音帧数据未产生或者发送失败导致的数据传输失败

3、想知道其他错误码信息:请查看 微信同声传译开发文档

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/人工智能uu/article/detail/797880
推荐阅读
相关标签
  

闽ICP备14008679号