基于 Cloudflare Worker 构建的现代化在线音乐播放器，集成了完整的前端应用代码，支持多平台音乐搜索和在线播放。
⚠️ 重要提醒: 本项目仅用于技术学习和交流，请勿用于商业用途。所有音乐内容版权归原作者所有，使用前请确保符合当地法律法规。
- 可视化音频波浪 - 降低层级优化在移动端展示的遮挡，作为背景存在
- 独立HTML版本 - 新增
music.html独立文件，包含完整的音乐播放器功能 - 自包含设计 - HTML文件内联所有CSS和JavaScript，无需外部依赖
- 直接使用 - 可直接在浏览器中打开使用，无需部署Worker
- API直连 - 直接连接音乐API，无需代理服务
- 完整功能 - 包含所有Worker版本的功能特性
- 修复桌面端搜索不显示问题 - 解决了重复ID导致的搜索结果不显示bug
- 统一HTML结构 - 移除重复的移动端/桌面端HTML结构，使用单一响应式布局
- 优化响应式设计 - 重构CSS媒体查询，确保所有屏幕尺寸下的正确显示
- 横滑切换页面 - 移动端支持左右滑动在搜索/播放器/歌词页面间切换
- 流畅切换动画 - 页面切换时的平滑淡入淡出和滑动动画效果
- 实时滑动反馈 - 滑动时的透明度和位移变化提供即时视觉反馈
- 智能触摸检测 - 避免与按钮、滑块等交互元素冲突
- 触觉反馈 - 页面切换时的设备震动反馈（支持的设备）
- 页面切换提示 - 显示当前页面名称（搜索/播放器/歌词）
- 滑动操作引导 - 首次使用时的滑动提示
- CSS硬件加速 - 使用
will-change和backface-visibility优化动画性能 - 触摸事件优化 - 添加
touch-action: pan-x提升滑动流畅度 - 防抖处理 - 避免频繁触发页面切换
- 速度检测 - 支持快速滑动手势，提升操作响应性
- 页面初始化逻辑 - 确保不同屏幕尺寸下的正确显示
- 分页指示器增强 - 支持点击直接跳转到指定页面
- 兼容性保持 - 完全兼容原有的点击切换功能
- 移动端优先 - 针对移动设备的专门优化
- 完整Worker集成 - 将HTML/CSS/JavaScript完全集成到单个Worker文件
- API代理服务 - 内置音频和图片代理，解决跨域访问问题
- 响应式布局 - 统一的桌面端和移动端适配方案
- 移动端分页 - 三页式移动端导航（搜索/播放器/歌词）
- 多平台搜索 - 支持小云音乐、小秋音乐、小我音乐、小狗音乐、小咕音乐等
- 在线播放 - 高质量音乐播放，支持多种音质选择
- 播放控制 - 播放/暂停、上一首/下一首、进度控制
- 歌词显示 - 实时歌词同步高亮显示
- 专辑封面 - 动态获取和显示专辑封面
- Cloudflare Worker - 边缘计算，全球部署
- 单文件架构 - 所有代码集成在一个Worker文件中
- 原生JavaScript - 无框架依赖，纯原生代码实现
- 响应式设计 - 完美适配桌面端和移动端
- 现代化UI - 渐变背景和流畅的动画效果
- 音频可视化 - 实时音频波形显示
- 横滑切换 - 左右滑动在搜索/播放器/歌词页面间切换
- 流畅动画 - 页面切换时的平滑过渡动画效果
- 智能触摸 - 避免与其他交互元素冲突的触摸检测
- 触觉反馈 - 页面切换时的震动反馈（支持的设备）
- 操作引导 - 首次使用时的滑动提示和页面切换提示
- 分页导航 - 底部分页指示器，支持点击直接跳转
- 边缘计算 - 基于 Cloudflare Worker 部署
- 零配置部署 - 无需服务器，一键部署
- 全球CDN - Cloudflare全球网络加速
- API代理 - 内置音频/图片代理，解决跨域问题
- 智能缓存 - 自动资源缓存优化
- 统一架构 - 单一HTML结构适配所有设备
-
下载文件
- 直接下载
music.html文件
- 直接下载
-
直接使用
- 在浏览器中打开
music.html文件 - 无需任何配置，即可开始使用
- 在浏览器中打开
- 安装 Node.js (版本 16 或更高)
- 安装 Wrangler CLI
- 拥有 Cloudflare 账户
- 克隆项目
git clone <your-repo-url>
cd musicPage- 安装 Wrangler CLI
npm install -g wrangler- 登录到 Cloudflare
wrangler login- 配置 Worker 名称
编辑
wrangler.toml文件中的name字段：
name = "your-music-player" # 修改为你想要的名称- 部署到 Cloudflare Workers
wrangler publish- 访问你的应用
部署成功后，访问
https://your-music-player.<your-subdomain>.workers.dev
你的音乐播放器现在已经在全球CDN上运行了！
- 启动本地开发服务器
wrangler dev-
访问本地应用 在浏览器中打开
http://localhost:8787 -
实时开发 修改
worker.js文件，保存后自动重新加载
- 使用浏览器开发者工具调试JavaScript应用
- 查看Network面板监控API请求和资源加载
- 使用Console面板查看日志和错误信息
- 在Cloudflare Dashboard中查看Worker日志
musicPage/
├── worker.js # 🎯 Worker版本：完整的Web应用
│ ├── 应用配置 # APP_CONFIG - 应用基本配置
│ ├── HTML模板 # BASE_HTML - 统一响应式HTML结构
│ ├── CSS样式 # getCSS() - 完整的样式定义
│ │ ├── 桌面端布局 # CSS Grid三列布局
│ │ ├── 移动端适配 # 响应式媒体查询
│ │ ├── 动画效果 # 页面切换和交互动画
│ │ └── 硬件加速 # CSS性能优化
│ ├── JavaScript应用 # getJS() - 原生JavaScript应用逻辑
│ │ ├── 音乐搜索功能 # 多平台音乐搜索
│ │ ├── 播放器控制 # 音乐播放、暂停、切换
│ │ ├── 歌词同步显示 # 实时歌词高亮
│ │ ├── 专辑图片获取 # 动态专辑封面
│ │ ├── 下载功能 # 音乐和歌词下载
│ │ ├── 移动端交互 # 横滑切换 + 触摸手势
│ │ │ ├── 触摸事件处理 # 智能触摸检测
│ │ │ ├── 滑动动画 # 流畅切换动画
│ │ │ ├── 触觉反馈 # 震动反馈
│ │ │ └── 操作引导 # 滑动提示
│ │ ├── 音频可视化 # Canvas波形显示
│ │ └── 页面初始化 # 响应式显示控制
│ └── Worker处理函数 # Cloudflare Worker请求处理
│ ├── API代理服务 # 音乐API请求代理
│ ├── 音频代理 # 音频流代理服务
│ ├── 图片代理 # 专辑封面代理服务
│ └── CORS处理 # 跨域请求处理
├── music.html # 🎯 独立HTML版本：自包含音乐播放器
│ ├── 内联CSS样式 # 完整的样式定义（内联）
│ ├── 内联JavaScript # 完整的应用逻辑（内联）
│ ├── 响应式设计 # 桌面端和移动端适配
│ ├── 移动端横滑 # 触摸手势和页面切换
│ ├── 音频可视化 # Canvas波形显示
│ └── 直接API连接 # 无需代理的API调用
├── wrangler.toml # 📝 Wrangler配置文件
├── index.html # 📄 原版HTML文件（参考）
└── README.md # 📖 项目文档
原生HTML/CSS/JavaScript
├── 统一响应式布局 # 单一HTML结构 + CSS Grid + Flexbox
├── 移动端交互增强 # 横滑切换 + 触摸事件 + 分页导航
├── 音乐播放器 # HTML5 Audio API
├── 歌词同步显示 # 实时解析LRC格式
├── 专辑图片展示 # 动态加载和缓存
├── 音频可视化 # Canvas 2D渲染
├── 动画系统 # CSS过渡 + JavaScript动画控制
└── 用户交互
├── 搜索功能 # 多平台音乐搜索
├── 播放控制 # 播放/暂停/切换
├── 进度控制 # 拖拽定位播放
├── 音量调节 # 实时音量控制
├── 下载功能 # 音乐/歌词下载
└── 移动端手势 # 横滑切换 + 触觉反馈
Cloudflare Worker
├── 静态资源服务 # HTML/CSS/JS内联服务
├── API代理服务 # 音乐API请求代理
├── 音频代理 # 音频流代理服务
├── 图片代理 # 专辑封面代理服务
├── CORS处理 # 跨域请求处理
└── 缓存优化 # 智能资源缓存
- 仅供学习: 本项目仅用于技术学习和交流，请勿用于商业用途
- 音乐版权: 所有音乐内容版权归原作者所有，本项目不存储任何音乐文件
- API使用: 项目使用第三方API
music-api.gdstudio.xyz获取音乐数据，请遵守相关服务条款 - 合规使用: 用户应自行确保使用行为符合当地法律法规
- 本项目不对音乐内容的版权承担任何责任
- 使用者应自行承担使用本项目可能产生的风险
- 如有版权争议，请联系相关版权方处理
- 本项目作者不对因使用本项目而产生的任何损失负责
- 浏览器兼容: 需要支持ES6+和HTML5 Audio API的现代浏览器
- 网络环境: 需要能够访问音乐API和音频资源
- Worker限制: 遵循Cloudflare Worker的CPU时间和内存限制
- 移动端: 支持触摸操作和手势识别，自动适配移动设备
- 性能要求: 支持CSS硬件加速和触摸事件处理的设备
欢迎提交Issue和Pull Request！
- Fork 项目
- 创建特性分支 (
git checkout -b feature/AmazingFeature) - 提交更改 (
git commit -m 'Add some AmazingFeature') - 推送到分支 (
git push origin feature/AmazingFeature) - 打开Pull Request
本项目基于 MIT 许可证开源。
- 原版HTML代码 - 感谢 Linux.do 论坛 提供的原版HTML音乐播放器代码
- Cloudflare Workers - 边缘计算平台
- Font Awesome - 图标库
- 音乐API提供方 - GD音乐台(music.gdstudio.xyz)音乐数据接口