QQ音乐电台小程序的核心功能开启电台好友卡片引导页(引导用户用微信登录QQ音乐或开启冷启动)冷启动卡片详情(好友相似度,好友偏好,评论)歌曲播放页(播放暂停 ...
QQ音乐电台小程序的核心功能
开启电台
好友卡片
引导页(引导用户用微信登录QQ音乐或开启冷启动)
冷启动
卡片详情(好友相似度,好友偏好,评论)
歌曲播放页(播放暂停,歌词滚动,收藏歌曲,切换歌曲,听歌流水上报,背景魔法色,适配)
miniplayer (切换歌曲,状态同步)
涉及播放歌曲状态同步,不能使用audio组件。而音频播放API本质上是借助微信native的播放组件。
使用wx.navigateTo() 跳转到应用内的某个页面,会保留当前页面。点击左上角返回,之前页面会触发onShow监听页面显示,不会触发onLoad事件。播放页和首页miniplayer状态同步相关逻辑处理应该在onShow事件监听。
歌曲信息以及变更(包括歌曲列表,播放状态,切换音频,专辑图,歌曲名,歌手等)存储在小程序提供的storage下,方便不同页面数据同步
音频组件API目前没有提供类似audio的onTimeUpdate事件,需要开了一个定时器做歌词滚动,缺点是定时器做歌词渲染有不太精准。好消息是:微信后期会支持OnTimeUpdate事件。
歌词处理相关逻辑如下:
根据专辑图拉取对应十六进制的魔法色。有些色值较亮,有点刺眼,这里需要对色值转为HSL通过降低饱和度S和亮度L来使得背景色看着柔和。
将后台返回十六进制,转为RGB值
RGB转为HSL
降低HSL 中S饱和度,L亮度让背景色不刺眼