摘要:故事背景前幾周看到一個(gè)網(wǎng)友做音樂播放器,然而在巧合之下發(fā)現(xiàn)微博的網(wǎng)頁播放器挺不錯(cuò)的,就捉摸著自己試試,文章最末處獻(xiàn)上源碼,喜歡就請帶走吧。
故事背景:前幾周看到一個(gè)網(wǎng)友做web音樂播放器,然而在巧合之下發(fā)現(xiàn)微博的網(wǎng)頁播放器挺不錯(cuò)的,就捉摸著自己試試,文章最末處獻(xiàn)上源碼,喜歡就請帶走吧。
演示地址:http://123.56.191.84/jmusic_v...
兼容當(dāng)前主流瀏覽器包括ie9及以上,不考慮兼容ie8及以下的瀏覽器
好了,步入正題,這個(gè)小東西涉及的一些大概知識點(diǎn):cRUL、ajax、session、memcache、閉包、遞歸。。差不多就這些把,沒別的了,考慮到有些朋友可能對有些知識點(diǎn)遺忘了,哈哈,我特意整理了每個(gè)知識點(diǎn)的筆記。
Cookie 與 Session:http://segmentfault.com/n/133...
Memcache:https://segmentfault.com/n/13...
cURL:https://segmentfault.com/n/13...
至于如果作為一個(gè)前端不知道ajax那我也沒辦法了,找點(diǎn)資料了解下吧,因?yàn)樘唵危揖蜎]有整理筆記了,但是如果有網(wǎng)友需要,可以聯(lián)系我。
1.小窗口與大窗口切換
2.播放面板的:后退、播放與暫停、前進(jìn)、播放模式切換、音量(點(diǎn)贊與分享功能沒做,和刪除功能大同小異,后面有時(shí)間了我再補(bǔ)上)、定位播放位置(可拖拽)
3.播放列表頁、新歌榜(默認(rèn)顯示20首)、歌曲搜索頁、列表滾動(dòng)條。
4.播放列表的歌曲批量刪除、單曲刪除,排行榜的批量播放、搜索列表的批量播放。
5.歌詞的拖拽查看
將除show文件夾之外的必要文件移動(dòng)到你要顯示播放器所在的文件夾
在要顯示播放器的頁面中插入如下幾行代碼
1. 2. 3. 4.
注意:除第一行代碼必須放在網(wǎng)頁頂部外,其余代碼可以插入到任意位置(但是css樣式插入位置必須在標(biāo)簽中),但是要保準(zhǔn)順序不能變 第4行代碼必須要在第三行代碼后面
代碼插入示例音樂播放器
提醒:代碼必須要放置在php環(huán)境、并且安裝memcache擴(kuò)展
4行代碼解釋1. //啟動(dòng)Session 的初始化 ,分配給用戶一個(gè)sessionid,此id使用來讀取服務(wù)器緩存的用戶播放記錄和新歌榜記錄(方便下次快速播放->因?yàn)榫W(wǎng)易api的問題才會(huì)考慮緩存新歌榜的記錄的)。
2. // 引入css樣式文件
3. 引入js主文件
4. // 將sessionid傳遞給js主文件通過ajax進(jìn)行服務(wù)器的匹配是否存在此用戶的緩存音樂,如果存在就直接返回,沒有怎重新從api獲取
jmusic.php //次文件是你的將要引入播放器的文件(可修改)
css // css樣式文件(不可改,但是如果懂,可以自行修改)
js // js主文件(不可改,但是如果懂,可以自行修改)
php // 存放著php文件,用于驗(yàn)證網(wǎng)易api中那些音樂可以播放哪些音樂不可以播放
show // 用于存放本文章中所有功能演示圖片(可刪除)
提示這種可以緩存音樂的都是需要用戶登錄的,考慮到大家看演示的時(shí)候都會(huì)緩存造成大量垃圾,而我又是用的很渣的服務(wù)器,所以緩存在的時(shí)間只有24小時(shí),并且開啟了session的垃圾回收機(jī)制(當(dāng)訪問過大時(shí),超時(shí)的session會(huì)被自動(dòng)刪除)。
如果想要看微博原始播放器的朋友,可以移步至:點(diǎn)擊進(jìn)入微博頁提醒:必須要登錄后播放器才會(huì)顯示,如果有賬號可以登錄查看
https://github.com/66pig/-jMusic
當(dāng)有朋友想要視頻播放器的時(shí)候會(huì)發(fā)現(xiàn)其實(shí)視頻播放器的功能多數(shù)都體現(xiàn)在了這個(gè)音樂播放器,是吧?這就是為啥我把這個(gè)發(fā)出來,而視頻播放器中多數(shù)人的一個(gè)瓶頸應(yīng)該全屏問題,下次再說吧,先到這里了,如果有問題可以聯(lián)系我。
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/23066.html
摘要:故事背景前幾周看到一個(gè)網(wǎng)友做音樂播放器,然而在巧合之下發(fā)現(xiàn)微博的網(wǎng)頁播放器挺不錯(cuò)的,就捉摸著自己試試,文章最末處獻(xiàn)上源碼,喜歡就請帶走吧。 故事背景:前幾周看到一個(gè)網(wǎng)友做web音樂播放器,然而在巧合之下發(fā)現(xiàn)微博的網(wǎng)頁播放器挺不錯(cuò)的,就捉摸著自己試試,文章最末處獻(xiàn)上源碼,喜歡就請帶走吧。 演示地址:http://123.56.191.84/jmusic_v... 兼容當(dāng)前主流瀏覽器包括i...
摘要:故事背景前幾周看到一個(gè)網(wǎng)友做音樂播放器,然而在巧合之下發(fā)現(xiàn)微博的網(wǎng)頁播放器挺不錯(cuò)的,就捉摸著自己試試,文章最末處獻(xiàn)上源碼,喜歡就請帶走吧。 故事背景:前幾周看到一個(gè)網(wǎng)友做web音樂播放器,然而在巧合之下發(fā)現(xiàn)微博的網(wǎng)頁播放器挺不錯(cuò)的,就捉摸著自己試試,文章最末處獻(xiàn)上源碼,喜歡就請帶走吧。 演示地址:http://123.56.191.84/jmusic_v... 兼容當(dāng)前主流瀏覽器包括i...
摘要:故事背景前幾周看到一個(gè)網(wǎng)友做音樂播放器,然而在巧合之下發(fā)現(xiàn)微博的網(wǎng)頁播放器挺不錯(cuò)的,就捉摸著自己試試,文章最末處獻(xiàn)上源碼,喜歡就請帶走吧。 故事背景:前幾周看到一個(gè)網(wǎng)友做web音樂播放器,然而在巧合之下發(fā)現(xiàn)微博的網(wǎng)頁播放器挺不錯(cuò)的,就捉摸著自己試試,文章最末處獻(xiàn)上源碼,喜歡就請帶走吧。 演示地址:http://123.56.191.84/jmusic_v... 兼容當(dāng)前主流瀏覽器包括i...
摘要:為了提高自己,最近在學(xué)習(xí)微信小程序,選題是仿網(wǎng)易云音樂。查文檔發(fā)現(xiàn),小程序中圖片加載完成后,有一個(gè)加載完成事件。前者在微信客戶端版本就不開始維護(hù)了,后者低版本需做兼容處理。目前還有一些功能暫未實(shí)現(xiàn),會(huì)在以后繼續(xù)完善項(xiàng)目,繼續(xù)學(xué)習(xí)。 為了提高自己,最近在學(xué)習(xí)微信小程序,選題是仿網(wǎng)易云音樂。期間踩過了大把的坑,bug出現(xiàn)的難受和解決bug歡喜,一直是伴隨我階段性學(xué)習(xí)這個(gè)項(xiàng)目的心情。初步完成...
閱讀 2907·2021-11-19 09:40
閱讀 3578·2021-10-09 09:43
閱讀 2675·2021-09-22 15:31
閱讀 1724·2021-07-30 15:31
閱讀 782·2019-08-30 15:55
閱讀 3257·2019-08-30 15:54
閱讀 1161·2019-08-30 11:26
閱讀 1907·2019-08-29 13:00