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

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

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

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

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

2.悬浮窗状态实时更新

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

3.实时日志上报

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

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

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

5.循环模式处理

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

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