savoygu/music-player

:notes: 在线音乐播放器，一起听音乐吧

TypeScriptMIT

音乐播放器

运行环境

安装 pnpm

npm i -g pnpm

配置七牛云 [可选]

音乐列表页面会调用七牛云接口，需要提供七牛云相关配置：server/midway/.env.backup，记得把 .env.backup 重命名为 .env

运行项目

同时启动客户端和服务器

# 第一步，安装所有依赖
pnpm install

# 第二步，同时启动客户端与服务器
npm run dev

客户端地址：

http://localhost:5173

服务器地址：

http://localhost:7001

功能概览

客户端

音乐播放（上一曲/下一曲/暂停/播放/播放模式/音量/快进）
音乐列表（本地/在线模式切换）
音乐展示（列表/卡片两种形式）
主题切换（绿/橙）

服务器

获取音乐列表
上传音乐

技术栈

客户端

基于 Vue.js 3.x 版本来开发：vue3 分支

vue.js（渐进式 JavaScript 框架）
vue-router（Vue.js 的官方路由）
pinia（Vue.js 的状态管理库）
vue3-lazy（基于 Vue3.x 的图片懒加载插件）
sass-bem-next（基于 sass 来编写 BEM 风格样式的包）
tailwindcss（工具优先的 CSS 框架）
@icon-park/vue-next（基于 Vue3.x 的 IconPark 图标库插件）

基于 Vue.js 3.x + TSX 来开发：main 分支

基于 React 18.x 版本来开发：react 分支

服务端

基于 Node.js 框架 Midwayjs 来构建服务

项目部署

客户端部署在 Github

服务器部署在 Render

图片、音频存储在七牛云

后续计划