# 雪人音乐播放器-Web歌词页面

**Repository Path**: lijingchn/LRCMusic_WebLyricSync

## Basic Information

- **Project Name**: 雪人音乐播放器-Web歌词页面
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-02-24
- **Last Updated**: 2026-03-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README



# LRCMusic WebLyricSync

Web 歌词同步与可视化效果系统

## 项目简介

LRCMusic WebLyricSync 是一个基于 Web 的歌词同步与可视化效果系统，通过 WebSocket 实时接收歌词数据和播放状态，配合丰富的视觉特效为音乐播放提供沉浸式体验。

## 功能特性

- **实时歌词同步**：通过 WebSocket 接收并显示实时歌词
- **情绪可视化**：根据歌曲情绪自动切换对应的视觉效果
- **多种显示模式**：支持不同的歌词显示样式和字体大小调整
- **视频背景支持**：支持空闲视频和背景视频自动切换
- **全屏模式**：提供沉浸式的全屏播放体验
- **响应式设计**：适配不同尺寸的显示设备

## 目录结构

```
LRCMusic_WebLyricSync/
├── VJ/                         # VJ 视觉效果系统
│   ├── index.html              # 主页面
│   ├── standalone_index.html   # 独立运行版本
│   ├── README.md               # VJ 系统说明
│   ├── css/
│   │   └── styles.css          # 样式文件
│   ├── js/
│   │   ├── main.js             # 主程序逻辑
│   │   ├── config.js           # 配置管理
│   │   ├── websocket.js        # WebSocket 连接
│   │   ├── mood-handler.js     # 情绪处理
│   │   └── effects/            # 视觉效果模块
│   │       ├── BaseEffect.js   # 基础效果类
│   │       ├── AngryEffect.js  # 愤怒效果
│   │       ├── CalmEffect.js   # 平静效果
│   │       ├── DreamyEffect.js # 梦幻效果
│   │       ├── EpicEffect.js   # 史诗效果
│   │       ├── ExcitedEffect.js# 兴奋效果
│   │       ├── HappyEffect.js  # 快乐效果
│   │       ├── InspirationalEffect.js # 励志效果
│   │       ├── NostalgicEffect.js # 怀旧效果
│   │       ├── PlayfulEffect.js # 俏皮效果
│   │       ├── RomanticEffect.js # 浪漫效果
│   │       ├── SadEffect.js    # 悲伤效果
│   │       └── TenseEffect.js  # 紧张效果
│   ├── fonts/
│   │   └── MINGSONG-B.ttf      # 歌词字体
│   └── video/
│       └── idle_default.MOV   # 默认空闲视频
└── LICENSE                     # 许可证
```

## 快速开始

### 1. 启动服务

使用任意 Web 服务器托管 VJ 目录，例如：

```bash
# 使用 Python
python -m http.server 8080 -d VJ

# 使用 Node.js
npx http-server -p 8080 ./VJ
```

### 2. 访问页面

在浏览器中打开：`http://localhost:8080`

### 3. 配置连接

首次使用需要配置 WebSocket 服务器地址：

1. 点击设置按钮打开配置面板
2. 输入 WebSocket 服务器地址
3. 点击"连接"按钮

## 消息格式

### 歌词消息 (lyrics)

```json
{
  "type": "lyrics",
  "data": {
    "lyrics": [
      {"time": 0, "text": "第一句歌词"},
      {"time": 3000, "text": "第二句歌词"}
    ]
  }
}
```

### 播放状态 (playbackState)

```json
{
  "type": "playbackState",
  "data": {
    "state": "playing"  // playing, paused, stopped
  }
}
```

### 时间更新 (timeUpdate)

```json
{
  "type": "timeUpdate",
  "data": {
    "currentTime": 15000,
    "duration": 180000
  }
}
```

### 歌曲情绪 (SONG_MOOD)

```json
{
  "type": "SONG_MOOD",
  "data": {
    "mood": "happy"  // angry, calm, dreamy, epic, excited, happy, inspirational, nostalgic, playful, romantic, sad, tense
  }
}
```

### 全量同步 (fullSync)

```json
{
  "type": "fullSync",
  "data": {
    "title": "歌曲名称",
    "type": "歌曲类型",
    "lyrics": [...],
    "currentTime": 15000,
    "duration": 180000,
    "state": "playing"
  }
}
```

## 情绪类型与特效

| 情绪 | 效果描述 |
|------|----------|
| Angry | 激烈、动态的红色系视觉 |
| Calm | 平静、柔和的蓝色系视觉 |
| Dreamy | 梦幻、飘渺的紫色系视觉 |
| Epic | 宏大、壮观的金色系视觉 |
| Excited | 兴奋、活力的橙色系视觉 |
| Happy | 快乐、明亮的黄色系视觉 |
| Inspirational | 励志、温暖的金色视觉 |
| Nostalgic | 怀旧、复古的棕色调视觉 |
| Playful | 俏皮、活泼的多彩视觉 |
| Romantic | 浪漫、温馨的粉色系视觉 |
| Sad | 悲伤、忧郁的蓝色调视觉 |
| Tense | 紧张、压抑的暗色系视觉 |

## 添加新特效

1. 在 `js/effects/` 目录下创建新的效果类文件
2. 继承 `BaseEffect` 基类
3. 实现必要的生命周期方法
4. 在 `EffectManager.js` 中注册新效果

## 浏览器兼容性

- Chrome 80+
- Firefox 75+
- Safari 13+
- Edge 80+

## 许可证

MIT License