# music-player

**Repository Path**: liveling/music-player

## Basic Information

- **Project Name**: music-player
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-09-01
- **Last Updated**: 2026-09-01

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# LIVELING Music Player

一个零依赖的浮动音乐播放器组件，支持黑胶唱片动画、歌词、播放列表和 Meting API。

📦 [Gitee](https://gitee.com/liveling/music-player)

## 特性

- **零依赖**：纯 Vanilla JS + CSS，无任何框架依赖
- **CDN 引入**：一个 `<script>` 标签即可使用
- **Meting API**：自动从网易云/QQ音乐获取歌单
- **黑胶唱片**：旋转动画 + 唱片纹路
- **歌词同步**：LRC 格式歌词实时高亮
- **播放模式**：列表循环 / 单曲循环 / 随机播放
- **响应式**：移动端自动适配
- **可定制**：CSS 变量控制主题色

## 安装

```bash
npm install liveling-music-player
```

## 使用方式

### 方式一：CDN（推荐，适用于任何网站）

**jsDelivr（npm）**
```html
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/liveling-music-player@1/dist/player.min.css">
<script src="https://cdn.jsdelivr.net/npm/liveling-music-player@1/dist/player.min.js"></script>
<script>
  new LivelingMusicPlayer({
    api: "https://api-music.liveling.top/api",
    server: "netease",
    type: "playlist",
    id: "7777222277",
  }).mount();
</script>
```

**Gitee Pages**
```html
<link rel="stylesheet" href="https://liveling.gitee.io/music-player/player.min.css">
<script src="https://liveling.gitee.io/music-player/player.js"></script>
<script>
  new LivelingMusicPlayer({
    api: "https://api-music.liveling.top/api",
    server: "netease",
    type: "playlist",
    id: "7777222277",
  }).mount();
</script>
```

### 方式二：NPM + React

```jsx
import MusicPlayer from "liveling-music-player/react";
import "liveling-music-player/player.css";

function App() {
  return (
    <MusicPlayer
      api="https://api-music.liveling.top/api"
      server="netease"
      type="playlist"
      id="7777222277"
    />
  );
}
```

### 方式三：NPM + Vanilla JS

```js
import LivelingMusicPlayer from "liveling-music-player";
import "liveling-music-player/player.css";

new LivelingMusicPlayer({
  container: "#player",
  api: "https://api-music.liveling.top/api",
  server: "netease",
  type: "playlist",
  id: "7777222277",
}).mount();
```

## 配置项

| 参数 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| `container` | `string \| Element` | `document.body` | 挂载容器 |
| `api` | `string` | `""` | Meting API 地址 |
| `server` | `string` | `"netease"` | 音乐平台：`netease` / `tencent` / `kugou` / `kuwo` |
| `type` | `string` | `"playlist"` | 类型：`song` / `playlist` |
| `id` | `string` | `""` | 歌曲/歌单 ID |
| `audioUrl` | `string` | `""` | 直接音频地址（Meting 优先） |
| `title` | `string` | `"未知曲目"` | 曲名（直接模式） |
| `artist` | `string` | `"未知艺术家"` | 艺术家（直接模式） |
| `coverUrl` | `string` | `""` | 封面图（直接模式） |
| `volume` | `number` | `0.72` | 初始音量 |
| `position` | `string` | `"bottom-left"` | 位置：`bottom-left` / `bottom-right` |
| `enabled` | `boolean` | `true` | 是否启用 |

## 方法

```js
const player = new LivelingMusicPlayer(config);

player.mount();      // 挂载播放器
player.destroy();    // 销毁播放器
player.togglePlay(); // 播放/暂停
player.next();       // 下一首
player.prev();       // 上一首
player.play(index);  // 播放指定曲目
```

## 自定义主题

通过覆盖 CSS 变量自定义播放器外观：

```css
:root {
  --lp-accent: #5d78ff;      /* 主题色 */
  --lp-bg: rgba(255, 255, 255, 0.94);  /* 面板背景 */
  --lp-text: #18181b;        /* 文字颜色 */
  --lp-muted: #71717a;       /* 次要文字 */
  --lp-radius: 22px;         /* 圆角 */
  --lp-font: system-ui;      /* 字体 */
}
```

## 浏览器兼容

- Chrome 80+
- Firefox 78+
- Safari 14+
- Edge 80+

## License

MIT