【前端小项目】基于Vue全家桶的在线音乐播放器（提供在线演示）

💬前言

学习了一些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.com/Binaryify/NeteaseCloudMusicApi.git

# 进入项目文件夹
cd NeteaseCloudMusicApi

# 安装依赖
npm install

# 启动项目（默认3000端口）
node app.js

本项目

# 克隆项目到本地
git clone https://github.com/MrRainbowYoo/Music_Player.git

# 进入项目文件夹
cd Music_Player

# 安装依赖
npm install

# 启动项目
npm run serve

🚀功能列表

• 音乐播放/暂停/下一首/上一首
• 进度条控制
• 音量调节
• 推荐歌单
• 最新音乐
• 推荐MV
• MV播放
• 自动切换下一首
• 列表循环播放
• 播放列表
• 模糊搜索
• 热搜榜
• 搜索历史
• 歌词滚动
• 歌单/专辑/歌手详情
• 查看评论
• 快捷键操作
• 用户登录
• 收藏歌单

💻部分页面截图

发现音乐

推荐歌单

最新音乐

最新MV

搜索结果

歌词详情

播放列表

MV详情

歌手详情

其他界面

歌单详情	专辑详情

📣结语

本项目音视频文件来自各网站接口，不会修改任何音视频文件。

本项目仅为个人前端练手项目。本站音频版权来自各网站，只提供数据查询服务，不提供任何音频存储和贩卖服务。

请勿用作商业用途，请勿通过本项目下载盗版歌曲资源，否则后果自负！

正常使用请选择网易云音乐官方客户端 😃