推荐下载
-
2020-05-12 浏览：789
-
2020-04-04 浏览：654
-
2020-05-06 浏览：560
-
2020-05-08 浏览：545
-
2020-05-12 浏览：543
小程序 音频API采坑完全手册
发布时间:2020-10-25最近公司上线一个类似小打卡的一个小程序,基于WEPY开发。
其他都功能点都还好，录音跟音频播放的功能点踩各种莫名其妙的坑，社区也有不少人在提问，特写此文祭天
产品大概的UI如下图
相关api wx.getRecorderManager
... 除了低版本样式兼容，没啥坑。
JS 交互逻辑 录音坑之一部分手机无法上传录音文件。
原因：服务端上传文件大小限制
解决：sampleRate,encodeBitRate两者有对应要求，具体看文档，尽量调质中低音质,公司财大气粗忽略，顶配服务器跑起来。
音质越高文件文件越大，相同参数ios系统的录音文件更大。
const recorderManager = wepy.getRecorderManager() const options = { duration: 600000, // 是的没看错 10分钟... sampleRate: 8000, encodeBitRate: 20000, ... } 录音坑之二部分用户录音之后无法试听。
原因：用户拒绝授权，录音代码无做校验(不严谨哈)；苹果手机用户开了静音功能(就是左上角那个开关，这真无力吐槽吖);内存不足，开启蓝牙； 解决：录音开始前先查看麦克风授权情况，无授权不录音。代码如下
设置播放实例 obeyMuteSwitch 属性（暂只支持ios）..
第三，我也不知道，一般建议重启。。。就是这么美妙。
... methods = { // 开始录音 recording() { wepy.getSetting().then((res) => { if (!res.authSetting['scope.record']) { wepy.authorize({scope: 'scope.record'}).then(() => { recorderManager.start(options) this.startTimer() this.$apply() }, (e) => { wepy.openSetting() }) } else { recorderManager.start(options) this.startTimer() this.$apply() } }) }, } ... 录音坑之三录音时长不准(该参数列表需要)
原因：手机卡顿，延迟导致部分用户录音跟计时器不同步(你永远不知道用户用的是啥手机，我只能说蓝绿厂大坑)
解决：调用 onStop 方法回调录音时长。按理来说最长也就600s，但是后台看到有段录音时长是10000多s，目前还不知道啥原因，求解。
onLoad () { recorderManager.onStop(({tempFilePath, duration})=>{ //do something this.duration = parseInt(duration / 1000) }) } // 计时器 startTimer (){ // do something } 录音坑之四录音不完整
原因：录音过程中自动锁屏功能，来电等外部原因导致录音中断。
解决：提醒用户保持小程序运行状态；按住录音。不过我们10分钟，我怕用户手抽筋;wx.setKeepScreenOn()接口。
音频播放功能相关api wx.createInnerAudioContext
JS 交互逻辑audio组件不好用吗？是我们的UI飘了，自定义好看多啦~
播放的坑相对较少一点，建议页面只注册一个播放器，动态修改音源，相关事件只在页面onLoad注册
*动态修改音源，无法获取当前音源duration,异步!？
const innerAudioContext = wepy.createInnerAudioContext() ... onLoad ({classId, date}) { innerAudioContext.onEnded(() => { //do something }) innerAudioContext.onPlay(() => { }) innerAudioContext.onTimeUpdate(()=>{ //update Progress bar }) ... } // 计时器 startTimer (){ // do something } 播放坑听不到(好想除了听不到也没啥坑了吧)，canpaly状态需要主动触发
原因：同上，ios用户开了静音模式自己；网络原因，进度条同定时器更新，文件没有缓存至可播放状态，导致进度条播放不同步；https,https,https..部分ios无法播放https协议的资源。 解决：进度条再 onTimeUpdate 方法中更新。采用http的资源。
不做客服的运维不是好开发。手动MMP~
- 上一篇：模块化高效开发微信小程序——汽车试驾
- 下一篇：杨春文：小程序在直播产品中的技术应用
