Giter Club home page Giter Club logo

wyy-music's Introduction

模仿网易云音乐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/

wyy-music's People

Contributors

remmlqw avatar

Stargazers

 avatar

Forkers

jiangusegithub

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.