一.录音按钮对应的事件
我们开发的功能是长按一个按钮开始录音,用到视图层的事件机制。
事件分为冒泡事件和非冒泡事件,事件绑定的写法同组件的属性,以 key、value 的形式。bind事件绑定不会阻止冒泡事件向上冒泡,catch事件绑定可以阻止冒泡事件向上冒泡。
longpress:长按事件,longtap(也是长按,被取代);tap:手指触摸后马上离开;touchend:手指触摸动作结束。无论是长按事件还是普通触摸事件,都会触发手指触摸动作结束事件。
二.录音时,播放背景音乐 (长按事件触发录音)
innerAudioContext 实例,可通过 wx.createInnerAudioContext 接口获取实例。创建内部 audio 上下文 InnerAudioContext 对象。配置对象的属性,使用InnerAudioContext.play()进行播放,在播放中才能获得音频的长度,InnerAudioContext.onPlay(function callback):监听音频播放事件,number duration
当前音频的长度(单位 s)。只有在当前有合法的 src 时返回(只读)。(只有在音频播放事件中才能进行录音,因为播放网络音频文件需要缓冲,播放本地尚未尝试)
recorderManager:全局唯一的录音管理器,使用recorderManager.start(Object object)开始录音。
三.判断录音时长,然后决定是否上传到七牛云,再然后将录音相关信息上传到服务器。
1.录音时长判断,使用全局定时器,在录音开始时,进行计时,长按结束之后,立马清除计时, 使用innerAudioContext.stop()停止播放,使用recorderManager。stop()停止录音,
关键部分:使用recorderManager.onStop(function(){})清除停止录音的回调,因为后面反复录音时,这是回调属于这个对象,后面上传音频文件的功能都是卸载录音停止之后的回调里的
使用然后判断是否时间合格。合格的话,在录音回调里调用服务端接口,获得七牛云上传token,使用.then(res => {})回调的形式,在使用微信的上传接口,小程序后台需配置uploadFile合法域名,var oploadToQn = wx.uploadFile({
url: 'https://up.qbox.me', //华东
filePath: that.audioUrl,
name: 'file',
formData: {
key: myKey,
token: uToken
},
header: {
'content-type': 'multipart/form-data'
},
success: function(res) {
在这里调用保存相关录音信息到服务端的接口,成功之后,携带参数,跳转页面
}
重点部分:录音停止回调属于全局配置,后面录音时间端,如果不重置配置,就会调用上次上传成功时配置的录音停止回调,然后上传了不合格的音频文件。