小程序模板网

《QQ音乐小电台》小程序开发

QQ音乐电台小程序的核心功能开启电台好友卡片引导页(引导用户用微信登录QQ音乐或开启冷启动)冷启动卡片详情(好友相似度,好友偏好,评论)歌曲播放页(播放暂停 ...

 
 

 

 

QQ音乐电台小程序的核心功能

  1. 开启电台

  2. 好友卡片

  3. 引导页(引导用户用微信登录QQ音乐或开启冷启动)

  4. 冷启动

  5. 卡片详情(好友相似度,好友偏好,评论

  6. 歌曲播放页(播放暂停,歌词滚动,收藏歌曲,切换歌曲,听歌流水上报,背景魔法色,适配)

  7. miniplayer (切换歌曲,状态同步)

核心功能实现

音频状态同步

涉及播放歌曲状态同步,不能使用audio组件。而音频播放API本质上是借助微信native的播放组件。

使用wx.navigateTo() 跳转到应用内的某个页面,会保留当前页面。点击左上角返回,之前页面会触发onShow监听页面显示,不会触发onLoad事件。播放页和首页miniplayer状态同步相关逻辑处理应该在onShow事件监听。

 

歌曲信息以及变更(包括歌曲列表,播放状态,切换音频,专辑图,歌曲名,歌手等)存储在小程序提供的storage下,方便不同页面数据同步

歌词滚动

音频组件API目前没有提供类似audio的onTimeUpdate事件,需要开了一个定时器做歌词滚动,缺点是定时器做歌词渲染有不太精准。好消息是:微信后期会支持OnTimeUpdate事件。
歌词处理相关逻辑如下:

歌词背景魔法色

根据专辑图拉取对应十六进制的魔法色。有些色值较亮,有点刺眼,这里需要对色值转为HSL通过降低饱和度S和亮度L来使得背景色看着柔和。

将后台返回十六进制,转为RGB值

RGB转为HSL

降低HSL 中S饱和度,L亮度让背景色不刺眼



易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/18109.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询