# Simple Music Player

**Repository Path**: wisterialee/Simple_Music_Player

## Basic Information

- **Project Name**: Simple Music Player
- **Description**: Simple Music Player 是一个简易的PC端网页音乐播放器。本人是一名计算机专业的学生，这个项目主要用于学习和实践前端技术，回顾过往所学知识，特别是音乐播放器的实现。
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 1
- **Created**: 2024-10-28
- **Last Updated**: 2026-07-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: HTML, CSS, JavaScript

## README

<p align="center">
  <img src="./asserts/logo.png" alt="Simple Music Player" width="160">
</p>

<h1 align="center">Simple Music Player</h1>

<p align="center">
  <a href="README_EN.md">English</a> | <span>中文</span>
</p>

## 简介

这是一个纯前端的简易音乐播放器，包含播放控制、歌单切换、歌词同步与响应式布局等功能，适合作为 Web 前端入门练手项目。

<table align="center">
  <tr>
    <td><img src="asserts/1.png" alt="效果图-主界面" width="420"></td>
    <td><img src="asserts/2.png" alt="效果图-歌单/歌词" width="420"></td>
  </tr>
</table>

## 功能

- 播放控制：播放/暂停、上一曲、下一曲
- 歌单切换：右侧歌单列表点选切歌，并高亮当前播放项
- 进度显示与跳转：实时展示当前时间/总时长，点击进度条跳转播放
- 播放模式：单曲循环、顺序播放、随机播放
- 倍速播放：多档倍速切换
- 音量控制：拖动音量条、静音/恢复
- 歌词同步：加载 `.lrc` 文件，高亮当前句并滚动显示
- 键盘操作：空格键播放/暂停

## 技术栈

- HTML5 / CSS3 / JavaScript
- jQuery
- Bootstrap
- Axios（用于加载歌词文件）
- normalize.css
- flexible.js（移动端适配）

## 快速开始

- 方式 1：直接打开
    - 直接用浏览器打开 [index.html](index.html) 即可使用
    - 部分浏览器对本地文件请求（歌词加载）限制较严格，如果遇到歌词无法加载，建议用方式 2
- 方式 2：使用本地静态服务器（推荐）
    - 在项目根目录启动静态服务，例如：
        - `python -m http.server 5173`
    - 浏览器访问：`http://127.0.0.1:5173/index.html`

## 本次修改

- 修复：切歌（上一曲/下一曲/歌单点选）后歌曲信息更新但不自动播放的问题
- 优化：歌单点选切歌时同步更新当前曲目索引，避免后续上一曲/下一曲跳转异常
- 文档：重构 README，补充功能说明、技术栈、效果展示与中英双语文档

## 说明

这是一个学生时期的练手项目：当年刚学完课程，为了把课堂知识串起来就写了这个播放器。因为是练手作品，历史遗留 BUG
可能会比较多、部分实现也不一定合理。毕业后想起来，顺手整理维护了一下；如果你只是路过看看，欢迎交流，不喜勿喷。

## 浏览器兼容性

兼容主流现代浏览器（Chrome / Edge / Firefox / Safari）。若出现音频格式支持问题，可尝试更换浏览器或将音频文件转为更通用格式。

## 贡献与反馈

欢迎提出 issue 或 PR，一起把这个小项目完善得更好。

## 许可

详见 [LICENSE.lic](LICENSE.lic)。

## 致谢

感谢每一位关注、使用与反馈的朋友，也感谢开源社区提供的各类资源与工具。