微信小程序语音同步智能识别的实现案例_recordrecomanager

一、背景

在小程序的一些应用场景中，会有语音转文字的需求。原有的做法一般是先通过小程序的录音功能录下语音文件，然后再通过调用语音智能识别WebApi（比如百度云AI平台，科大讯飞平台）将语音文件转成文字信息，以上的做法比较繁琐且用户的体验性较差。
为解决此问题，微信直接开放了同声传译的插件，小程序作者可以直接使用该插件进行语音同声传译的开发。此文章将通过前后端整合应用的完整案例完成语音的实时转换，并将语音上传到服务端后台备份。

二、同声传译插件介绍

微信同声传译由微信智聆语音团队、微信翻译团队与公众平台联合推出的同传开放接口，首期开放语音转文字、文本翻译、语音合成接口，为开发者赋能。

1、 微信小程序后台添加插件

进入微信小程序后台–>进入设置–>第三方设置–>添加插件->搜索同声传译–>完成添加。

2、 微信小程序启用插件

在小程序app.json文件中增加插件版本等信息：

"plugins": {
   
    "WechatSI": {
   
      "version": "0.3.3",
      "provider": "wx069ba97219f66d99"
    }
  },
1
2
3
4
5
6
7
8

在页面程序文件中引入插件：

/* index.js */

const plugin = requirePlugin("WechatSI")

// 获取**全局唯一**的语音识别管理器**recordRecoManager**
const manager = plugin.getRecordRecognitionManager()
1
2
3
4
5
6

recordRecoManager 对象的方法列表：

官方开发文档：插件的语音识别管理器

三、语音同步转换的前端实现

1、界面UI与操作

UI参考微信官方的DEMO：长按按钮进行录音，松开按钮实时将录音转换为文字。

用户可对同步转换的文字进行编辑，同时可将原始语音文件与文字上传后台服务端。

2、代码实现

语音同步转换的主要代码：

//导入插件
const plugin = requirePlugin("WechatSI");
// 获取**全局唯一**的语音识别管理器**recordRecoManager**
const manager = plugin.getRecordRecognitionManager();

/**
   * 加载进行初始化
   */
 onLoad: function () {
   
 	//获取录音权限
	app.getRecordAuth();
	//初始化语音识别回调
    this.initRecord();
  },

 ...
 
/**
   * 初始化语音识别回调
   * 绑定语音播放开始事件
   */
  initRecord: function () {
   
    //有新的识别内容返回，则会调用此事件
    manager.onRecognize = (res) => {
   
      let currentData = Object.assign({
   }, this.data.currentTranslate, {
   
        text: res.result,
      });
      this.setData({
   
        currentTranslate: currentData,
      });
      this.scrollToNew();
    };

    // 识别结束事件
    manager.onStop = (res) => {
   
      let text = res.result;

      console.log(res.tempFilePath);

      if (text == "") {
   
        this.showRecordEmptyTip();
        return;
      }

      let lastId = this.data.lastId + 1;

      let currentData = Object.assign({
   }, this.data.currentTranslate, {
   
        text: res.result,
        translateText: "正在识别中",
        id: lastId,
        voicePath: res.tempFilePath,
        duration: res.duration
      });

      this.setData({
   
        currentTranslate: currentData,
        recordStatus: 1,
        lastId: lastId,
      });
      //将当前识别内容与语音文件加入列表
      this.addRecordFile(currentData, this.data.dialogList.length);
      //刷新列表
	  this.scrollToNew();
    };

    // 识别错误事件
    manager.onError = (res) => {
   
      this.setData({
   
        recording: false,
        bottomButtonDisabled: false,
      });
    };

  },

  /**
   * 按住按钮开始语音识别
   */
  streamRecord: function (e) {
   
    let detail = e.detail || {
   };
    let buttonItem = detail.buttonItem || {
   }
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
84
85
86
87
88
89
90
91
92
93
94
95
96