Post

EchoWave Music

Online music search & playback platform with 5-source aggregation. Dark/Light theme, lyrics sync, playlist system. Lite version deployable on GitHub Pages.

EchoWave Music

🎵

Version License Sources Theme GitHub Stars

EchoWave Music 是一个在线音乐搜索与播放平台,聚合 5 大音源,提供流媒体播放、Karaoke 歌词同步、歌单管理等功能。现代玻璃态 UI 设计,支持 Light/Dark 双主题。完整版支持本地部署,精简版可直接部署于 GitHub Pages。

🌐 在线体验

👉 精简版 (GitHub Pages)

仅需浏览器,零依赖,支持 Light/Dark 主题切换。

完整版

1
2
3
4
5
git clone https://github.com/huiihao/EchoWave-Music.git
cd EchoWave-Music
pip install musicdl
python server.py
# → http://localhost:5000

📦 版本说明

🚀 版本📄 文件🎸 音源🌐 部署
完整版index.html + server.pyNetEase · QQ · Kuwo · Kugou · Migupython server.py
精简版docs/index.htmlNetEase · QQ MusicGitHub Pages

✨ 功能特点

特性说明
🔍 聚合搜索5 音源并行搜索 (Netease / QQ / Kuwo / Kugou / Migu),交替展示结果
🎵 流媒体播放CDN 直链,歌词 Karaoke 高亮同步
📋 歌单系统收藏 / 自定义歌单 / JSON 导入导出 / 删除管理
🌓 Light / Dark 主题侧栏一键切换,偏好持久保存
🏷️ 音质 & VIP 标签LOSSLESS / 320K / SVIP 实时显示
🖼️ 封面图展示搜索结果 + 播放器大封面 + 侧栏迷你封面
🎨 现代设计Space Grotesk + DM Sans 字体,玻璃态面板
📱 全响应式桌面 → 平板 → 手机,移动端底部标签栏
⌨️ 快捷键Space 播放暂停 · ←→ 快进退 5s · ↑↓ 音量 · N/P 切歌 · F 收藏 · L 歌词特效
🔌 代理自动检测同源 / localhost:5000 自动发现 musicdl 后端

📖 使用方法

完整版

1
2
3
pip install musicdl
python server.py
# 浏览器自动打开 → 全部音源可用

精简版

浏览器直接访问 GitHub Pages,即刻使用网易云 + QQ 音源。

⌨️ 快捷键

按键功能
Space播放 / 暂停
快退 / 快进 5s
音量增减
N P上一首 / 下一首
F收藏当前歌曲
L歌词特效切换

🏗️ 技术架构

1
2
3
4
5
浏览器前端 (index.html)
  │
  ├── 网易云 / QQ ──────────→ 直接 API(meting / tang)
  │
  └── 酷我 / 酷狗 / 咪咕 ──→ localhost:5000 → musicdl → CDN 直链

📦 项目结构

1
2
3
4
5
6
7
EchoWave-Music/
├── index.html      # 完整版前端(5 音源)
├── server.py       # 一体化服务器(静态 + 代理 API + 自动打开浏览器)
├── lite.html       # 精简版源文件
├── docs/
│   └── index.html  # GitHub Pages 部署(精简版 + Light/Dark)
└── README.md       # 文档

⚠️ 注意事项

本项目仅用于学习和技术交流。请尊重各音乐平台的版权,勿将本工具用于商业用途或大规模下载。音乐版权归各平台及权利人所有。


🙏 致谢

基于 @CharlesPikachu 的开源项目构建:

  • 🎵 MusicSquare — 浏览器端音乐搜索与播放
  • 🎶 musicdl — Python 多源音乐下载库

🤝 贡献

欢迎提交 Issue 和 Pull Request!

  1. Fork 本仓库
  2. 创建特性分支 (git checkout -b feature/AmazingFeature)
  3. 提交修改 (git commit -m 'Add some AmazingFeature')
  4. 推送分支 (git push origin feature/AmazingFeature)
  5. 打开 Pull Request
This post is licensed under CC BY 4.0 by the author.