整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
天給大家做一個(gè)音樂(lè)播放器，源碼都在下面，大家多多提意見(jiàn)哈
效果圖：
1、首頁(yè)
2、底部播放控件
3、播放頁(yè)面
4、播放列表
5、排行榜
6、音樂(lè)搜索
輸入搜索關(guān)鍵詞，點(diǎn)擊放大鏡圖標(biāo)
7、側(cè)邊欄
1、輪播圖
首先感謝作者ShanaMaid/vue-image-scroll開(kāi)源的代碼，我把代碼copy下來(lái)自己進(jìn)行了一點(diǎn)修改(沒(méi)有手指滑動(dòng)效果)，因?yàn)檫@是移動(dòng)端，少不了的手指滑動(dòng)切換，所以添加了vue-touch(偷偷告訴你，vue-touch的next分支還是支持vue2.0的)。
地址：https://github.com/hzzly/MagicMusic/blob/master/src/components/banner.vue
2、歌曲操作(喜歡，分享，加入播放列表)動(dòng)畫(huà)、播放列表展開(kāi)與刪除歌曲動(dòng)畫(huà)Vue提供了transition的封裝組件，在下列情形中，可以給任何元素和組件添加 entering/leaving 過(guò)渡
條件渲染 （使用 v-if）
條件展示 （使用 v-show）
動(dòng)態(tài)組件
組件根節(jié)點(diǎn)
transition-group一組過(guò)度動(dòng)畫(huà)，這里有個(gè)小坑的，之前看官網(wǎng)列表過(guò)渡的栗子，給每一項(xiàng)設(shè)置唯一的key值，一般都會(huì)用index。所以在做的時(shí)候就把index傳給key，結(jié)果過(guò)渡老是不對(duì)，后來(lái)?yè)Q成對(duì)應(yīng)的item就正常了(生無(wú)可戀臉)。
3、直線進(jìn)度條、弧形進(jìn)度條
西班牙建筑大師曾說(shuō)過(guò)：“直線屬于人類(lèi)，曲線則歸于上帝”。在這里我大膽的使用了弧形來(lái)作為進(jìn)度條，(幾大熱門(mén)音樂(lè)APP貌似還沒(méi)有弧形進(jìn)度條)。
這里我用到了Vue的綁定內(nèi)聯(lián)樣式
4、本地存儲(chǔ)
將一些數(shù)據(jù)緩存到localStorage，可以減少Http請(qǐng)求，從而優(yōu)化頁(yè)面加載時(shí)間。
在這個(gè)項(xiàng)目中首頁(yè)歌曲列表以及搜索歷史用到了本地緩存，拿搜索歷史來(lái)舉栗：
5、圖片懶加載
使用了vue-lazyload插件
用法：
6、歌詞滾動(dòng)與高亮
因?yàn)閍pi提供的歌詞包括時(shí)間，如：
[03:57.280]原諒我這一生不羈放縱愛(ài)自由
所以首先要進(jìn)行字符串切割：
然后在播放的監(jiān)聽(tīng)事件中與播放的當(dāng)前做對(duì)比：
到這就ok了
7、VUEX狀態(tài)管理
推薦官方調(diào)試工具 devtools extension
之前看到好多人寫(xiě)的vuex，把整個(gè)項(xiàng)目的數(shù)據(jù)放到了一個(gè)state里，導(dǎo)致應(yīng)用的所有狀態(tài)集中到一個(gè)很大的對(duì)象。但是，當(dāng)應(yīng)用變得很大時(shí)，store 對(duì)象會(huì)變得臃腫不堪。
所以我建議(個(gè)人見(jiàn)解，輕噴)：將 store 分割到模塊（module）。每個(gè)模塊擁有自己的 state、mutation、action、getters。這樣方便管理與后期的維護(hù)。
車(chē)已到站??。
不知不覺(jué)寫(xiě)了這么多，老鐵們湊合這看吧，覺(jué)得還行的可以點(diǎn)贊，需要完整代碼練習(xí)的加群：594959296 已經(jīng)上傳到群文件。
郡格我想現(xiàn)在喜歡她的朋友不少，自從上了中國(guó)好聲音，這位獨(dú)特的嗓音吸引到不少人，今天就給大家介紹一下，劉郡格作曲家在哪能聽(tīng)?試聽(tīng)地址和完整歌詞就在文中，一起看看吧!
劉郡格作曲家試聽(tīng)地址介紹
在線試聽(tīng)傳送門(mén)：https://y.qq.com/n/yqq/song/0032DSdL2BhcQd.html
劉郡格作曲家完整歌詞欣賞
作曲家 (Live)
劉郡格
專(zhuān)輯：2018中國(guó)好聲音 第8期
2018中國(guó)好聲音 第8期
原唱：李榮浩
詞：李榮浩
曲：李榮浩
編曲設(shè)計(jì)：謝霆鋒
編曲：陳子龍
樂(lè)隊(duì)總監(jiān)：劉卓
音響總監(jiān)：金少剛
鍵盤(pán)：劉卓/李海郡
吉他：金天/崔萬(wàn)平
貝斯：李九君
鼓：盧煒
打擊樂(lè)：劉效松
和音：劉芳/張煒/關(guān)冰效/趙晨
又很久沒(méi)見(jiàn) 我剪了長(zhǎng)發(fā)
談怎么說(shuō)話(huà) 談怎么啟發(fā)
怕歌詞寫(xiě)得肉麻 怕浮夸
放一盤(pán)磁帶 七八十年代
才聽(tīng)了一半 就悲傷起來(lái)
每一句里的感慨 都是現(xiàn)在
作曲家
寫(xiě)一首我們一生最平凡的歌
作曲家
告訴你愛(ài)的人你多真 多深刻
作曲家
我還是你多年未見(jiàn)的老友啊
而你還是不太明白
孤獨(dú)是個(gè)節(jié)拍
頒一個(gè)獎(jiǎng)牌 說(shuō)一段對(duì)白
不談情說(shuō)愛(ài) 也盡量精彩
沒(méi)幾個(gè)人生下來(lái) 不是天才
是個(gè)節(jié)拍
作曲家
寫(xiě)一首我們一生
最平凡的歌
作曲家
告訴你愛(ài)的人
你多真 多深刻
作曲家
我還是你多年
未見(jiàn)的老友啊
幾天小編給大家分享了數(shù)據(jù)可視化分析，在文尾提及了網(wǎng)易云音樂(lè)歌詞爬取，今天小編給大家分享網(wǎng)易云音樂(lè)歌詞爬取方法。 本文的總體思路如下： 找到正確的URL，獲取源碼； 利用bs4解析源碼，獲取歌曲名和歌曲ID； 調(diào)用網(wǎng)易云歌曲API，獲取歌詞； 將歌詞寫(xiě)入文件，并存入本地。 本文的目的是獲取網(wǎng)易云音樂(lè)的歌詞，并將歌詞存入到本地文件。整體的效果圖如下所示：
本文以民謠歌神趙雷為數(shù)據(jù)采集對(duì)象，專(zhuān)門(mén)采集他的歌曲歌詞，其他歌手的歌詞采集方式可以類(lèi)推，下圖展示的是《成都》歌詞。
一般來(lái)說(shuō)，網(wǎng)頁(yè)上顯示的URL就可以寫(xiě)在程序中，運(yùn)行程序之后就可以采集到我們想要的網(wǎng)頁(yè)源碼。But在網(wǎng)易云音樂(lè)網(wǎng)站中，這條路行不通，因?yàn)榫W(wǎng)頁(yè)中的URL是個(gè)假URL，真實(shí)的URL中是沒(méi)有/#號(hào)的。廢話(huà)不多說(shuō)，直接上代碼。
本文利用requests、bs4、json和re模塊來(lái)采集網(wǎng)易云音樂(lè)歌詞，記得在程序中添加headers和反盜鏈referer以模擬瀏覽器，防止被網(wǎng)站拒絕訪問(wèn)。這里的get_html方法專(zhuān)門(mén)用于獲取源碼，通常我們也要做異常處理，未雨綢繆。獲取到網(wǎng)頁(yè)源碼之后，分析源碼，發(fā)現(xiàn)歌曲的名字和ID藏的很深，縱里尋她千百度，發(fā)現(xiàn)她在源碼的294行，藏在下圖的標(biāo)簽下，如下圖所示：
接下來(lái)我們利用美麗的湯來(lái)獲取目標(biāo)信息，直接上代碼，如下圖：
此處要注意獲取ID的時(shí)候需要對(duì)link進(jìn)行切片處理，得到的數(shù)字便是歌曲的ID；另外，歌曲名是通過(guò)get_text()方法獲取到的，最后利用zip函數(shù)將歌曲名和ID一一對(duì)應(yīng)并進(jìn)行返回。得到ID之后便可以進(jìn)入到內(nèi)頁(yè)獲取歌詞了，但是URL還是不給力，如下圖：
雖然我們可以明白的看到網(wǎng)頁(yè)上的白紙黑字呈現(xiàn)的歌詞信息，但是我們?cè)谠揢RL下卻無(wú)法獲取到歌詞信息。小編通過(guò)抓包，找到了歌詞的URL，發(fā)現(xiàn)其是POST請(qǐng)求還有一大堆看不懂的data，總之這個(gè)URL是不能為我們效力。那該點(diǎn)解呢？莫慌，小編找到了網(wǎng)易云音樂(lè)的API，只要把歌曲的ID放在API鏈接上便可以獲取到歌詞了，代碼如下：
在API中歌詞信息是以json格式加載的，所以需要利用json將其進(jìn)行序列化解析出來(lái)，并配合正則表達(dá)式進(jìn)行清洗歌詞，如果不用正則表達(dá)式進(jìn)行清洗的話(huà)，得到原始的數(shù)據(jù)如下所示（此處以趙雷的歌曲《成都》為例）：
很明顯歌詞前面有歌詞呈現(xiàn)的時(shí)間，對(duì)于我們來(lái)說(shuō)其屬于雜質(zhì)信息，因此需要利用正則表達(dá)式進(jìn)行匹配。誠(chéng)然，正則表達(dá)式并不是唯一的方法，小伙伴們也可以采取切片的方式或者其他方法進(jìn)行數(shù)據(jù)清洗，在此就不贅述了。得到歌詞之后便將其寫(xiě)入到文件中去，并存入到本地文件中，代碼如下：
現(xiàn)在只要我們運(yùn)行程序，輸入歌手的ID之后，程序?qū)⒆詣?dòng)把該歌手的所唱歌曲的歌詞抓取下來(lái)，并存到本地中。如本例中趙雷的ID是6731，輸入數(shù)字6731之后，趙雷的歌詞將會(huì)被抓取到，如下圖所示：
之后我們就可以在腳本程序的同一目錄下找到生成的歌詞文本，歌詞就被順利的爬取下來(lái)了。相信大家對(duì)網(wǎng)易云歌詞爬取已經(jīng)有了一定的認(rèn)識(shí)了，不過(guò)easier said than down，小編建議大家動(dòng)手親自敲一下代碼，在實(shí)踐中你會(huì)學(xué)的更快，學(xué)的更多的。這篇文章教會(huì)大家如何采集網(wǎng)易云歌詞，那網(wǎng)易云歌曲如何采集呢？且聽(tīng)小編下回分解~~~
想學(xué)習(xí)更多Python網(wǎng)絡(luò)爬蟲(chóng)與數(shù)據(jù)挖掘知識(shí)，可前往專(zhuān)業(yè)網(wǎng)站：http://pdcfighting.com/
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
