小程序 音频API采坑完全手册

小编推荐:Fundebug专注于JavaScript、微信小程序、微信小游戏,Node.js和Java实时BUG监控。真的是一个很好用的bug监控费服务,众多大佬公司都在使用。

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

小程序 音频API采坑完全手册_第1张图片

 

录音功能

相关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分钟的录音,用户试听的时候缺少拖放功能,不方便。待完善。。。
看下热度。开源自定义播放器。

后后续

为什么我知道这么多?椅子有定钉坐不下,必须优秀!

小程序 音频API采坑完全手册_第2张图片

不做客服的运维不是好开发。手动MMP~

您可能感兴趣的:

  • Fundebug上线微信小游戏错误监控!支持自动截屏!
  • Fundebug: 小程序的运维中心


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

关于Fundebug

Fundebug专注于JavaScript、微信小程序、微信小游戏、支付宝小程序、React Native、Node.js和Java实时BUG监控。 自从2016年双十一正式上线,Fundebug累计处理了9亿+错误事件,得到了Google、360、金山软件、百姓网等众多知名用户的认可。欢迎免费试用!

你可能感兴趣的:(前端开发,微信小程序)