网站首页 > 技术文章 正文
先声明一点,这两个项目只推荐给大家学习使用,或者自己在自己电脑上部署之后,给自己的女朋友“炫耀”,切忌拿过去商业化。
第一个项目是由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
猜你喜欢
- 2024-11-18 超酷 Vue+Electron 桌面端音乐播放器ElectronVueMusic
- 2024-11-18 进阶HIFI!耳机小常识之放大器和前端器材
- 2024-11-18 腾讯音乐盛典,年度男歌手周深连唱五首,单依纯唱跳 #周深
- 2024-11-18 计算机毕业设计Django+Vue.js知识图谱音乐推荐系统 音乐可视化
- 2024-11-18 TWS真无线耳机音质的瓶颈,可能来自于“前端”
- 2024-11-18 基于 vue.js+xgplayer 开源音视频播放器组件
- 2024-11-18 基于springboot/vue实现的前后端分离在线音乐网站
- 2024-11-18 全新QQ音乐PC 11.0 让音乐的操作管理更便捷
- 2024-11-18 [要源码私信]智能在线音乐系统(学习、简历项目和毕业设...
- 2024-11-18 森海ie900前端怎么选?墨菊和p6p我来给你个参考
你 发表评论:
欢迎- 07-10Oracle 与 Google Cloud 携手大幅扩展多云服务
- 07-10分享收藏的 oracle 11.2.0.4各平台的下载地址
- 07-10Oracle 和 Microsoft 推出 Oracle Exadata 数据库服务
- 07-10Oracle Database@Azure 推进到南美等新区域并增加了新服务
- 07-10Oracle宣布推出 Oracle Database@AWS 的有限预览版
- 07-10Oracle与Nextcloud合作,推出主权云上的安全协作平台
- 07-10NodeRED魔改版连接MsSql、PostgreSQL、MySQL、OracleDB存储无忧
- 07-10对于企业数据云备份,“多备份”承诺的是成本更低,管理更高效#36氪开放日深圳站#
- 604℃几个Oracle空值处理函数 oracle处理null值的函数
- 596℃Oracle分析函数之Lag和Lead()使用
- 583℃0497-如何将Kerberos的CDH6.1从Oracle JDK 1.8迁移至OpenJDK 1.8
- 580℃Oracle数据库的单、多行函数 oracle执行多个sql语句
- 575℃Oracle 12c PDB迁移(一) oracle迁移到oceanbase
- 569℃【数据统计分析】详解Oracle分组函数之CUBE
- 555℃最佳实践 | 提效 47 倍,制造业生产 Oracle 迁移替换
- 549℃Oracle有哪些常见的函数? oracle中常用的函数
- 最近发表
-
- Oracle 与 Google Cloud 携手大幅扩展多云服务
- 分享收藏的 oracle 11.2.0.4各平台的下载地址
- Oracle 和 Microsoft 推出 Oracle Exadata 数据库服务
- Oracle Database@Azure 推进到南美等新区域并增加了新服务
- Oracle宣布推出 Oracle Database@AWS 的有限预览版
- Oracle与Nextcloud合作,推出主权云上的安全协作平台
- NodeRED魔改版连接MsSql、PostgreSQL、MySQL、OracleDB存储无忧
- 对于企业数据云备份,“多备份”承诺的是成本更低,管理更高效#36氪开放日深圳站#
- 解读丨《归档文件整理规则》— 电子文件元数据存储
- Data Guard跳归档恢复的实践(dataguard failover)
- 标签列表
-
- 前端设计模式 (75)
- 前端性能优化 (51)
- 前端模板 (66)
- 前端跨域 (52)
- 前端缓存 (63)
- 前端aes加密 (58)
- 前端脚手架 (56)
- 前端md5加密 (54)
- 前端路由 (61)
- 前端数组 (73)
- 前端js面试题 (50)
- 前端定时器 (59)
- 前端获取当前时间 (50)
- Oracle RAC (76)
- oracle恢复 (77)
- oracle 删除表 (52)
- oracle 用户名 (80)
- oracle 工具 (55)
- oracle 内存 (55)
- oracle 导出表 (62)
- oracle约束 (54)
- oracle 中文 (51)
- oracle链接 (54)
- oracle的函数 (57)
- 前端调试 (52)
本文暂时没有评论,来添加一个吧(●'◡'●)