简单的 JavaScript 音乐播放器
GitHub 地址：https://github.com/Wcowin/Muplayer
在线地址：https://wcowin.work/Muplayer/
本项目是一个基于原生 JavaScript、HTML 和 CSS 实现的响应式音乐播放器，支持本地音乐添加、播放列表管理、搜索、顺序/随机/单曲循环播放等功能。
适合初学者学习 Web 前端开发、音频 API 应用和响应式布局设计。
功能特性
- 🎵 本地音乐添加：支持从本地选择多首音频文件，自动加入播放列表。
- 🔍 智能搜索：可在播放列表、本地预置库和在线音乐库中搜索歌曲，支持中英文模糊匹配。
- 📃 播放列表管理：支持点击播放列表任意歌曲，实时高亮当前播放曲目，可一键清空列表。
- ⏯️ 播放控制：支持播放、暂停、上一首、下一首、进度拖动、音量调节。
- 🔁 播放模式：顺序播放、随机播放、单曲循环一键切换。
- 📱💻 响应式布局：适配 PC、平板、手机等多终端，支持暗黑模式。
- 🌐 在线搜索：支持 Jamendo 等在线音乐 API 搜索试听（如遇网络或 CORS 限制自动降级为本地推荐）。
- 🖼️ 专辑封面：自动显示歌曲封面，未设置时使用默认图片。
使用方法
- 克隆或下载本项目到本地，直接用浏览器打开
index.html即可使用。 - 点击“从本地添加音乐”按钮，选择你喜欢的音频文件。
- 在顶部搜索框输入歌曲名或歌手名，可检索当前播放列表、本地预置曲库及在线音乐。
- 点击播放列表任意歌曲即可切换播放。
- 通过底部按钮切换播放模式，调整音量和进度。
主要技术点
- 原生 JavaScript 操作 DOM 和 Audio API
- 音乐播放进度与时间格式化
- 多模式播放逻辑（顺序/随机/循环）
- 响应式 CSS 布局与暗黑模式适配
- 本地文件读取与 URL.createObjectURL
- 在线音乐 API 搜索与降级处理
目录结构
├── index.html
├── style.css
├── main.js
└── README.md
效果预览
扩展建议
- 支持歌词显示与同步
- 支持播放历史与收藏
- 支持自定义主题色
- 支持更多在线音乐平台
致谢
- Free Music Archive
- Jamendo API
- FontAwesome 图标库
本项目仅用于学习与交流，音乐版权归原作者所有。如有建议欢迎 issue 或 PR！
