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

Dear 丶 2022-05-25 11:35 308阅读 0赞

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

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

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

### 后后续 ###

为什么我知道这么多？椅子有定钉坐不下，必须优秀！

![1 1][]

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

**您可能感兴趣的：**

*  [Fundebug上线微信小游戏错误监控！支持自动截屏！][Fundebug 1]
 *  [Fundebug: 小程序的运维中心][Fundebug_]

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

### 关于Fundebug ###

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

[![2018121912254161][]][2018121912254161]

[Fundebug]: https://www.fundebug.com/
[1]: https://user-gold-cdn.xitu.io/2018/5/11/1634e05446d4e647?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[wx.getRecorderManager]: https://link.juejin.im?target=https%3A%2F%2Fdevelopers.weixin.qq.com%2Fminiprogram%2Fdev%2Fapi%2FgetRecorderManager.html
[wx.createInnerAudioContext]: https://link.juejin.im?target=https%3A%2F%2Fdevelopers.weixin.qq.com%2Fminiprogram%2Fdev%2Fapi%2FcreateInnerAudioContext.html
[1 1]: https://user-gold-cdn.xitu.io/2018/5/11/1634e63c3b06174e?imageView2/0/w/1280/h/960/format/webp/ignore-error/1
[Fundebug 1]: https://blog.fundebug.com/2018/05/04/fundebug-support-wechat-game/
[Fundebug_]: https://blog.csdn.net/qq_40126542/article/details/80112657
[2018121912254161]: /images/20220525/5d146a3234054794ae6f6f4bee6a7a45.png