今天来聊一聊,微信小程序 录音功能和 webSocket的那些事(坑)
一:微信录音功能流程
onShow(){
// 进入页面判断用户是否授权,如果已授权就直接录音就可以了
authSetting = wx.getSetting({
success(res){
// authSetting列表有很多属性,具体参考微信小程序官方文档
res.authSetting['scope.record'] // 是否授权录音功能
}
});
};
ps:开发者工具预览唤起录音功能时,一定要确保自己的电脑没有被手动关闭 录音功能。
否则会唤起失败,且不会有任何提示(我就被这个问题坑了半天/(ㄒoㄒ)/~~)
未授权,未授权有两种情况:
一,是用户主动拒绝了授权。
二,是用户从未弹起过授权窗口。可以用一个变量来记录这种状态;
根据状态来判断,是重新调用录音授权,还是去唤起用户手机 设置页面,手动打开录音
第一种:重新授权打开录音
wx.authorize({
scope:'scope.record',
success(res){
// wx.getRecorderManager() // 如果用户同意了,就可以获取录音管理器(这个录音管理器可以全局注册,使用是直接调用就好了)
}
})
第二种:调起客户端小程序设置界面,返回用户设置的操作结果
wx.openSetting({
success(res){
// 回调结果,用户是否手动开启了录音授权
res.authSetting['scope.record']
}
})
当录音授权解决之后,用户开始正常录音。由于唤起录音是为了做一个 语音的测评,所以需要给用户的语音打一个分数。所以这里用到了第三方的评分插件。接下来使用 webSocket
二:webSocket流程
1,先建立与第三方连接
socketTask = wx.connectSocket({
url:'wss://example.qq.com',
header:{
// 一般项目都会封装好 'content-type' 的请求,所以这个可以不用在单独写;
}
})
通过 wx.connectSocket() 接口创建返回 WebSocket 任务
socketTask.onOpen(res => { // 监听 WebSocket 连接是否打开
// 与第三方连接成功后,再开始录音。不然可能录音已经开始了,但是与第三方连接还未成功,会出现语音片段丢失的情况。之前录音授权已经打开,现在是需要调用微信录音
RecorderManager.start({
duration: 注意:默认是60000毫秒,如果你的录音需求需要超过60秒,那么这个参数就需要传具体录音的时长(或者超过),否则录音会录制60秒后,自动暂停了
format:音频格式(可以定义自己想要的格式)
numberOfChannels:录音通道数默认是 2,有些第三方只支持 1
})
socketTask.send({ // 给第三方发送第一个消息。
data: 需要给第三方 JSON.stringify({ 数据内容根据使用的第三方要求传送就可以了})
});
})
监听第三方返回的消息
socketTask.onMessage(res =>{
// 监听返回的消息
// 录音过程中,可能会因为网络原因导致第三方返回一些错误信息,如果不想用户在录音过程中,看到这些消息,可以在语音暂停时,在监听此消息。
})
实时监听语音,并且给第三方发送语音片段(在页面onShow里面)
socketTask.onFrameRecorded(res=>{
// 监听过程中 用 readyState 来判断,与第三方是否断开了连接
// 如果已经断开连接,就重新建立连接
// 正常连接中,则不停发送消息
socketTask.send({
data:res.frameBuffer
})
// 这个判断我页不确定有什么用,反正需要最后给发送一个消息,不然就有毛病 ( ̄▽ ̄)"
if (res.isLastFrame) {
this.socket.send({
data: this.uuid,
success() {
console.log('最后一次发送- 成功');
},
});
}
})
注释:上述大致是我第一次使用webSocket的场景,以及遇到的一些问题。但是连接过程中出现了苹果手机(iphone7/12)最后没有监听到消息回来的问题。目前还不清楚是什么嘛原因。欢迎各路大神前来指教
ps:第一次写技术文档,希望以后继续 O(∩_∩)O