小小weibo音樂(lè)播放器

klivitamJ 發(fā)布于2019-08-29 12:41 / 2550人閱讀

摘要：故事背景前幾周看到一個(gè)網(wǎng)友做音樂(lè)播放器，然而在巧合之下發(fā)現(xiàn)微博的網(wǎng)頁(yè)播放器挺不錯(cuò)的，就捉摸著自己試試，文章最末處獻(xiàn)上源碼，喜歡就請(qǐng)帶走吧。

故事背景：前幾周看到一個(gè)網(wǎng)友做web音樂(lè)播放器，然而在巧合之下發(fā)現(xiàn)微博的網(wǎng)頁(yè)播放器挺不錯(cuò)的，就捉摸著自己試試，文章最末處獻(xiàn)上源碼，喜歡就請(qǐng)帶走吧。

演示地址：http://123.56.191.84/jmusic_v...

兼容當(dāng)前主流瀏覽器包括ie9及以上，不考慮兼容ie8及以下的瀏覽器

好了，步入正題，這個(gè)小東西涉及的一些大概知識(shí)點(diǎn)：cRUL、ajax、session、memcache、閉包、遞歸。。差不多就這些把，沒(méi)別的了，考慮到有些朋友可能對(duì)有些知識(shí)點(diǎn)遺忘了，哈哈，我特意整理了每個(gè)知識(shí)點(diǎn)的筆記。
Cookie 與 Session：http://segmentfault.com/n/133...
Memcache：https://segmentfault.com/n/13...
cURL：https://segmentfault.com/n/13...
至于如果作為一個(gè)前端不知道ajax那我也沒(méi)辦法了，找點(diǎn)資料了解下吧，因?yàn)樘?jiǎn)單，我就沒(méi)有整理筆記了，但是如果有網(wǎng)友需要，可以聯(lián)系我。

功能演示

1.小窗口與大窗口切換

2.播放面板的：后退、播放與暫停、前進(jìn)、播放模式切換、音量（點(diǎn)贊與分享功能沒(méi)做，和刪除功能大同小異，后面有時(shí)間了我再補(bǔ)上）、定位播放位置（可拖拽）

3.播放列表頁(yè)、新歌榜（默認(rèn)顯示20首）、歌曲搜索頁(yè)、列表滾動(dòng)條。

注：這些歌曲均是通過(guò)網(wǎng)易接口爬取過(guò)來(lái)的，因?yàn)榫W(wǎng)易很坑，我拿到的接口中30首差不多就只有5-8首可以正常播放，所以采用了cURL爬取驗(yàn)證，過(guò)濾掉了不能放的音樂(lè)，如果不知道網(wǎng)易接口怎么用的，可以自行百度

4.播放列表的歌曲批量刪除、單曲刪除，排行榜的批量播放、搜索列表的批量播放。

5.歌詞的拖拽查看

播放器使用方法（引入方法）

將除show文件夾之外的必要文件移動(dòng)到你要顯示播放器所在的文件夾

在要顯示播放器的頁(yè)面中插入如下幾行代碼

注意：除第一行代碼必須放在網(wǎng)頁(yè)頂部外，其余代碼可以插入到任意位置（但是css樣式插入位置必須在標(biāo)簽中），但是要保準(zhǔn)順序不能變第4行代碼必須要在第三行代碼后面

代碼插入示例





    
    音樂(lè)播放器

提醒：代碼必須要放置在php環(huán)境、并且安裝memcache擴(kuò)展

4行代碼解釋

1. //啟動(dòng)Session 的初始化，分配給用戶(hù)一個(gè)sessionid，此id使用來(lái)讀取服務(wù)器緩存的用戶(hù)播放記錄和新歌榜記錄（方便下次快速播放->因?yàn)榫W(wǎng)易api的問(wèn)題才會(huì)考慮緩存新歌榜的記錄的）。
2. // 引入css樣式文件
3. 引入js主文件
4. // 將sessionid傳遞給js主文件通過(guò)ajax進(jìn)行服務(wù)器的匹配是否存在此用戶(hù)的緩存音樂(lè)，如果存在就直接返回，沒(méi)有怎重新從api獲取

文件目錄

jmusic.php //次文件是你的將要引入播放器的文件（可修改）

css // css樣式文件（不可改，但是如果懂，可以自行修改）

js // js主文件（不可改，但是如果懂，可以自行修改）

php // 存放著php文件，用于驗(yàn)證網(wǎng)易api中那些音樂(lè)可以播放哪些音樂(lè)不可以播放

show // 用于存放本文章中所有功能演示圖片（可刪除）

提示

這種可以緩存音樂(lè)的都是需要用戶(hù)登錄的，考慮到大家看演示的時(shí)候都會(huì)緩存造成大量垃圾，而我又是用的很渣的服務(wù)器，所以緩存在的時(shí)間只有24小時(shí)，并且開(kāi)啟了session的垃圾回收機(jī)制（當(dāng)訪問(wèn)過(guò)大時(shí)，超時(shí)的session會(huì)被自動(dòng)刪除）。
如果想要看微博原始播放器的朋友，可以移步至：點(diǎn)擊進(jìn)入微博頁(yè)提醒：必須要登錄后播放器才會(huì)顯示，如果有賬號(hào)可以登錄查看

源碼下載地址

https://github.com/66pig/-jMusic

其實(shí)很早就做出來(lái)了，但是好尷尬，最開(kāi)始不知道怎么把源碼發(fā)上來(lái)（自己服務(wù)器存放的時(shí)間都不長(zhǎng)，鏈接容易失效），沒(méi)玩過(guò)github，初次嘗試，別見(jiàn)笑，后期有時(shí)間會(huì)更新的，如果你們覺(jué)得有什么bug也可以合并過(guò)來(lái)，大家相互學(xué)習(xí)。

當(dāng)有朋友想要視頻播放器的時(shí)候會(huì)發(fā)現(xiàn)其實(shí)視頻播放器的功能多數(shù)都體現(xiàn)在了這個(gè)音樂(lè)播放器，是吧？這就是為啥我把這個(gè)發(fā)出來(lái)，而視頻播放器中多數(shù)人的一個(gè)瓶頸應(yīng)該全屏問(wèn)題，下次再說(shuō)吧，先到這里了，如果有問(wèn)題可以聯(lián)系我。