# mp3player

**Repository Path**: sleeper01/mp3player

## Basic Information

- **Project Name**: mp3player
- **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-04-07
- **Last Updated**: 2026-04-07

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# MP3播放器项目

## 项目简介

这是一个简单的MP3播放器网站，用于播放放置在项目资源目录下的MP3文件。

## 项目结构

```
mp3player/
├── index.html          # 主HTML文件
├── script.js           # JavaScript文件
├── style.css           # CSS文件
├── mp3/                # MP3文件目录
│   └── 20260406.mp3    # 示例MP3文件
└── resources/          # 资源目录
    └── pc_bg.jpg       # 背景图片
```

## 功能特点

1. **自动播放**：页面打开时会自动播放mp3目录下的唯一文件
2. **简洁界面**：只包含播放按钮、进度条和音量控制
3. **响应式设计**：适配不同屏幕尺寸
4. **美观背景**：使用本地背景图片，营造优雅氛围
5. **无滚动条**：背景图不会导致页面出现滚动条

## 使用方法

1. 将MP3文件放入 `mp3` 目录中
2. 在 `script.js` 文件中更新 `songs` 数组，添加歌曲信息
3. 打开 `index.html` 文件即可使用

## 技术实现

- **HTML5**：使用语义化标签构建页面结构
- **CSS3**：使用Flexbox布局和CSS变量实现响应式设计
- **JavaScript**：实现播放器核心功能，包括播放控制、进度条更新等
- **HTML5 Audio API**：用于音频播放和控制

## 浏览器兼容性

支持所有现代浏览器，包括Chrome、Firefox、Safari和Edge。

## 注意事项

- 由于浏览器的自动播放政策，页面加载时可能需要用户交互才能开始播放
- 请确保MP3文件的路径正确，否则播放器无法找到并播放文件
- 背景图片使用了本地文件 `resources/pc_bg.jpg`，请确保该文件存在

## 开发过程

1. 创建基本HTML结构，包含播放器界面
2. 添加CSS样式，实现美观的界面设计
3. 实现JavaScript功能，包括播放控制、进度条更新等
4. 优化用户体验，添加自动播放和错误处理
5. 调整界面布局，确保播放按钮图标居中
6. 添加背景图片，营造与《苏堤清明即事》诗意境相符的氛围
7. 打包项目，生成可部署的压缩文件

## 未来改进

1. 添加歌曲列表功能，支持多个MP3文件
2. 实现播放模式切换（单曲循环、列表循环等）
3. 添加歌曲封面显示功能
4. 实现音频可视化效果
5. 添加键盘快捷键支持