项目用到了语音识别的功能,在这里做一个记录
语音识别可以使用百度或者科大讯飞等第三方的平台,由于项目是放在公众号上面的,所以就直接使用微信的语音识别
使用微信的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{
// 用户手指不在方块中
}
},
|
以上就是我对微信语言识别的一些理解,如果文章由于我学识浅薄,导致您发现有严重谬误的地方,请一定在评论中指出,我会在第一时间修正我的博文,以避免误人子弟。
