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

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

---

一、登录小程序后台

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

二、添加插件

如果怎么搜索都搜不到这个插件，哪怕你去修改小程序类目，也无法搜索到插件的话
那就只能去服务市场添加这个插件了。 微信服务市场
点击添加，然后选择你需要用到插件的小程序，就可以了

关于无法搜索到插件问题，官方的回复是：可能是小程序类目问题导致无法添加该插件。

三、使用插件前的配置

1、添加成功之后，在插件管理中这样看到。点击详情查看插件的appid和最新版本号。后面需要用到

2、在app.json文件的plugins中填入插件appid和版本号。(小程序项目的app.json的plugins字段中可以声明使用插件)。如下图

四、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。 微信同声传译开发文档

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

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