QQ音樂播放器簡易開發

由於本人喜歡聽音樂,然後突然某次抽筋,想用H5的audio來寫一個模擬qq播放器功能的頁面.說干就干.花了整整4天時間,其中搞歌詞的lrc文件花了不少時間T.T啊.

亮點：

1.歌詞同步：

支持主界面以及副界面的歌詞同步功能,並且當前行高亮展示.

2.多類目切換：

實現4大類目的不同歌單,當前歌曲黑底顯示的功能.

3.進度條以及主屏幕拖拽功能：

實現了進度條同步歌曲進度以及拖拽功能,3大界面(光碟界面,歌詞界面,歌單界面)拖拽進行移動的功能.

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當前歌曲播放結束

5.面向對象式封裝 [ 已寫為插件 ] ：

再次用面向對象方式來書寫整個腳本,最近經常用面向對象方式寫js,偶爾用面向過程的方式書寫的時候,感到額外的輕鬆,幾乎不會報錯.老牛已經將整個腳本封裝為了插件,介面在下載源碼後可查閱.有興趣的朋友可以用用看.

6.動態歌單信息與歌單與對應類目表跳轉：

由於處理過幾次data的json格式文件,本次運用起來可以說相當的得心應手,類目表與對應的表之間的index值處理,由於4大類目很多小歌單,小歌單在切換大類目表後取消黑色背景這部分倒是讓我頭疼了好久.

7.運算符前置的運用：

在盒子拖拽部分,老牛第一次用--與++前置,用於先運算再執行.減少了先This._boxIndex++,再代入的坑余代碼.值得注意的是mouseup中有不少執行動作,所以在最後解綁mouseup是必要的.

8.點擊判斷與拖拽判斷：

由於在song list模塊中支持點擊播放,而拖拽為移動,此處我用了滑鼠按下抬起的時間差判斷用戶意向.

9.歌詞分割：

對歌詞lrc文件的處理是本章的難點之一,我將lrc格式以如下方式進行分割,將每句歌詞存入一個lyric數組內,在每次歌曲播放時動態添加入lyricWrapper內,將時間格式存入cal數組內並將分:秒格式轉換為秒的格式,用於給播放時間做計算.

10.歌曲長度,進度條長度以及歌詞同步運算：

首先將當前歌曲長度除60向下取整,歌曲長度的分,在將總長度-分鐘數*60取小數點0位獲取到歌曲長度的秒數,作為歌曲總長度,然後讓顯示器顯示,設一個計時器.每200毫秒進行一次運算,先求當前播放的時間,求法與求總時間類似,進度條長度用當前歌曲時間/歌曲總時間作為百分比值進行顯示,這邊的歌詞同步,我用了grep函數去循環當前秒數在之前處理好的歌詞時間節點數組中去返回出比當前秒數小的時間個數減去1,再用dis存在並且dis不等於-1以及dis不等於上一個dis後再執行歌詞的移動,移動的距離為每條高度,這樣一是避免bug,二則增加運行性能,並不會每200毫秒就做一次無謂的歌詞運動,值得注意的是原先我是用的$.inArray去計算當前時間戳在處理數組中的位子,但是發現用inArray在拖拽進度條之後由於,時間節點的計算需要正好踩到相等點才能有反應,所以會有延遲反應,這裡有意思的是我最先使用addEventListener來監聽audio的ended,然後出現了很多bug,之後我改用if判斷,就解決了,具體原因我也不清楚.

11.冒泡事件

在進度條拖拽計算時,取消背景層的拖拽冒泡事件是必要的！！

12.歡迎下載

由於這個頁面包含的內容太多,邏輯太雜,很多地方沒法說全,加css大約2000行的樣子,要是用原生js去寫不知道要多久...還有正規播放器得幾十萬行?囧有興趣的小夥伴可以下載後一起探討,原文鏈接：老牛の博客

喜歡本文的，可以關注通哥 - 知乎，有問題可以加群交流

歡迎大家來「web前端開發」專欄投稿

推薦閱讀：