Skip to main content

音乐模块(可选)

版权声明 📖​

warning

本教程参考了互联网Github [XiangZi7]作者的教程，并结合自身实际部署过程中积累的经验编写而成。原始教程链接为KM-Music-Player，感谢原作者提供的宝贵参考资料。

本教程仅供学习和交流使用，任何人不得将本教程的内容用于商业用途。如需引用或转载，请务必注明原作者及本文出处。如侵权之处，请联系博主进行删除，谢谢~

介绍 📖​

KM-Music-Player (Kuriyama Mirai Music Player) 是一款基于 Vue 3.4、Vite 5、Pinia 和 Element-Plus 开发的开源 Web 音乐播放器。它采 用目前最新的技术栈，提供流畅且美观的音乐播放体验。

系统需求 ⚙️​

  • Node.js 版本需大于 18。

在线预览 👀​

代码仓库 ⭐​

GitHub 代码仓库

项目功能 🔨​

  • 支持上、下、循环、顺序、随机、单曲播放
  • 支持 MV 显示
  • 正常动漫播放
  • 歌词滚动显示
  • 网易云二维码登录
  • 动态切换主题
  • 暗黑模式

安装使用步骤 📔​

  • Clone

Github

使用 Git 克隆项目到本地：​

  git clone https://github.com/XiangZi7/KM-Music-Player.git

安装依赖​

进入项目目录并安装所需的依赖：

cd KM-Music-Player
pnpm install

启动开发服务器​

启动本地开发服务器，为你提供实时预览：

pnpm dev

打包并上传您服务器​

pnpm build

配置前端文件​

路径在：blog-frontend/kuailemao-blog/.env.development或者 .env.production

# 开发环境配置
NODE_ENV = development

# 博客代理地址
VITE_APP_BASE_API = '/api'
# 项目后端地址（来自blog-frontend/kuailemao-admin/.env.development配置文件中VITE_APP_BASE_URL）
#系统接口500异常也是这里配置的原因
    VITE_SERVE='http://192.168.80.128:8088/'
# 前台域名
VITE_FRONTEND_URL = 'http://localhost:99/'
# 音乐代理地址
VITE_MUSIC_BASE_API = '/wapi'
# 第三方开源集成的音乐前端地址，如果不配置上面菜单栏就不会出现音乐选项
VITE_MUSIC_FRONTEND_URL = 'http://localhost:5173/home'
# 左下角音乐后台
VITE_MUSIC_SERVE='http://192.168.80.128:3000/'
# 自己部署的一言接口，如果不填写会默认使用官网的接口，官网接口有每分钟qps限制，有时会得不到想要的结果
VITE_YIYAN_API = 'http://192.168.80.128:8000/'

效果展示​

文档说明

你可以查阅 网易云音乐 API 文档 以 获取更多信息和接口使用说明（可能需要魔法上网）。

项目截图 📷​

存在问题​

登录接口请求不到（待解决）

0%