前言：這個(gè)是綜合一下我最近在學(xué)的東西做的小Demo，到實(shí)際使用還有距離，但是用來練手鞏固知識點(diǎn)還是不錯的，最近在二刷JS書和Boostrap.css的源碼，做完這個(gè)Demo也算是暫告一段落，接下來是jQuery的源碼和Boostrap.js的源碼，任務(wù)很艱巨呢，加油~在此就不整篇的貼代碼了，如果感興趣的小伙伴可以發(fā)消息給我，可以把代碼傳給你們~

正文：

先上效果圖

1.布局：Boostrap里的響應(yīng)式和自適應(yīng)布局是自然跑不掉的，container中嵌套row再分別嵌套aside和main（H5新標(biāo)簽）和div(id="musicConsole")。aside是左側(cè)的音樂列表，main是右邊的歌詞顯示框，div是下面的控件框。

2.主要實(shí)現(xiàn)功能：

　　(1)添加歌曲（歌曲列表右上角的“+”圖標(biāo)）和刪除歌曲（歌曲列表右上角的“垃圾箱”圖標(biāo)）

　　(2)點(diǎn)擊歌曲列表中的歌曲：會播放對于曲目；如果有歌詞，則滾動顯示歌詞，如果沒有歌詞則顯示“沒有歌詞”；進(jìn)度條和時(shí)間會隨著歌曲的播放而變化。

　　(3)點(diǎn)擊上一首按鈕（豎線+三角形），會播放上一首歌曲：如果有歌詞，則滾動顯示歌詞，如果沒有歌詞則顯示“沒有歌詞”；進(jìn)度條和時(shí)間會隨著歌曲的播放而變化。

　　　 點(diǎn)擊播放按鈕（三角形），會變?yōu)闀和０粹o（雙豎線），歌曲也相應(yīng)的由播放狀態(tài)變?yōu)闀和顟B(tài)。

　　　 點(diǎn)擊下一首按鈕（三角形+豎線），會播放下一首歌曲：如果有歌詞，則滾動顯示歌詞，如果沒有歌詞則顯示“沒有歌詞”；進(jìn)度條和時(shí)間會隨著歌曲的播放而變化。

　　　 點(diǎn)擊音響按鈕（喇叭），會變?yōu)殪o音按鈕（喇叭+"x"），歌曲也相應(yīng)的變?yōu)殪o音狀態(tài)。

　　　 點(diǎn)擊循環(huán)按鈕（帶箭頭的圈），會變?yōu)閱未尾シ?，保持循環(huán)按鈕，則會重復(fù)單曲循環(huán)。

3.遇到的問題：

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

　　　　 因?yàn)橛玫紹oostrap的圖標(biāo)，默認(rèn)的大小太小了，試了一下width和height沒反應(yīng)，才反應(yīng)過來，是用font-size來改變大小的

　?。?）str.replace(oldStr,newStr)

　　　　點(diǎn)擊播放按鈕時(shí)，會改變播放狀態(tài)，相應(yīng)的也要改變按鈕的圖標(biāo)，所以用到了replace，搞了半天都沒有反應(yīng)，結(jié)果發(fā)現(xiàn)是因?yàn)樗侵匦律梢粋€(gè)字符串，不是直接在原串上面改，orz

　?。?）瀏覽器因?yàn)榘踩紤]，很難讀取本地文件

　　　　本來打算用localStorage來存音樂列表中的內(nèi)容的，用H5的FileReader試了半天，沒辦法，此路不通只有放棄。

FileReader可以用來讀取圖片或者h(yuǎn)tml文件，它的readeAsDataURL方法能夠獲取文件路徑，說到這個(gè)，就真的要笑了，我試著存了一個(gè)音樂文件，ok，再來，啥？localStorage內(nèi)存用完了？5M就存一個(gè)文件路徑？逗我？

　　以下的問題，全部是歌詞部分了。。。做的時(shí)候真的有很心累的感覺。。。

　?。?）解析歌詞時(shí)遇到的問題

歌詞一般是lrc文件，其實(shí)就是純文本，用AJAX可以獲得后臺傳過來的數(shù)據(jù)，但是沒有后臺陪我玩啊，所以就只能直接把歌詞copy過來，當(dāng)做死數(shù)據(jù)，寫在字符串里。

原計(jì)劃用split('\r\n')把字符串分解為一句一句的歌詞，放到數(shù)組里。

結(jié)果各種報(bào)錯啊，搞了半天，最后定位在這個(gè)split上了，網(wǎng)上查了半天，哦，原來是js的鍋。

因?yàn)閖s語法不強(qiáng)制在最后結(jié)尾加分號，所以用系統(tǒng)換行符會（即，回車）被卡死。主要有兩個(gè)應(yīng)對方案：

1)手動刪除換行符，改用\n換行，此方案在頁面上會有換行效果　　

2)在系統(tǒng)換行符前面加\，此方案在頁面上無換行效果

　?。?）滾動歌詞時(shí)遇到的問題

 歌詞添加成功后，完美的顯示了，但是還要和音樂同步才行，和當(dāng)前播放時(shí)間的比對，相應(yīng)的歌詞列表的top向上移動多少，當(dāng)歌詞為空時(shí)的判斷，最后邊界的判斷，這些問題都搞定后，又冒出來一個(gè)循環(huán)播放，歌詞不能重新顯示。搞了半天，我去，居然是因?yàn)閘oop=true時(shí)，ended事件監(jiān)聽不到，沒辦法，只能舍棄loop，在ended的事件里面加入對loop的判斷了。

嗯，很好，完美的顯示了，心情有點(diǎn)小激動。到處亂點(diǎn)，測試看還有沒有問題，想著應(yīng)該可以完結(jié)了的時(shí)候，又出錯了【冷漠.jpg】，接著調(diào)吧。先找出錯誤的原因，在F12開發(fā)人員工具（我去百度，上面就是這么寫的）中，看到歌詞active樣式變化居然有兩個(gè)同時(shí)添加，所以向上滾動才會這么快，而且還一會兒上一會兒下的亂跳。找到罪魁禍?zhǔn)琢?，setTimeout。因?yàn)槭沁f歸調(diào)用，所以需要clclearTimeout來清除。ok，現(xiàn)在基本沒問題啦。

后話：

　　啊，還有，因?yàn)槲易罱苊择R鹿啊，所以就親切的給我的播放器取個(gè)名字叫“摩洛哥播放器”吧~【大哥比哈特】做這個(gè)Demo花了三天時(shí)間，單是歌詞就調(diào)了一半以上的時(shí)間，而且可以看到，遇到的主要問題都是歌詞的顯示問題，醉了。不過，不論怎么說，最后做出來了， 看到它終于能正常的滾了，那種成就感還是很有的。雖然做出來了，但是就在我寫這篇博客的時(shí)候，我又發(fā)現(xiàn)錯誤了orz。

以上所述是小編給大家介紹的使用HTML5+Boostrap打造簡單的音樂播放器，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

最新評論