跳转至

简单的 JavaScript 音乐播放器

Note

GitHub 地址：https://github.com/Wcowin/Muplayer

本项目是一个基于原生 JavaScript、HTML 和 CSS 实现的响应式音乐播放器，支持本地音乐添加、播放列表管理、搜索、顺序/随机/单曲循环播放等功能。适合初学者学习 Web 前端开发、音频 API 应用和响应式布局设计。

功能特性

  • 🎵 本地音乐添加：支持从本地选择多首音频文件，自动加入播放列表。
  • 🔍 智能搜索：可在播放列表、本地预置库和在线音乐库中搜索歌曲，支持中英文模糊匹配。
  • 📃 播放列表管理：支持点击播放列表任意歌曲，实时高亮当前播放曲目，可一键清空列表。
  • ⏯️ 播放控制：支持播放、暂停、上一首、下一首、进度拖动、音量调节。
  • 🔁 播放模式：顺序播放、随机播放、单曲循环一键切换。
  • 📱💻 响应式布局：适配 PC、平板、手机等多终端，支持暗黑模式。
  • 🌐 在线搜索：支持 Jamendo 等在线音乐 API 搜索试听（如遇网络或 CORS 限制自动降级为本地推荐）。
  • 🖼️ 专辑封面：自动显示歌曲封面，未设置时使用默认图片。

使用方法

  1. 克隆或下载本项目到本地，直接用浏览器打开 index.html 即可使用。
  2. 点击“从本地添加音乐”按钮，选择你喜欢的音频文件。
  3. 在顶部搜索框输入歌曲名或歌手名，可检索当前播放列表、本地预置曲库及在线音乐。
  4. 点击播放列表任意歌曲即可切换播放。
  5. 通过底部按钮切换播放模式，调整音量和进度。

主要技术点

  • 原生 JavaScript 操作 DOM 和 Audio API
  • 音乐播放进度与时间格式化
  • 多模式播放逻辑（顺序/随机/循环）
  • 响应式 CSS 布局与暗黑模式适配
  • 本地文件读取与 URL.createObjectURL
  • 在线音乐 API 搜索与降级处理

目录结构

1
2
3
4
├── index.html
├── style.css
├── main.js
└── README.md

效果预览

image

扩展建议

  • 支持歌词显示与同步
  • 支持播放历史与收藏
  • 支持自定义主题色
  • 支持更多在线音乐平台

致谢

本项目仅用于学习与交流，音乐版权归原作者所有。如有建议欢迎 issue 或 PR！