remmlqw / wyy-music

模仿网易云音乐PC端应用 jQuery + Node + Express + MySQL

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

模仿网易云音乐PC端应用

项目前端使用 jQuery

项目后端使用 Node + Express + MySQL


项目演示地址

http://liqianwen.remmli.com:8084/

注意:服务器带宽太低,所以打开较慢...请谅解


功能模块

  • 播放控制

    • 播放列表控制(下一首、上一首、暂停)
    • 播放进度条控制(拖拽、点击)
    • 音量控制
  • 歌词滚动

代码目录

+-- public/                                 ---静态资源目录
|    +-- css                                ---样式
|    |    ...
|    +-- fonts                              ---字体图标
|    |    ...
|    +-- img                                ---图片
|    |    ...
|    +-- js                                 ---js
|    |    --- jquery-3.1.1min.js            ---jQuery
|    |    --- app.js                        ---页面逻辑控制
|    |    --- lyricScroll.js                ---歌词滚动
|    |    --- player.js                     ---播放控制
+-- lrc                                     ---歌词文件.lrc目录
|    --- ...
+-- node_modules/                           ---项目依赖的模块
|    --- ...
+-- controllers/                            ---控制器(后端业务逻辑)
|    --- api.js                             
|    --- index.js                           
+-- views/                                  ---视图
|    --- ...
--- app.js                                  ---项目入口及程序启动文件
--- package.json                            ---包描述文件及开发者信息
--- README.md                               ---项目说明
--- music.sql                        ---mysql数据库导出的备份文件                             

项目截图

播放界面

image

歌词界面

image

启动项目

下载依赖包

npm i

开启服务

npm start

在浏览器地址栏输入

http://127.0.0.1:8080/

About

模仿网易云音乐PC端应用 jQuery + Node + Express + MySQL


Languages

Language:JavaScript 40.9%Language:CSS 29.9%Language:HTML 29.1%