# music-player

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

## Basic Information

- **Project Name**: music-player
- **Description**: 一个能播放本地音乐的静态网页~
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-08
- **Last Updated**: 2026-03-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### README

# 一个迷人的本地音乐播放器

自己缓存了很多mp3歌曲，在本地播放很繁琐和鸡肋所有写了这个网站，这是一个静态网页项目，能够播放本地音乐文件。现在支持添加新歌曲和歌词（不过要从源码配置），当前版本已完成播放音乐的基本功能，后续可能会有优化和扩展。

## 项目结构

```
music-player/
│
├── index.html               # 主页面
├── js/                      # JavaScript 源码目录
│   ├── main.js              # 主功能逻辑
│   ├── songs.js             # 歌曲列表
│   └── lyrics/              # 歌词数据
│
├── css/                     # CSS 样式目录
│   └── style.css            # 样式表
│
└── img/                     # 图像资源目录
    └── ...                  # 各类图片资源
```

## 功能

- 播放本地音乐文件
- 支持显示歌词
- 动态更新播放器界面
- 配置专辑封面和背景
- 歌曲、艺人搜索功能

## 添加新歌曲

要添加新的歌曲，在 `js/songs.js` 文件中按以下格式更新歌曲列表：

```javascript
// 歌曲列表
const songs = [
    { id: 1, title: '十年', singer: '陈奕迅', url: 'file:///path/to/十年.mp3' },
    { id: 2, title: '孤独患者', singer: '陈奕迅', url: 'file:///path/to/孤独患者.mp3' },
    // 新增歌曲示例:
    { id: 3, title: '新歌标题', singer: '歌手名字', url: 'file:///path/to/新歌.mp3' }
];
```

确保将 `url` 指向你本地的音乐文件路径。

## 添加新歌词

要添加新歌曲的歌词，在 `js/lyrics/tkmyjx.js` 文件中按以下格式更新歌词数据：

```javascript
// 歌词数据示例
const skyLimitLyric = [
    { time: 0.0, text: "天空没有极限 - G.E.M. 邓紫棋" },
    { time: 2.0, text: "词：G.E.M. 邓紫棋" },
    // 新增歌词示例:
    { time: 4.0, text: "新歌歌词" },
    { time: 6.0, text: "新歌歌词" }
];
```

## 使用说明

1. 将本地音乐文件放在可访问的位置，并更新 `songs.js` 中的歌曲列表。
2. 更新歌词文件以匹配所添加的歌曲。
3. 启动浏览器打开 `index.html` 文件。
4. 使用播放器界面进行音乐播放和歌词查看。

## 注意事项

- 该项目目前仍在开发中，功能尚未完全实现。
- 当前仅配置了一首邓紫棋的《天空没有极限》歌曲的专辑封面和背景，后续将动态配置歌词、专辑封面等功能。


## 最后更新

- 2026年03月07日：初始化项目，完成基本音乐播放功能。
- 2026年03月08日：优化播放器样式。

## LICENSE

本项目使用 [MIT License](LICENSE) 进行授权。