评论

宝宝闪卡小程序 - 音乐播放器设计

宝宝闪卡的音乐播放器设计

在做宝宝闪卡的过程中,为了降低孩子盯着屏幕的时间,得到了一些建议是希望可以加入儿歌,让孩子在起床或者睡前的时候磨耳朵。因为小程序本身有后台播放的能力,所以无论是直接用手机播放,或者通过蓝牙连接智能设备,都能够在孩子玩耍的时候同时接受一些熏陶,所以再周末的时候,利用空闲时间加上了这个功能。

在本身的产品设计上,儿歌不应该脱离闪卡的设计作为独立的存在,所以同样把功能入口加在了首页的卡包上面,由此进入的儿歌列表,可以契合孩子原本看的卡片的内容,通过有韵律的反复重复,增加孩子的记忆。为了后续的拓展,我在音频库的数据设计上,不仅关联了卡包,也以标签的形式关联了卡片单词内容,这样后续针对卡片做拓展的时候,可以有效的筛选出相关的儿歌音频。

开发的过程中其实整体设计了两部分,一部分是播放器页面,包含播放、暂停、进度、循环模式、切换儿歌等功能,再就是为了方便退出页面后方面对播放器进行控制,于是在部分关键页面增加了播放器悬浮窗组件,其主要的意义在于展示当前的播放状态,以及快速的进入播放器页面,以下主要分享几个主要的实现上的细节。

1.播放器全局操作网络监控

为了更直观的展现网络状况,或通知用户因为网络问题导致的播放失败,在所有的用户操作前均添加统一的网络检测,如果getNetworkType结果不符合预期,则toast展示提醒。

2.悬浮窗状态实时更新

当儿歌在后台播放的时候,是可以在ios或者安卓的控制中心进行控制的,在播放的过程中微信也会有自身的播放图标可以快捷关闭,为了响应控制状态,播放器的播放数据均在app.globalData进行更新,在组件中新增了一个观察者,当globalData中的数据发生变化时,组件的状态也要进行相应的更新。

3.实时日志上报

针对部分用户反馈的偶现播放、页面加载失败等情况,对小程序关键请求节点增加实时日志上报,这样出问题的时候可以很方便在小程序管理后台进行近查看,针对不同类型的错误,还可以增加不同的关键词进行过滤,日志会保留七天。不过虽说是实时日志,但经过实测,日志上报有着较大的延迟,不过好在需求并非特别强烈,目前已经满足需求。

4.ios与安卓表现表现不一致

在播放器页面,会在onLoad中对音乐进行播放,所以当页面退出后,页面执行了unLoad,再次进入的时候会重新执行播放,在安卓手机中无任何影响,但是在ios中音频会从头开始播放。所以针对通过悬浮窗快捷进入的方式,增加参数控制,不在对音频实例进行重新赋值。

5.循环模式处理

循环模式支持列表循环与单曲循环,当设置单曲循环时,播放应该重复循环,但是当手动点击切歌时,应该可以正常切换。此处只应该处理backgroundAudioManager的onEnded事件即可。

除了以上细节外,其他的实现相对比较简单,但是在自己调整播放的动画效果时还是花了不少时间,也在想后续播放器是不是可以直接做成插件,可以更方便在不同小程序之间迁移。后续在功能迭代的过程中,也会在这记录一些实现的过程,边做边记录。

最后一次编辑于  11-25  
点赞 2
收藏
评论

2 个评论

  • 谋谋谋
    谋谋谋
    11-26

    针不戳 如果能开源代码那就更不错了

    11-26
    赞同
    回复
  • e^iπ+1=0
    e^iπ+1=0
    11-25

    学习了,厉害啊


    11-25
    赞同
    回复
登录 后发表内容