🎵 云音乐播放器 - Cloudflare Worker版

基于 Cloudflare Worker 构建的现代化在线音乐播放器，集成了完整的前端应用代码，支持多平台音乐搜索和在线播放。

⚠️ 重要提醒: 本项目仅用于技术学习和交流，请勿用于商业用途。所有音乐内容版权归原作者所有，使用前请确保符合当地法律法规。

📋 版本更新日志

v2.2.0 (2025-9-11) - 本地存储歌单与移动端优化

🎯 重大新功能

• 本地存储歌单 - 支持保存最多3个歌单到本地存储，快速访问常用歌单
• 分享链接解析 - 智能解析网易云音乐分享链接，自动提取歌单名称和ID
• 移动端下拉菜单 - 移动端使用下拉菜单展示保存的歌单，节省屏幕空间
• 按需加载 - 保存歌单时只存储基本信息，点击时重新获取最新数据

v2.1.2 (2025-9-10) - 文档完善与版本对比

🎨 样式修复

• 可视化音频波浪 - 降低层级优化在移动端展示的遮挡，作为背景存在

v2.1.1 (2025-9-10) - 独立HTML版本发布

🎯 新增功能

• 独立HTML版本 - 新增 music.html 独立文件，包含完整的音乐播放器功能
• 自包含设计 - HTML文件内联所有CSS和JavaScript，无需外部依赖
• 直接使用 - 可直接在浏览器中打开使用，无需部署Worker
• API直连 - 直接连接音乐API，无需代理服务
• 完整功能 - 包含所有Worker版本的功能特性

v2.1.0 (2025-9-10) - 移动端体验大幅提升

🎯 重大修复

• 修复桌面端搜索不显示问题 - 解决了重复ID导致的搜索结果不显示bug
• 统一HTML结构 - 移除重复的移动端/桌面端HTML结构，使用单一响应式布局
• 优化响应式设计 - 重构CSS媒体查询，确保所有屏幕尺寸下的正确显示

✨ 新增功能

• 横滑切换页面 - 移动端支持左右滑动在搜索/播放器/歌词页面间切换
• 流畅切换动画 - 页面切换时的平滑淡入淡出和滑动动画效果
• 实时滑动反馈 - 滑动时的透明度和位移变化提供即时视觉反馈
• 智能触摸检测 - 避免与按钮、滑块等交互元素冲突
• 触觉反馈 - 页面切换时的设备震动反馈（支持的设备）
• 页面切换提示 - 显示当前页面名称（搜索/播放器/歌词）
• 滑动操作引导 - 首次使用时的滑动提示

🚀 性能优化

• CSS硬件加速 - 使用will-change和backface-visibility优化动画性能
• 触摸事件优化 - 添加touch-action: pan-x提升滑动流畅度
• 防抖处理 - 避免频繁触发页面切换
• 速度检测 - 支持快速滑动手势，提升操作响应性

🎨 用户体验改进

• 页面初始化逻辑 - 确保不同屏幕尺寸下的正确显示
• 分页指示器增强 - 支持点击直接跳转到指定页面
• 兼容性保持 - 完全兼容原有的点击切换功能
• 移动端优先 - 针对移动设备的专门优化

v2.0.0 (2025-9-4) - 架构重构

🏗️ 架构升级

• 完整Worker集成 - 将HTML/CSS/JavaScript完全集成到单个Worker文件
• API代理服务 - 内置音频和图片代理，解决跨域访问问题
• 响应式布局 - 统一的桌面端和移动端适配方案
• 移动端分页 - 三页式移动端导航（搜索/播放器/歌词）

✨ 功能特点

🎶 音乐功能

• 多平台搜索 - 支持小云音乐、小秋音乐、小我音乐、小狗音乐、小咕音乐等
• 在线播放 - 高质量音乐播放，支持多种音质选择
• 播放控制 - 播放/暂停、上一首/下一首、进度控制
• 歌词显示 - 实时歌词同步高亮显示
• 专辑封面 - 动态获取和显示专辑封面
• 歌单解析 - 支持网易云音乐歌单ID和分享链接解析
• 本地存储 - 保存常用歌单到本地，支持快速访问（最多3个）

🚀 技术特性

• Cloudflare Worker - 边缘计算，全球部署
• 单文件架构 - 所有代码集成在一个Worker文件中
• 原生JavaScript - 无框架依赖，纯原生代码实现
• 响应式设计 - 完美适配桌面端和移动端
• 现代化UI - 渐变背景和流畅的动画效果
• 音频可视化 - 实时音频波形显示

📱 移动端特性

• 横滑切换 - 左右滑动在搜索/播放器/歌词页面间切换
• 流畅动画 - 页面切换时的平滑过渡动画效果
• 智能触摸 - 避免与其他交互元素冲突的触摸检测
• 触觉反馈 - 页面切换时的震动反馈（支持的设备）
• 下拉菜单 - 移动端使用下拉菜单展示保存的歌单，节省屏幕空间
• 响应式交互 - 根据屏幕尺寸自动切换桌面端tab和移动端下拉菜单
• 操作引导 - 首次使用时的滑动提示和页面切换提示
• 分页导航 - 底部分页指示器，支持点击直接跳转

🛠️ 工程化特性

• 边缘计算 - 基于 Cloudflare Worker 部署
• 零配置部署 - 无需服务器，一键部署
• 全球CDN - Cloudflare全球网络加速
• API代理 - 内置音频/图片代理，解决跨域问题
• 智能缓存 - 自动资源缓存优化
• 统一架构 - 单一HTML结构适配所有设备

🚀 快速开始

🎯 两种使用方式

方式一：独立HTML版本（推荐新手）

1. 下载文件

2. 直接下载 music.html 文件

3. 直接使用

4. 在浏览器中打开 music.html 文件
5. 无需任何配置，即可开始使用

方式二：Cloudflare Worker版本

📋 前提条件

• 安装 Node.js (版本 16 或更高)
• 安装 Wrangler CLI
• 拥有 Cloudflare 账户

🔧 部署步骤

1. 克隆项目

git clone <your-repo-url>
cd musicPage

1. 安装 Wrangler CLI

npm install -g wrangler

1. 登录到 Cloudflare

wrangler login

1. 配置 Worker 名称 编辑 wrangler.toml 文件中的 name 字段：

name = "your-music-player"  # 修改为你想要的名称

1. 部署到 Cloudflare Workers

wrangler publish

1. 访问你的应用 部署成功后，访问 https://your-music-player.<your-subdomain>.workers.dev

🎉 完成！

你的音乐播放器现在已经在全球CDN上运行了！

💻 本地开发

开发环境设置

1. 启动本地开发服务器

wrangler dev

1. 访问本地应用 在浏览器中打开 http://localhost:8787

2. 实时开发 修改 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动画控制
└── 用户交互
    ├── 搜索功能         # 多平台音乐搜索
    ├── 播放控制         # 播放/暂停/切换
    ├── 进度控制         # 拖拽定位播放
    ├── 音量调节         # 实时音量控制
    ├── 歌单管理         # 本地存储 + 分享链接解析
    ├── 移动端下拉菜单   # 响应式歌单展示
    ├── 桌面端Tab标签    # 横向歌单导航
    ├── 下载功能         # 音乐/歌词下载
    └── 移动端手势       # 横滑切换 + 触觉反馈

后端架构

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！

1. Fork 项目
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 打开Pull Request

📄 许可证

本项目基于 MIT 许可证开源。

🙏 致谢

• 原版HTML代码 - 感谢 Linux.do 论坛 提供的原版HTML音乐播放器代码
• Cloudflare Workers - 边缘计算平台
• Font Awesome - 图标库
• 音乐API提供方 - GD音乐台(music.gdstudio.xyz)音乐数据接口