前端编程，边学习边听歌，推荐两个开源项目

先声明一点，这两个项目只推荐给大家学习使用，或者自己在自己电脑上部署之后，给自己的女朋友“炫耀”，切忌拿过去商业化。

第一个项目是由Vue 编写，想要学习 Vue 的朋友们可以参考下，虽然现在的工作不太好找，但学会了也是一个加分项。

它既锻炼了自己的动手能力，也学习了相关的一些知识点，更可以拿出去作为自己的一个实践项目。（项目地址在最后）

第二个项目是由React 编写，React 一般在大厂和国外使用的较多。

话不多说，请看下两个项目的具体介绍：

Vue-mmPlayer

mmPlayer 是由茂茂开源的一款在线音乐播放器，具有音乐搜索、播放、歌词显示、播放历史、查看歌曲评论、网易云用户歌单播放同步等功能

模仿 QQ 音乐网页版界面，采用 flexbox 和 position 布局；

mmPlayer 虽然是响应式，但主要以 PC 端为主，移动端只做相应适配；

只做主流浏览器兼容（对 IE 说拜拜，想想以前做项目还要兼容 IE7 ，都是泪啊！！！）

免责声明

1. 本项目是一个前端练手的实战项目，旨在帮助开发者提升技能水平和对前端技术的理解。

2. 本项目不提供任何音频存储和贩卖服务。所有音频内容均由网易云音乐的第三方 API 提供，仅供个人学习研究使用，严禁将其用于任何商业及非法用途，版权归原始平台所有。

3. 使用本项目造成的任何纠纷、责任或损失由使用者自行承担。本项目开发者不对因使用本项目而产生的任何直接或间接责任承担责任，并保留追究使用者违法行为的权利。

4. 请使用者在使用本项目时遵守相关法律法规，不得将本项目用于任何商业及非法用途。如有违反，一切后果由使用者自负。同时，使用者应该自行承担因使用本项目而带来的风险和责任。

5. 本项目使用了网易云音乐的第三方 API 服务，对于该第三方 API 服务造成的任何问题，本项目开发者不承担责任。

安装与使用

检查 node 版本

# 查看 node 版本，确保 node 版本高于 12 版本

node -v

mmPlayer

# 下载 mmPlayer

git clone https://github.com/maomao1996/Vue-mmPlayer

# 进入 mmPlayer 播放器目录

cd Vue-mmPlayer

# 安装依赖 推荐使用 pnpm

pnpm install

# 或者

npm install

# 本地运行 mmPlayer

npm run serve

# 编译打包

npm run build

注意点

运行 mmPlayer 后无法获取音乐请检查后台 api 服务是否启动(即控制台请求报 404)

线上部署不是直接将整个项目丢到服务器，再去运行 npm run serve 命令

项目打包前 VUE_APP_BASE_API_URL 必须改后台 api 服务地址为线上地址，不能是本地地址

关于项目线上部署

最近有不少小伙伴部署出了问题，我在这说明下

? 后台 api 服务线上部署

o 你需要将 NeteaseCloudMusicApi 下载

o 然后将下载的文件上传至服务器

o 再通过 pm2 去启动服务(pm2 安装和相关命令网上有很多，这里不再赘述)

o 最后通过服务器 ip + 端口号访问验证 api 服务是否启动成功

? mmPlayer 线上部署（推荐使用 Vercel 部署）

o 首先要注意的是

o 先将 .env 文件的 VUE_APP_BASE_API_URL 修改成上一步启动的后台 api 服务地址(服务器 ip + 端口号或者你绑定的域名)

o 然后先在本地运行 npm run build 命令，会打包在生成一个 dist 文件

o 最后将打包的 dist 文件上传到你的网站服务器目录即可

? 其他：在宝塔面板部署 mmPlayer（不喜欢写文，可能有点烂不要介意哈）

? 最后：本人已和谷歌、百度达成合作了，如果还有啥不懂的，以后可以直接谷歌、百度

Vercel 部署

1. fork 此项目

2. 在 Vercel 官网点击 New Project

3. 点击 Import Git Repository

i. 选择你 fork 的此项目

ii. 点击 import

4. Configure Project 配置

i. Project Name 自己填

ii. Framework Preset 选 Vue.js （基本默认就是，不用修改）

iii. 点击 Environment Variables，并添加一条

a. key 输入 VUE_APP_BASE_API_URL

b. value 输入你后台 api（NeteaseCloudMusicApi）服务的线上地址

5. 点击 Deploy 等部署完成即可

技术栈

? Vue Cli Vue 脚手架工具

? Vue 2.x 核心框架

? Vue Router 页面路由

? Vuex 状态管理

? ES6 （JavaScript 语言的下一代标准）

? Less（CSS 预处理器）

? Axios（网络请求）

? FastClick（解决移动端 300ms 点击延迟）

功能与界面

? 播放器

? 快捷键操作

? 歌词滚动

? 正在播放

? 排行榜

? 歌单详情

? 搜索

? 播放历史

? 查看评论

? 同步网易云歌单

React-Music

如何安装与使用

react-music

# 下载 react-music

git clone https://github.com/maomao1996/react-music.git

# 进入 react-music 项目目录

cd react-music

# 安装依赖

npm install

# // 运行 react-music 访问 http://localhost:8163

npm run start

# // 项目编译打包

npm run build

技术栈

? React（核心框架）

? React-Router（页面路由）

? Redux（状态管理）

? React-Redux

? Redux-Thunk

? ES 6 / 7（JavaScript 语言的下一代标准）

? Sass（CSS 预处理器）

? Axios（网络请求）

? ClassNames（处理动态 class ）

? Better-Scroll（一款重点解决移动端各种滚动场景需求的插件）

? FastClick（解决移动端 300ms 点击延迟）

功能

? 播放器

? 正在播放

? 排行榜

? 歌单列表

? 歌单详情

? 搜索（歌曲、歌单）

? 皮肤切换

Vue项目地址：https://github.com/maomao1996/Vue-mmPlayer

React项目地址：https://github.com/maomao1996/react-music

最后给大家推荐一个国外的开源项目，也是一个开源的音乐项目，但需要自己手动打包：

项目地址：https://github.com/clementine-player/Clementine

另附几个已经不再维护的项目供大家学习：

项目1地址：https://github.com/nukeop/nuclear

项目2地址：https://github.com/PeterDing/chord

项目3地址：https://github.com/naman14/TimberX

项目4地址：https://github.com/sunzongzheng/music

项目5地址：https://github.com/trazyn/ieaseMusic