原标题：微信小程序实现语音识别功能

使用小程序实现语音识别功能，由于语音识别可以直接使用各厂家的API接口，并且小程序为腾讯所有，因此考虑到可能的低延时，采用了腾讯提供的免费API接口，准确讲是腾讯语音的“一句话识别”接口。网络整体框架是：小程序用户使用手机客户端录入语音，采集之后反馈到自己搭建的服务器，由服务器转发到腾讯语音识别后台，拿到识别文本后反馈到小程序前台，如下图：

本次推送用来阐述微信客户端的代码实现：

总述：首先要实现一个小程序的客户端代码需要考虑的如下问题点：

一、JS文件实现.

1、需要考虑小程序在实际上线之后只能使用https请求，且域名必须备案，因此需要提前准备已经备案的域名并在公众平台登记(此域名可以使用二级域名)。

2、因为需要进行录音，因此需要重点考虑对于recordmanager的使用。

3、由于录音文件需要上传服务器，因此要考虑uploadfile的使用。

4、由于返回的识别文本很有可能存在个别字体识别出错的问题，为方便起见，提供对于返回的文本进行编辑的控件textarea(此控件腾讯不推荐直接操作value，但是在实际应用中没发现问题，暂时使用)。

5、为了方便统计用户信息，需要采集用户的唯一识别码openid并索要session_key。

6、参考一些成熟的程序，一般提供一个用户和开发者交流的通道，因此添加一个about界面，用于跳转之后用户可以输入一些对于程序的开发和意见提交给开发者。

二、WXML文件布局

7、由于recordmanager的API需要具备touchstart和touchstop的配合，为了界面更加形象美观，因此使用image控件来实现触摸绑定事件。

8、如JS部分的第4条，还需要一个textarea来进行信息的展示以及提供给用户一个在线编辑的区域。

三、WXSS样式

9、样式部分主要考虑到实际使用，在界面的下方提供文本删除，文本一键拷贝，语音录入以及页面跳转接口。

对于如上阿拉伯数字列举的9个知识点，如下一一提供代码展示，全部代码打包在最后(对于代码中标记为XXXXXXXX的部分涉及个人域名信息，请实际测试时更换)。

1、程序中所有的https请求，代码如下：

此处为index.js中得到用户的code之后通过https的get请求发送到服务器，用来获取到用户的唯一识别号。服务器得到code之后向腾讯后台获取用户的唯一openid并给出临时用的session_key。服务器将openid储存在本地，将session_key反馈给用户侧保存，用来作为用户的临时ID。

此处为index.js中在使用recordmanager得到用户的一次录音文件之后要使用uploadfile提交到服务器。在uploadfile的返回数据中，得到的是一个字符串，需要使用JSON的parse方法将其转为JSON键值对，对于获取到的数据保存在word中，并实时更新textarea的信息呈现给用户。

此处为about.js中使用https的get请求提交用户的使用感受。由于用户侧本地保存了临时ID为session_key，因此为了判断是哪位用户的建议，需要将session_key和用户建议一并反馈到服务器。此处的success回调仅用来调试。

2、Recordmanager的使用：

由于此处腾讯的API使用的是一句话识别，最大的识别时长是60s，而对于用户而言，时长应该是不可见的，而且一次性录音时间过长，导致回传的时延更大，实际体验更加不好，因此考虑在代码层面解决此问题，牺牲的是识别成功率的一定程度降低。实际的实现方式是在用户侧每10s生成一个语音文件进行传输，设置一个布尔变量用来检测用户是否还在录音，如果还在录音的话将立即开启下一个录音文件。代码如下：

此段代码通过设定录音参数，当用户触摸了录音开始，即开启录音，并直接注册了录音结束的onstop回调函数，在回调函数中通过touchOrNot变量判断是否继续录音。一次录音结束之后立即调用如下的reconigz函数进行语音识别，主体部分是前文描述过得https请求，代码如下：

另外需要对于touchOrNot变量进行维护的是下段代码：

用户录音结束之后除了维护布尔变量之外，更重要的是要触发recordmanager的onstop回调函数。

3、Uploadfile的使用：

此函数本质上就是一个https调用，需要注意的就是name需要和服务器端进行对应，另外就是回传的数据是字符串，需要使用JSON方法转为键值对才能使用。

4、Textarea的使用：

小程序官方文档针对这个空间的第四点中写不建议直接对于用户的输入进行编辑，但是由于本次的数据本身就确定来自于服务器代码，因此就不按照这个要求来了。在index.js中定义一下textarea的数值，考虑到如下几个因素都会影响这个值，因此需要另外定义一个words变量来同步数据。

1、每次语音识别之后需要将数据添加到textarea中，由于textarea作为js文件的data变量，不方便直接进行赋值，因此定义一个words变量来承接数据变化；

2、由于已经将文本的数据作为一个变量，因此需要针对用户每次编辑的数据都要通过bindinput函数来更新words和textarea的value值。

5、OpenId和session_key的使用：

如前文所述，OpenId是用户唯一辨识ID，session_key是腾讯派发给开发者的用户针对这一小程序的临时ID，用户在打开小程序之后可以通过如下方法检查session_key是否过期，如果没有过期，那么小程序在核心代码层面会保证此次会话的session_key有效。直接将检查方法放到代码的方法中：

因此主要的考虑方向是如果用户没有使用过或者session_key过期了。根据小程序的说明，需要调用reLogin方法来获取到用户的code(有效期为单次5分钟)，然后上传到后台服务器，后天服务器拿着这个code并着appid(小程序ID)等信息向腾讯获取到openid和session_key，服务器将这两个数据绑定之后存入到数据库，并将session_key回送给小程序保存在本地。代码如下：

6、About界面的添加：

由于程序终究是要上线的，因此总不能让程序像一个断了线的风筝，而且无法得到任何的市场反应的小程序终究也无法再进步。因此很有必要添加一个用户意见反馈的界面。此界面简单，如果前面看的差不多了，由于此界面主要是一个https请求，此界面可以直接看代码了。

由于需要区分提建议的人，因此需要同时从本地存储中拿到session_key并着意见一起提交到服务器。

7、界面的录音方式实现：

由于录音需要两个动作：启动和停止。因此可以直接使用小程序提供的控件方法bindtouchstart和bindtouchstop。可以使用button或者image控件绑定，由于图片的绑定显示效果更好，本次使用一个话筒图片来实现。

布局文件中涉及一个textarea文本输入框用于显示和编辑，将value设置为变量。另外针对第三个图片绑定触摸开始和结束时间用来控制录音API的动作。最后为一个text用来跳转到建议页面。

8、录音文件的删除和拷贝：

在第7步布局文件中已经看到有删除和拷贝的事件绑定，其中删除事件直接将textarea的value和words置为空即可，拷贝事件使用小程序的粘贴板方法setClipboardData。具体代码如下：

责任编辑：