An open API service indexing awesome lists of open source software.

https://github.com/XiangZi7/GlassMusicPlayer

简约风 高颜值 Vue Player Music
https://github.com/XiangZi7/GlassMusicPlayer

css js music player vue

Last synced: over 1 year ago
JSON representation

简约风 高颜值 Vue Player Music

Awesome Lists containing this project

README

          

🎵 **提示:** KMMusicPlayer项目已迁移至新仓库 👇
[GlassMusicPlayer/kmmusic 分支](https://github.com/XiangZi7/GlassMusicPlayer/tree/kmmusic)

# Glass Music Player

![image](https://github.com/user-attachments/assets/a25e395e-9f55-455e-bc22-843de0698144)

### 介绍 📖

**Glass Music Player** 是一款基于
**Vue3.5**、**Vite5**、**Pinia**、**Tailwindcss** 和 **Element-Plus**
开发的开源 Web 音乐播放器。它采用目前最新的技术栈,提供流畅且美观的音乐播放体验。

### 系统需求 ⚙️

- **Node.js** 版本需大于 **18**。

### 在线预览 👀

- [Netlify 预览](https://topm.netlify.app)

### 代码仓库 ⭐

[GitHub 代码仓库](https://github.com/XiangZi7/KM-Music-Player)

### 项目功能 🔨

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

### 安装使用步骤 📔

- Clone

# Github

使用 Git 克隆项目到本地:

```bash
git clone https://github.com/XiangZi7/GlassMusicPlayer.git
```

安装依赖

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

```bash
cd GlassMusicPlayer
pnpm install
```

修改.env的VITE_APP_BASE_API

```
# 本地环境接口地址
VITE_APP_BASE_API = '你的网易云接口地址'
```

启动开发服务器

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

```bash
pnpm dev
```

文档说明

你可以查阅 [网易云音乐 API 文档](https://neteasecloudmusicapi.vercel.app/#/)
以获取更多信息和接口使用说明(可能需要魔法上网)。

### 项目截图 📷

![image](https://github.com/user-attachments/assets/40b285d9-5502-4c7c-822e-200e075c9cff)

![image](https://github.com/user-attachments/assets/eef183e3-9c32-4f75-b675-1f355515e025)

![image](https://github.com/user-attachments/assets/f9b0fd38-52c7-44b5-9754-e43836184d85)

![image](https://github.com/user-attachments/assets/06ded20f-3cca-419e-9b70-305534ee7fd2)

![image](https://github.com/user-attachments/assets/a8b0603a-8d52-4cfd-83b7-d61526bcfe13)

![image](https://github.com/user-attachments/assets/8a3f736b-b785-438c-a982-d58186c2e4e3)

![image](https://github.com/user-attachments/assets/c029af1a-307a-4900-a5f5-bbe5c52889dc)

![image](https://github.com/user-attachments/assets/db6d53e3-5079-4f8d-97ca-0669a1cff232)

![image](https://github.com/user-attachments/assets/a8dd1ef7-1f95-40e2-bc93-a27ab08c388b)

![image](https://github.com/user-attachments/assets/2586cb5f-3876-427d-aa6e-24b3f694ff22)

![image](https://github.com/user-attachments/assets/9d97aeef-5fdc-4ba6-a01a-aa8f8264931b)

![image](https://github.com/user-attachments/assets/7e719067-2861-4746-9f05-a85f0c161b21)

![image](https://github.com/user-attachments/assets/b34837d1-a506-4494-9f82-4ffb97593fb5)

![image](https://github.com/user-attachments/assets/f5537cd5-3af0-4daf-80ac-8738e0140979)

![image](https://github.com/user-attachments/assets/17495ede-cbca-401a-b95c-535062886daf)

![image](https://github.com/user-attachments/assets/f08d5102-78c4-4cc7-82d9-253e7aa12131)

![image](https://github.com/user-attachments/assets/18469079-1119-4dbe-81d9-79a6c78d65f9)

![image](https://github.com/user-attachments/assets/237232dd-c8c5-4e73-bf32-7bd43667ff9e)

![image](https://github.com/user-attachments/assets/d7fa9540-36cd-4ae0-b3d3-5546c26da54c)

![image](https://github.com/user-attachments/assets/47562e55-c584-4eca-a9b2-f32fe4df0fcd)

![image](https://github.com/user-attachments/assets/ccdb5bd9-a9f3-48f3-9301-3bb859381505)

### 项目后台接口 🧩

- [https://neteasecloudmusicapi.vercel.app/#/](https://neteasecloudmusicapi.vercel.app/#/)
(可能需魔法上网)

### 免责声明 ⚠️

KMMusicPlayer(Kuriyama Mirai Music
Player)项目仅用于学习和研究目的。使用该项目的用户需自行承担相关风险。本项目所使用的相关API和数据源均为第三方提供,使用时请遵循相关法律法规及第三方的使用条款。本项目不得用于任何商业目的,我们不对任何由于使用本项目而引起的直接或间接的损失或法律责任负责。

请在使用之前仔细阅读该免责声明,并确保遵守以上条款。谢谢您的理解与支持。

### QQ交流群 👨‍👨‍👦‍👦

![1686722147442.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2ef2a97c45df4a6fa5c78b34a28a42fc~tplv-k3u1fbpfcp-watermark.image#?w=238&h=250&s=10821&e=png&a=1&b=f8f8f8)

### 捐赠 (❤

如果觉得该项目能对你有帮助或喜欢可投食 | 微信 | 支付宝 | |
:--------------------------------------------------------------------------------:
|
:--------------------------------------------------------------------------------:
| |
Alipay QRcode
|
Wechat QRcode
|

### GitHub Star 趋势

[![Stargazers over time](https://starchart.cc/XiangZi7/KM-Music-Player.svg?variant=adaptive)](https://starchart.cc/XiangZi7/KM-Music-Player)

### 常见问题 (FAQ) ❓

- 如何解决启动错误?

请确保你的 Node.js 版本满足要求,并检查安装依赖时的错误信息。

- 播放器如何更改主题?

在侧边菜单栏中选择“主题”选项,然后你可以选择不同的主题风格。