# AtomicPlayer

**Repository Path**: honghutechnology/atomic-player

## Basic Information

- **Project Name**: AtomicPlayer
- **Description**: 由鸿鹄科技开发的原子播放器
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-02-12
- **Last Updated**: 2026-02-12

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Atomic Player

一款优雅的高颜值网页音乐播放器，采用 Apple Music 风格设计，支持歌词同步显示、多种播放模式和精美的动画效果。

![License](https://img.shields.io/badge/license-MIT-blue.svg)

## ✨ 特性

- 🎵 **音乐播放** - 支持 MP3 格式音频播放
- 🎤 **歌词同步** - 实时歌词显示，支持点击跳转
- 🎨 **精美界面** - Apple Music 风格设计，深色主题
- 📱 **响应式设计** - 完美适配桌面和移动设备
- 🎛️ **播放模式** - 顺序播放、列表循环、单曲循环、随机播放
- 🔊 **音量控制** - 支持音量调节和本地存储
- 📋 **播放列表** - 侧边栏播放列表，支持搜索
- 🖼️ **专辑封面** - 自动读取音频文件内置封面
- ✨ **动画效果** - 流畅的过渡动画和交互反馈

## 🚀 快速开始

### 环境要求

- 现代浏览器（Chrome、Firefox、Safari、Edge）
- 本地或 Web 服务器（推荐）

### 安装

1. 克隆仓库
```bash
git clone https://github.com/yourusername/atomic-player.git
cd atomic-player
```

2. 添加音乐文件
   - 将 MP3 文件放入 `music/` 目录
   - 将歌词文件（.lrc）放入 `music/` 目录（可选）

3. 启动服务器
```bash
# 使用 Node.js
npx serve -l 8080

# 或使用 Python
python -m http.server 8080
```

4. 打开浏览器访问 `http://localhost:8080`

## 📁 项目结构

```
atomic-player/
├── index.html          # 主页面
├── app.js              # 核心逻辑
├── styles.css          # 样式文件
├── songs.json          # 歌曲列表
├── icon/               # 图标文件
│   ├── play_black.svg
│   ├── pause_black.svg
│   ├── play_order.svg
│   ├── play_random.svg
│   ├── play_single_cycle.svg
│   └── cycle.svg
├── music/              # 音乐文件（需自行添加）
│   └── .gitkeep
└── js/
    └── songs.json      # 歌曲数据
```

## 🎵 添加音乐

### 方法一：使用 songs.json

编辑 `js/songs.json` 文件，添加歌曲信息：

```json
[
  {
    "title": "歌曲标题",
    "artist": "艺术家",
    "file": "music/歌曲文件名.mp3",
    "lrc": "music/歌词文件名.lrc"
  }
]
```

### 方法二：自动扫描

将 MP3 文件放入 `music/` 目录，播放器会自动扫描并生成播放列表。

## ⌨️ 快捷键

| 快捷键 | 功能 |
|--------|------|
| `Space` | 播放/暂停 |
| `←` | 后退 5 秒 |
| `→` | 前进 5 秒 |
| `Ctrl + ←` | 上一首 |
| `Ctrl + →` | 下一首 |
| `↑` | 增加音量 |
| `↓` | 降低音量 |
| `L` | 打开播放列表 |
| `Esc` | 关闭播放列表 |

## 🎨 自定义主题

编辑 `styles.css` 中的 CSS 变量来自定义主题：

```css
:root {
  --primary: #ff6b35;
  --primary-light: #ff8c5a;
  --text-primary: #ffffff;
  --text-secondary: rgba(255, 255, 255, 0.7);
  --text-muted: rgba(255, 255, 255, 0.5);
}
```

## 📝 歌词格式

支持标准 LRC 格式歌词文件：

```
[ti:歌曲标题]
[ar:艺术家]
[al:专辑]

[00:00.00]歌词内容
[00:05.00]第二行歌词
[00:10.00]第三行歌词
```

## 🔧 技术栈

- **HTML5** - 语义化结构
- **CSS3** - Flexbox/Grid 布局、动画、渐变
- **JavaScript** - ES6+、Audio API、Fetch API
- **Web Audio API** - 音频播放控制

## 📱 浏览器支持

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

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！

## 📄 许可证

[MIT](LICENSE) © Atomic Player