原生代碼:https://github.com/helloCaijiaqi/music_player_js/tree/master/music_player_js
vuejs封裝的播放器組件:
https://github.com/helloCaijiaqi/music_player_vuejs
vue組件有用到axios,需要自行定義一個簡單的后端api
自身用的是nodejs(具體使用:頁面最底)
原生js h5音樂播放器
文件結構:
頁面效果:(圖片資源來源:網易雲音樂)
html
css
js
音樂資源的整理
點擊組件右側按鈕實現滑動隱藏和顯示
鼠標移入移出的圖片切換
播放按鈕功能
//切換歌曲,且加載音樂資源
進度條功能
留聲機圖片的旋轉動畫
功能函數
//聲音的調節
//播放模式的切換
nodejs定義一個簡單music_api
app.js 應用級
每個路徑訪問前都進行跨域處理 nodejs port:3000 \ vue-cli3 port:8080
music.js 路由級
musiclist.js json資源
音樂資源通過靜態服務掛載在 http://localhost:3000/music 中
文件結構,這里用(express應用生成器)構建的項目
































