QQ音樂播放器簡易開發
01-25
由於本人喜歡聽音樂,然後突然某次抽筋,想用H5的audio來寫一個模擬qq播放器功能的頁面.說干就干.花了整整4天時間,其中搞歌詞的lrc文件花了不少時間T.T啊.
亮點:
1.歌詞同步:
支持主界面以及副界面的歌詞同步功能,並且當前行高亮展示.實現4大類目的不同歌單,當前歌曲黑底顯示的功能.
5.動態歌詞信息添加:
以封裝為插件,所有歌曲信息動態添加,改歌曲只需要改date內的json文件就可以,data文件格式如下:經驗:
1.css樣式部分:filter:blur(10px);filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius="10");可用來做模糊屬性,其實第一次是在做bilibili時發現的.user-select:none;可以禁止用戶選中字. 2.svg部分繪製:手機部分為svg圖像,由於當時還不會自己手寫svg,所以只能用AI先畫,畫完導出svg格式,也是心疼自己.3.H5的audio標籤應用:http://cc.stream.qqmusic.qq.com/C100000eyims3MbmGS.m4a?fromtag=52">您的瀏覽器不支持html5的audio標籤4.H5的audio的API文檔運用:audio.play();播放 audio.pause();暫停 audio.reday()載入完audio.duration播放時間audio.currentTime當前播放時間audio.ended當前歌曲播放結束9.歌詞分割:
對歌詞lrc文件的處理是本章的難點之一,我將lrc格式以如下方式進行分割,將每句歌詞存入一個lyric數組內,在每次歌曲播放時動態添加入lyricWrapper內,將時間格式存入cal數組內並將分:秒格式轉換為秒的格式,用於給播放時間做計算.喜歡本文的,可以關注通哥 - 知乎,有問題可以加群交流
歡迎大家來「web前端開發」專欄投稿
推薦閱讀:
※【連載】Web應用到底是如何工作的?
※為什麼要禁止跨域的 Ajax 請求?
※開了N個知乎窗口,標題都有(1 條消息),點開其中一個窗口的消息提示後,(1 條消息)消失,緊接著其他所有標題都會陸續更新,什麼技術?
※知乎長貼只有「更多」按鈕的瀏覽方式,是否影響帖子的易讀性?
※新版新浪微博的個人首頁左側的「首頁」、「提到我的」、「評論」、「私信」、「收藏」等導航是如何做到局部刷新的?