录音功能和 webSocket的那些事(坑)

533 阅读3分钟

今天来聊一聊,微信小程序 录音功能和 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