微信小程序实现语音识别功能
原标题：微信小程序实现语音识别功能
使用小程序实现语音识别功能，由于语音识别可以直接使用各厂家的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。具体代码如下：
责任编辑：
微信小程序实现语音识别功能相关推荐
- 微信小程序语音识别java_微信小程序实现语音识别功能
原标题:微信小程序实现语音识别功能 使用小程序实现语音识别功能,由于语音识别可以直接使用各厂家的API接口,并且小程序为腾讯所有,因此考虑到可能的低延时,采用了腾讯提供的免费API接口,准确讲是腾讯语 ...
- 黯然微信小程序杂记（三）：微信小程序实现倒计时功能 附讲解教学 附源码
黯然微信小程序杂记(三):微信小程序实现倒计时功能 附超详细注释 附源码 一.功能描述 二.界面展示 三.test.wxml代码 四.test.js代码(注释很详细 很易懂) CSDN私信我,有关微信 ...
- 微信小程序实战 购物车功能
代码地址如下: http://www.demodashi.com/demo/12400.html 一.准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.com ...
- 微信小程序拼团功能页面展示
微信小程序拼团功能页面展示 一.拼团功能 拼团就是让消费者在优惠价格的吸引下,自发邀请好友组团,以优惠的价格购买商品的促销活动 二.拼团功能的作用 1.与纯粹的购物相比,这种营销方式迎合了大多数用户的 ...
- 微信小程序原生开发功能合集一：微信小程序开发介绍
一.专栏介绍 本专栏主要内容为微信小程序常用功能开发过程的介绍说明,包括开发微信小程序常用组件的封装.常用功能的开发等,提供源代码.开发过程讲解视频.完整的课程等. 组件封装: 下拉选择组件. ...
- IVX低代码平台开发——微信小程序实现抽奖功能
写在前面 通过利用可视化编程实现微信小程序的抽奖功能,带大家初步了解 iVX 的强大之处. 文章目录 写在前面 iVX开发 抽奖功能实现 iVX开发 基本介绍 iVX是一个 "零代码&quo ...
- 微信小程序-001-抽签功能-006-我的抽签-主界面
微信小程序-001-抽签功能-006-我的抽签-主界面 目录 一.wxml 二.js pages.chouqian.setqian.setqian 一.wxml <view wx:for=&qu ...
- 微信小程序与卡券功能小结
微信小程序与卡券功能小结 前段时间公司有一个微信小程序的项目,其中有与卡券打通的功能,但是微信的官方文档实在是一言难尽...找了很多资料才解决这个问题,其中涉及到卡券的领取,卡券的核销等,在这里做一个 ...
- python玩微信小程序游戏_使用python实现微信小程序自动签到功能
功能描述目标 完成多账号微信小程序每天自动签到 输出 签到成功则向微信群发送签到成功的信息 否则提示用户签到失败,需手动签到 包管理 requests itchat time threading 程序 ...
最新文章
- 迷你MVVM框架 avalonjs 学习教程14、事件绑定
- c/c++头文件函数一览表
- 如何使用 Visual Studio Code 调试 Angular Schematics 实现
- 使用Spring跟踪应用程序异常
- VS.NET提示试图运行项目时出错：无法启动调试。绑定句柄无效解决办法
- 初学者python笔记（类的内置属性）
- python使用with无需显示关闭文件
- 一、SecureCRT 8.0 客户端连接服务器
- form表单会跨域_我的Vue不小心跨域了o()o 干它
- 如何解决js引入混乱_做个笔记，图片如何实现懒加载（LazyLoad按需加载）
- 服务器为啥要搭建在2012系统,Windows Server2012R2怎么配置为DNS服务器
- 让div不占位置_开箱测评户外折叠桌椅，收纳起来真的不占位置，强行不血亏啊！...
- 目前web渗透的思路
- Matlab2017a（64位）安装包下载及详细安装步骤
- Linux内核 之 menuconfig各个选项介绍[转]
- python学习笔记——取矩阵的上三角或下三角元素
- 发送短信验证码时触发天级流控Premit：10
- 广东工业大学数据结构AnyView参考答案
- Linux上可用的Markdown编辑器
- 账号已被停用，请咨询系统管理员