原生js制造一個h5音樂播放器


原生代碼: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音樂播放器

文件結構:

image

頁面效果:(圖片資源來源:網易雲音樂)

image

html

image

css

image

image

image

image

image

image

image

js

音樂資源的整理

image

點擊組件右側按鈕實現滑動隱藏和顯示

image

鼠標移入移出的圖片切換

image

播放按鈕功能

image

//切換歌曲,且加載音樂資源

image

image

image

進度條功能

image

image

留聲機圖片的旋轉動畫

image

功能函數

image

image

//聲音的調節

image

image

image

//播放模式的切換

image

image

nodejs定義一個簡單music_api

app.js 應用級

每個路徑訪問前都進行跨域處理  nodejs port:3000  \  vue-cli3 port:8080

image

image

music.js 路由級

image

musiclist.js json資源

image

音樂資源通過靜態服務掛載在 http://localhost:3000/music 中

文件結構,這里用(express應用生成器)構建的項目

image


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM