QQ音樂電臺(tai)小程序的核心(xin)功能開(kai)啟電臺(tai)好友卡(ka)片引導(dao)頁(引導(dao)用戶用微信登(deng)錄QQ音樂或開(kai)啟冷(leng)啟動)冷(leng)啟動卡(ka)片詳(xiang)情(好友相似度,好友偏好,評論)歌曲(qu)播(bo)放頁(播(bo)放暫停(ting) ...
QQ音樂電臺小程序的核心功能(neng)
開啟(qi)電臺
好(hao)友卡(ka)片(pian)
引導(dao)頁(引導(dao)用戶用微信(xin)登(deng)錄QQ音(yin)樂(le)或開(kai)啟(qi)冷啟(qi)動)
冷啟動
卡片詳情(好友相似度,好友偏好,評論)
歌曲播放頁(播放暫停,歌(ge)詞滾動,收藏歌(ge)曲,切換歌(ge)曲,聽(ting)歌(ge)流水上報,背景(jing)魔(mo)法色(se),適配)
miniplayer (切換歌曲,狀(zhuang)態同步)

涉(she)及(ji)播(bo)放(fang)歌曲狀態同步(bu),不能使用(yong)audio組(zu)件(jian)。而音頻播(bo)放(fang)API本質上(shang)是借助微信native的播(bo)放(fang)組(zu)件(jian)。
使用wx.navigateTo() 跳轉(zhuan)到應用內的某個頁(ye)(ye)面(mian)(mian),會(hui)保留當前(qian)頁(ye)(ye)面(mian)(mian)。點擊左上角返回,之前(qian)頁(ye)(ye)面(mian)(mian)會(hui)觸發(fa)(fa)onShow監(jian)(jian)聽頁(ye)(ye)面(mian)(mian)顯示(shi),不會(hui)觸發(fa)(fa)onLoad事件(jian)。播放頁(ye)(ye)和(he)首頁(ye)(ye)miniplayer狀態同步相關邏輯(ji)處理應該在onShow事件(jian)監(jian)(jian)聽。
歌曲信息以及變更(包括歌曲列表,播放狀態,切換音(yin)頻,專(zhuan)輯(ji)圖,歌曲名,歌手(shou)等)存儲(chu)在小程(cheng)序提供的storage下,方(fang)便不同(tong)(tong)頁面(mian)數據同(tong)(tong)步

音頻組件API目前沒有提供類似audio的onTimeUpdate事件,需要開了一個定時器做歌詞滾動,缺點是定時器做歌詞渲染有不太精準。好消息是:微信后期會支持OnTimeUpdate事件。
歌詞處理相關邏輯如下:

根據專輯(ji)圖拉取對應十六進制的(de)魔法色(se)。有些色(se)值較亮(liang),有點刺眼,這里需要對色(se)值轉為HSL通過降低飽和(he)度(du)(du)S和(he)亮(liang)度(du)(du)L來(lai)使得背(bei)景(jing)色(se)看著柔和(he)。
將(jiang)后(hou)臺(tai)返回(hui)十(shi)六進制,轉為RGB值

RGB轉為HSL

降低HSL 中S飽和度,L亮度讓背景色(se)不(bu)刺眼
