# Simple Music Player ## 简介 Simple Music Player 是一个简易的PC端网页音乐播放器。本人是一名计算机专业的学生，这个项目主要用于学习和实践前端技术，回顾过往所学知识，特别是音乐播放器的实现。 ## 功能介绍 ### 音乐播放控制 - **播放/暂停**：一键控制音乐的播放和暂停，也可以通过按下空格键实现音乐的播放与暂停。 - **音量调节**：使用滑块调整音乐播放的音量大小。 ### 播放进度控制 - **进度条拖动**：通过点击进度条，快速跳转到音乐的指定播放位置。 ### 播放模式选择 - **循环播放**：单曲循环、列表循环，根据用户选择播放音乐。 - **顺序播放**：按照列表顺序播放音乐。 - **随机播放**：随机选择列表中的一首歌曲播放。 ### 歌词同步显示 - **歌词文件显示**：支持加载并显示LRC格式的歌词文件。 - **同步滚动**：歌词随着音乐播放进度同步滚动，增强用户体验。 ## 技术特点 ### 技术栈 - **HTML/CSS**：构建页面结构和样式。 - **JavaScript**：处理用户交互和音乐播放逻辑。 - **jQuery**：简化JavaScript代码，特别是DOM操作和事件处理。 - **AJAX**：用于从本地加载歌词文件。 - **Bootstrap**：实现响应式设计，确保播放器在不同设备上的兼容性。 ### 响应式设计 - **使用`rem`单位**：通过`rem`单位实现更灵活的布局，使播放器适应不同设备的屏幕尺寸。 - **媒体查询**：利用CSS媒体查询为不同屏幕尺寸提供定制化的样式。 ### 前端优化 - **`flexible.js`**：引入`flexible.js`以实现更精确的响应式设计，优化移动设备上的显示效果。 - **`normalize.css`**：使用`normalize.css`重置浏览器默认样式，保证跨浏览器的一致性。 ### 动态内容加载 - **AJAX**：用于从本地加载歌词文件，实现动态内容的加载。 ### 用户界面 - **Bootstrap**：实现响应式设计，确保播放器在不同设备上的兼容性。 ## 使用方法 1. 将音乐文件（如MP3格式）放置在项目的`music`目录下。 2. 将歌词文件（如LRC格式）放置在项目的`lyrics`目录下。 3. 打开`index.js`文件，修改音乐数据。 4. 打开`index.html`文件，选择音乐并播放，播放器将自动加载并显示相应的歌词。 ### 浏览器兼容性 - **推荐使用Google Chrome**：以获得最佳体验和性能。 - 项目应兼容所有现代浏览器，但在Chrome中表现最佳。 - 推荐从**集成开发环境**打开。 - 如果条件允许，建议部署到服务器后访问，可以使用**phpstudy**尝试一下。 ### 贡献和反馈 - 作为一个学生项目，Simple Music Player 欢迎任何形式的贡献和反馈。 - 如果你有任何改进建议或发现了bug，请通过GitHub的Issues或Pull Requests与我联系。 ### 许可 本项目采用 [MIT许可证](LICENSE)。详情请参阅 `LICENSE` 文件。 ### 致谢 - 感谢所有对这个项目感兴趣的人。作为一个学生项目，Simple Music Player 可能存在不足之处，但你们的宽容和支持是我继续学习和改进的动力。 - 项目中用到的所有图片与音乐来源于网络，如有侵权，请联系我删除。 --- Simple Music Player 是一个不断学习和进步的项目。如果该项目有什么不好或错误的地方，还请多多包涵。# Simple_Music_Player