模仿 QQ 音樂網頁版界面,采用 flexbox 和 position 布局; mmPlayer 雖然是響應式,但主要以 PC 端為主,移動端只做相應適配(未做歌詞顯示); 只做主流瀏覽器兼容(對 IE 說拜拜,想想以前做項目還要兼容 IE7 ,都是淚啊!!!)
api:一個開源的網易云音樂 NodeJS 版 API(有 api 才有動力寫!!!) 在線演示地址 React 移動端版本(高仿網易云音樂) 交流 QQ 群:529940193 本播放器由 maomao1996 開發,您可以隨意修改、使用、轉載。但使用或轉載時請務必保留出處!!!
本站音頻文件來自各網站接口,本站不會修改任何音頻文件
音頻版權來自各網站,本站只提供數據查詢服務,不提供任何音頻存儲和販賣服務
本項目僅為前端練手項目,請勿用作商業用途,請勿通過本項目下載盜版歌曲資源,否則后果自負!
# 下載 mmPlayergit clone https://github.com/maomao1996/Vue-mmPlayer.git# 進入 mmPlayer 播放器目錄cd Vue-mmPlayer# 安裝依賴 推薦使用 yarnnpm install# 本地運行 mmPlayernpm run serve# 項目打包()npm run build
# 下載 NeteaseCloudMusicApigit clone https://github.com/Binaryify/NeteaseCloudMusicApi.git# 安裝依賴npm install# 運行后臺 api 服務 訪問 http://localhost:3000node app.js
運行 mmPlayer 后無法獲取音樂請檢查后臺 api 服務是否啟動(即控制臺請求報404)
線上部署不是直接將整個項目丟到服務器,再去運行 npm run serve 命令
項目打包前 VUE_APP_base_API_URL 必須改后臺 api 服務地址為線上地址,不能是本地地址
最近有不少小伙伴部署出了問題,我在這說明下
后臺 api 服務線上部署
你需要將 NeteaseCloudMusicApi 下載
然后將下載的文件上傳至服務器
再通過 pm2 去啟動服務(pm2 安裝和相關命令網上有很多,這里不再贅述)
最后通過服務器 ip + 端口號訪問驗證 api 服務是否啟動成功
mmPlayer 線上部署
首先要注意的是
先將 .env 文件的 VUE_APP_base_API_URL 修改成上一步啟動的后臺 api 服務地址(服務器 ip + 端口號或者你綁定的域名)
然后先在本地運行 npm run build 命令,會打包在生成一個 dist 文件
最后將打包的 dist 文件上傳到你的網站服務器目錄即可
其他:在寶塔面板部署 mmPlayer(不喜歡寫文,可能有點爛不要介意哈)
最后:本人已和谷歌、百度達成合作了,如果還有啥不懂的,以后可以直接谷歌、百度