项目用到了语音识别的功能,在这里做一个记录
语音识别可以使用百度或者科大讯飞等第三方的平台,由于项目是放在公众号上面的,所以就直接使用微信的语音识别
使用微信的API,首先就是导入 import wx from 'weixin-js-sdk'
之后像后台请求接口,获取到wx.config
所需要的几个参数
语音识别准备
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
| this.$store.dispatch('Post', sendMessage).then((res) => { wx.config({ debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: res.entity.appId, // 必填,公众号的唯一标识 timestamp: res.entity.timestamp, // 必填,生成签名的时间戳 nonceStr: res.entity.nonceStr, // 必填,生成签名的随机串 signature: res.entity.signature, // 必填,签名 jsApiList: [ 'startRecord', //开始录音接口 'stopRecord', // 停止录音接口 'playVoice', //播放语音接口 'pauseVoice', //暂停播放接口 'stopVoice', //停止播放接口 'uploadVoice', //上传语音接口 'downloadVoice', //下载语音接口 'onVoicePlayEnd', // 监听语音播放完毕api 'translateVoice' // 语言识别 ] // 必填,需要使用的JS接口列表 });
wx.error(function(result) { alert('报错') // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。 alert(result + '测试报错,上线后就可以修复'); }); wx.ready(function() { // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。 }) })
|
准备阶段介绍之后,就可以开始使用了,微信的sdk使用还是很简单的
开始录音
1 2 3 4 5 6 7 8 9 10 11
| wx.startRecord({ success: function(res) { }, fail: function(res) { }, cancel: function() { // 用户拒绝授权录音 } })
|
停止录音
1 2 3 4 5 6 7 8 9
| wx.stopRecord({ success: function(res) { // 用户停止录音成功 // 成功会返回localId }, fail: function(error) { } })
|
上传音频
这一步不是必须的,看需求是否需要在服务端保存音频
1 2 3 4 5 6 7
| wx.uploadVoice({ localId: this.localId, // 需要上传的音频的本地ID,由stopRecord接口获得 isShowProgressTips: 1, // 默认为1,显示进度提示 success: function (res) { // 返回音频的服务器端ID(res.serverId) } })
|
语音识别
1 2 3 4 5 6 7
| wx.translateVoice({ localId: this.localId, // 需要识别的音频的本地Id,由录音相关接口获得 isShowProgressTips: 1, // 默认为1,显示进度提示 success: function (res) { //alert(res.translateResult); // 语音识别的结果 } });
|
到这里,语音识别的核心功能都完成了,现在可以优化一下,实现长按录音,松开识别语音,上滑取消录音
这里先说一下移动端绑定touch事件
- 开始按下
@touchstart="touchstart($event)"
- 开始移动
@touchmove="touchmove($event)"
- 松开手指
@touchend="touchend($event)"
长按开始录音
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| touchstart(event){ event.preventDefault(); // 在这里新增一个开始时间,用来记录 this.startTime = new Date().getTime(); this.timeOutEvent = setTimeout(()=>{ this.longPress() },500);//这里设置定时器,定义长按500毫秒触发长按事件,时间可以自己改,个人感觉500毫秒非常合适 return false; },
//真正长按后应该执行的内容 longPress(){ //执行长按要执行的内容,如弹出菜单 },
|
松开结束录音
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| //手释放,如果在500毫秒内就释放,则取消长按事件,此时可以执行onclick应该执行的事件 touchend(event){ event.preventDefault(); clearTimeout(this.timeOutEvent);//清除定时器 let endTime = new Date().getTime(); // 小于500说明录音时间太短 if((endTime - this.startTime) < 500){ // 说明录音时间太短 }else{ // 这里可以开始停止录音 // 语言识别可以写在录音停止成功的回调函数里面 } return false; },
|
上滑取消录音
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| touchmove(event){ event.preventDefault(); clearTimeout(this.timeOutEvent);//清除定时器 // 这个clearndiv类似一个方块,用户移入进去时,取消录音 let clearndiv = this.$refs.clearndiv let offertSet = clearndiv.getBoundingClientRect() let pageY = event.targetTouches[0].pageY let pageX = event.targetTouches[0].pageX if(pageY > offertSet.top && pageY < offertSet.bottom && pageX > offertSet.left && pageX < offertSet.right){ // 用户手指在方块中,松开手指就取消录音了 }else{ // 用户手指不在方块中 } },
|
以上就是我对微信语言识别的一些理解,如果文章由于我学识浅薄,导致您发现有严重谬误的地方,请一定在评论中指出,我会在第一时间修正我的博文,以避免误人子弟。