OxygenMusic

Oxygen Music

基于vue.js的音乐播放器,资源来至网易云音乐

Demo:

https://yun.yang143.cn

本项目为移动端项目,pc端按F12调为手机模式查看，推荐使用手机查看，扫一扫二维码即可体验

目标功能

• [x] 音乐播放、暂停 -- 完成
• [x] 播放列表、添加到播放列表、清空播放列表 -- 完成
• [x] 榜单 -- 完成
• [x] 歌手Top100、歌手详情页面 -- 完成
• [x] 搜索单曲、歌手、专辑 -- 完成
• [x] 热门搜索、搜索历史记录 -- 完成
• [x] 首页推荐(歌曲、歌单) -- 完成
• [x] 歌单 -- 完成
• [x] 我的收藏(歌单,歌手) -- 完成
• [x] 最近播放 -- 完成
• [ ] 歌词
• [ ] 搜索结果分类显示
• [ ] 切换播放模式
• [ ] 喜欢音乐
• [ ] 发现页面
• [ ] 侧边弹窗

功能特性

1. 本项目所有数据来源网易云音乐，使用开源项目（NeteaseCloudMusicApi 网易云音乐 NodeJS 版 API）
2. 网易云音乐16个音乐排行榜
3. 网易新歌速递
4. 网易精选歌单，最新歌单
5. 本地收藏歌单，歌手，随时查看
6. 本地存储最近播放，最大存储99首，超过自动删除最早播放的歌曲
7. 搜索歌曲+播放（版权歌曲无法播放）
8. 热门搜索,一键直达
9. 所有歌单分类标签，点击对应标签即可查看相对应歌单
10. 开启腾讯云CDN加速，使用vue-lazyload 实现图片懒加载

联系我

• QQ：1439821144
• Email: QQ：1439821144@qq.com
• Blog：https://www.yang143.cn

截图

首页

我的页面

我的收藏--歌单

我的收藏-歌手

搜索

排行榜

歌手Top100

歌手详情

歌单分类标签

歌单滚动至底部加载

播放列表

鸣谢

• Vue全家桶
• Axios
• Vue-LazyLoad
• stylus
• postcss-pxtorem
• mand-mobile
• vue-aplayer
• Binaryify/NeteaseCloudMusicApi (网易云音乐 Node.js API service)

目录结构

├── public            // 构建服务和webpack配置
│  ├── index.html        // 项目入口文件
├── src               // 生产目录
│   ├── assets           // css js 和图片资源
│   ├── components       // 各种组件
│   ├── views            // 各种页面
│     ├── 404               // 404页面  
│     ├── artist            // 歌手，歌手详情  
│     ├── home              // 首页  
│     ├── moremusic         // 首页查看更多音乐页面  
│     ├── music-list        // 查看更多音乐页面  
│     ├── personal          // 查看更多音乐页面  
│     ├── playlist          // 歌单分类标签页面  
│     ├── playlistdetail    // 歌单详情页面  
│     ├── ranking-list      // 排行榜  
│     ├── search            // 搜索  
│   ├── store          // vuex状态管理器
│   ├── untils         // 代码模块
│   └── main.js        // Webpack 预编译入口
│   └── router.js      // 路由文件
├── package.json       // 项目配置文件
├── README.md

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your tests

npm run test

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

开源许可

GPL 3.0

Copyright (c) 2018 Wisp X.

评论&统计

评论时填写QQ号即可快速评论,会自动获取头像&邮箱；
围观统计规则为每进一次网站记一次，刷新也会计数。

Jonathan'Cloud

个人搭建网盘

Jonathan'Cloud