用H5+Boostrap作簡單的音樂播放器

用H5+Boostrap作簡單的音樂播放器

 

前言：這個是綜合一下我最近在學的東西作的小Demo，到實際使用還有距離，可是用來練手鞏固知識點仍是不錯的，最近在二刷JS書和Boostrap.css的源碼，作完這個Demo也算是暫告一段落，接下來是jQuery的源碼和Boostrap.js的源碼，任務很艱鉅呢，加油~在此就不整篇的貼代碼了，若是感興趣的小夥伴能夠發消息給我，能夠把代碼傳給大家~

正文：

先上效果圖

1.佈局：Boostrap裏的響應式和自適應佈局是天然跑不掉的，container中嵌套row再分別嵌套aside和main（H5新標籤）和div(id="musicConsole")。aside是左側的音樂列表，main是右邊的歌詞顯示框，div是下面的控件框。

2.主要實現功能：

　　(1)添加歌曲（歌曲列表右上角的「+」圖標）和刪除歌曲（歌曲列表右上角的「垃圾箱」圖標）

　　(2)點擊歌曲列表中的歌曲：會播放對於曲目；若是有歌詞，則滾動顯示歌詞，若是沒有歌詞則顯示「沒有歌詞」；進度條和時間會隨着歌曲的播放而變化。

　　(3)點擊上一首按鈕（豎線+三角形），會播放上一首歌曲：若是有歌詞，則滾動顯示歌詞，若是沒有歌詞則顯示「沒有歌詞」；進度條和時間會隨着歌曲的播放而變化。

　　　 點擊播放按鈕（三角形），會變爲暫停按鈕（雙豎線），歌曲也相應的由播放狀態變爲暫停狀態。

　　　 點擊下一首按鈕（三角形+豎線），會播放下一首歌曲：若是有歌詞，則滾動顯示歌詞，若是沒有歌詞則顯示「沒有歌詞」；進度條和時間會隨着歌曲的播放而變化。

　　　 點擊音響按鈕（喇叭），會變爲靜音按鈕（喇叭+"x"），歌曲也相應的變爲靜音狀態。

　　　 點擊循環按鈕（帶箭頭的圈），會變爲單次播放，保持循環按鈕，則會重複單曲循環。

3.遇到的問題：

　　（1）glyphicon的大小用font-size改變

　　　　 由於用到Boostrap的圖標，默認的大小過小了，試了一下width和height沒反應，才反應過來，是用font-size來改變大小的

　　（2）str.replace(oldStr,newStr)

　　　　點擊播放按鈕時，會改變播放狀態，相應的也要改變按鈕的圖標，因此用到了replace，搞了半天都沒有反應，結果發現是由於它是從新生成一個字符串，不是直接在原串上面改，orz

　　（3）瀏覽器由於安全考慮，很難讀取本地文件

　　　　原本打算用localStorage來存音樂列表中的內容的，用H5的FileReader試了半天，沒辦法，此路不通只有放棄。FileReader能夠用來讀取圖片或者html文件，它的readeAsDataURL方法可以　　　　獲取文件路徑，說到這個，就真的要笑了，我試着存了一個音樂文件，ok，再來，啥？localStorage內存用完了？5M就存一個文件路徑？逗我？

　　如下的問題，所有是歌詞部分了。。。作的時候真的有很心累的感受。。。

　　（4）解析歌詞時遇到的問題

　　　　  歌詞通常是lrc文件，其實就是純文本，用AJAX能夠得到後臺傳過來的數據，可是沒有後臺陪我玩啊，因此就只能直接把歌詞copy過來，當作死數據，寫在字符串裏。原計劃用split('\r\n')把字　　　　  符串分解爲一句一句的歌詞，放到數組裏。結果各類報錯啊，搞了半天，最後定位在這個split上了，網上查了半天，哦，原來是js的鍋。由於js語法不強制在最後結尾加分號，因此用系統換行符　　　　  會（即，回車）被卡死。主要有兩個應對方案：1)手動刪除換行符，改用\n換行，此方案在頁面上會有換行效果　　2)在系統換行符前面加\，此方案在頁面上無換行效果

　　（5）滾動歌詞時遇到的問題

　　　　  歌詞添加成功後，完美的顯示了，可是還要和音樂同步才行，和當前播放時間的比對，相應的歌詞列表的top向上移動多少，當歌詞爲空時的判斷，最後邊界的判斷，這些問題都搞定後，又冒出　　　　  來一個循環播放，歌詞不能從新顯示。搞了半天，我去，竟然是由於loop=true時，ended事件監聽不到，沒辦法，只能捨棄loop，在ended的事件裏面加入對loop的判斷了。嗯，很好，完美　　　　  的顯示了，心情有點小激動。處處亂點，測試看還有沒有問題，想着應該能夠完結了的時候，又出錯了【冷漠.jpg】，接着調吧。先找出錯誤的緣由，在F12開發人員工具（我去百度，上面就是　　　　  這麼寫的）中，看到歌詞active樣式變化竟然有兩個同時添加，因此向上滾動纔會這麼快，並且還一下子上一下子下的亂跳。找到罪魁禍首了，setTimeout。由於是遞歸調用，因此須要　　　　　　　  clclearTimeout來清除。ok，如今基本沒問題啦。

後話：

　　啊，還有，由於我最近很迷馬鹿啊，因此就親切的給個人播放器取個名字叫「摩洛哥播放器」吧~【大哥比哈特】作這個Demo花了三天時間，單是歌詞就調了一半以上的時間，並且能夠看到，遇到的主要問題都是歌詞的顯示問題，醉了。不過，不論怎麼說，最後作出來了， 看到它終於能正常的滾了，那種成就感仍是頗有的。雖然作出來了，可是就在我寫這篇博客的時候，我又發現錯誤了orz。好吧，那就姑且當它是「高貴優雅雍容華麗的摩洛哥播放器 1.0」吧~吃午餐去咯~