SPlayer开源音乐播放器项目教程

1. 项目介绍

SPlayer 是一个基于 Vue 3、TypeScript、Naïve UI 和 Electron 开发的简约音乐播放器。它支持网页端与客户端两种模式，提供了丰富的功能，如扫码登录、手机号登录、桌面歌词、本地播放器模式、封面主题色自适应、本地歌曲管理、下载歌曲、歌单管理、每日推荐歌曲、私人 FM、云盘音乐管理、逐字歌词、歌词滚动翻译、MV 与视频播放、音乐频谱显示、音乐渐入渐出效果、PWA 支持、评论区、移动端基础适配等。本项目遵守 GNU Affero General Public License (AGPL-3.0) 许可协议。

2. 项目快速启动

环境准备

• Node.js（推荐最新稳定版）
• pnpm（推荐使用 pnpm 管理依赖）

克隆仓库

git clone https://github.com/imsyy/SPlayer.git

安装依赖

pnpm install

本地构建

pnpm build:win  # Windows 平台
pnpm build:linux # Linux 平台
pnpm build:mac   # MacOS 平台

构建完成后，会在 /dist 目录中输出安装包或可执行文件。

Docker 部署

构建镜像

docker build -t splayer .

运行容器

docker run -d --name SPlayer -p 25884:25884 splayer

服务器部署

1. 重复 Docker 部署中的 1-4 步骤。
2. 克隆仓库

git clone https://github.com/imsyy/SPlayer.git

3. 安装依赖

pnpm install

4. 编译打包

pnpm build

5. 将站点运行目录设置为 out/renderer 目录。

3. 应用案例和最佳实践

• 移动端适配：虽然本项目不打算开发移动端，但已对移动端进行了基础适配，保证基础可用性。开发者可以根据自身需求进一步完善移动端体验。
• 主题定制：SPlayer 支持封面主题色自适应，可以根据用户喜好或品牌风格进行定制。
• 音乐标签管理：提供简易的本地音乐标签编辑及封面修改功能，便于管理个人音乐库。

4. 典型生态项目

• NeteaseCloudMusicApi：本项目依赖于 NeteaseCloudMusicApi，用于提供网易云音乐 API 服务。
• YesPlayMusic：一个基于 Vue.js 开发的在线音乐播放器，可以与 SPlayer 互相参考。
• UnblockNeteaseMusic：本项目使用 UnblockNeteaseMusic 来支持播放部分无版权歌曲。