admin管理员组文章数量:1583571
💬前言
学习了一些Vue的知识，总要着手做些小项目巩固一下。现有的绝大多数练手项目要么是电商网站、要么是后台管理系统，我想能不能做个更具趣味性的，正好我写代码的时候喜欢听歌，于是我想到了去实现一款在线音乐播放器。
由于想不到什么好听的名字，暂时就叫小陈音乐吧😃！它是用Vue2全家桶编写，部分UI风格参考网易云音乐，常用功能普遍支持，但目前暂未做移动端适配。
请使用PC访问 在线演示 (最好使用Chrome)
需要源码的朋友戳这 GitHub源码
路过的朋友们麻烦给小陈点个免费的 “⭐Star” ~
💪网易云音乐NodeJS版API
感谢开源项目 NeteaseCloudMusicApi 提供的支持！！
Github地址
使用文档
注：高质量API真的是开发的动力！！！
👉技术栈
- Vue
- Vue Cli
- Vue Router
- Vuex
- ElementUI
- Axios
- Vue Lazyload
🚩运行项目
后端
# 克隆项目到本地
git clone https://github/Binaryify/NeteaseCloudMusicApi.git
# 进入项目文件夹
cd NeteaseCloudMusicApi
# 安装依赖
npm install
# 启动项目（默认3000端口）
node app.js
本项目
# 克隆项目到本地
git clone https://github/MrRainbowYoo/Music_Player.git
# 进入项目文件夹
cd Music_Player
# 安装依赖
npm install
# 启动项目
npm run serve
🚀功能列表
- 音乐播放/暂停/下一首/上一首
- 进度条控制
- 音量调节
- 推荐歌单
- 最新音乐
- 推荐MV
- MV播放
- 自动切换下一首
- 列表循环播放
- 播放列表
- 模糊搜索
- 热搜榜
- 搜索历史
- 歌词滚动
- 歌单/专辑/歌手详情
- 查看评论
- 快捷键操作
- 用户登录
- 收藏歌单
💻部分页面截图
发现音乐
推荐歌单
最新音乐
最新MV
搜索结果
歌词详情
播放列表
MV详情
歌手详情
其他界面
| 歌单详情 | 专辑详情 |
|---|---|
📣结语
本项目音视频文件来自各网站接口，不会修改任何音视频文件。
本项目仅为个人前端练手项目。本站音频版权来自各网站，只提供数据查询服务，不提供任何音频存储和贩卖服务。
请勿用作商业用途，请勿通过本项目下载盗版歌曲资源，否则后果自负！
正常使用请选择网易云音乐官方客户端 😃
版权声明：本文标题：【前端小项目】基于Vue全家桶的在线音乐播放器（提供在线演示） 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/dongtai/1727921592a1138255.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论