首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >小程序音频API踩坑手册

小程序音频API踩坑手册

作者头像
极乐君
发布2018-07-05 15:41:14
2.5K0
发布2018-07-05 15:41:14
举报
文章被收录于专栏:极乐技术社区极乐技术社区

最近公司上线一个类似小打卡的一个小程序,基于WEPY开发。其他都功能点都还好,录音跟音频播放的功能点踩各种莫名其妙的坑,社区也有不少人在提问,特写此文祭天。

产品大概的UI如下图

录音功能

相关api wx.getRecorderManager

WXML 模板

... 除了低版本样式兼容,没啥坑。

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的资源。

后续

由于产品先天原因,10分钟的录音,用户试听的时候缺少拖放功能,不方便。待完善。。。看下热度。开源自定义播放器。

作者:MarsDes

原文:https://juejin.im/post/5af53a6d51882542706404a9

本文参与 腾讯云自媒体分享计划,分享自微信公众号。
原始发表:2018-05-15,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 极乐技术社区 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档