🎵 Open Music 音乐网站
一个设计精美、功能丰富的在线音乐播放器，提供流畅的音乐浏览与收听体验。
Open Music 是一款采用 Apple Music 风格设计的在线音乐网站， 支持歌曲搜索、榜单浏览、在线播放、歌词展示、收藏管理、音质切换及歌曲下载等功能。 界面简洁优雅，响应式布局适配桌面与移动端，提供流畅的交互体验。
✨ 核心功能
智能搜索
支持歌曲名、歌手名关键词搜索，实时返回匹配结果热门榜单
热歌榜、新歌榜、飙升榜、抖音热歌、经典老歌、粤语金曲在线播放
支持播放/暂停、上下曲切换、进度拖拽、音量控制歌词展示
实时歌词高亮跟随播放进度，支持全屏歌词面板收藏管理
一键收藏喜爱歌曲，本地持久化存储，支持随时查看最近播放
自动记录播放历史，方便快速回听近期歌曲多音质切换
标准、高品、HQ超品质、SQ无损四档音质可选歌曲下载
支持下载当前播放歌曲为 MP3 文件⌨️ 键盘快捷键
在非输入状态下，可使用以下快捷键快速操控播放器：
| 快捷键 | 功能 |
|---|---|
| 空格 | 播放 / 暂停 |
| ← / → | 快退 5 秒 / 快进 5 秒 |
| ↑ / ↓ | 上一首 / 下一首 |
| L | 打开 / 关闭歌词面板 |
| Esc | 关闭歌词面板或侧边栏 |
📱 响应式设计
网站在桌面端展示完整的侧边栏导航和播放栏；在移动端（宽度 < 900px）自动切换为紧凑布局， 侧边栏折叠为汉堡菜单，播放栏精简，封面网格自适应调整列数，确保在小屏幕设备上也能获得良好的使用体验。
🛠 技术特点
纯前端实现，无需后端部署。使用原生 JavaScript 编写，不依赖任何前端框架。 采用 CSS 变量统一管理主题色、圆角、阴影等视觉参数，支持 backdrop-filter 毛玻璃效果。数据请求带缓存机制（TTL 10分钟），减少重复网络请求。
📡 Open Music API
一个轻量级的音乐数据接口服务，提供歌曲搜索、详情获取、歌词查询等功能。
API 基础地址：https://music-server.pages.dev
所有接口均使用 GET 请求，支持跨域访问（CORS）。返回格式默认为 JSON， 也可通过参数指定返回纯文本格式。
🔍 1. 歌曲搜索
根据关键词搜索歌曲，返回匹配的歌曲列表。
请求参数
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| msg | string | 必填 | 搜索关键词，如歌曲名、歌手名 |
| p | number | 可选 | 页码，从 1 开始计数，默认 1 |
| sc | number | 可选 | 每页返回数量，范围 1-100，默认 10 |
| type | string | 可选 | 返回格式：json（默认）或 text |
请求示例
响应示例
🎧 2. 歌曲详情（通过 song_id）
根据歌曲 ID 获取详细信息，包括封面、播放链接、音质、歌词等。
请求参数
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| sid | string | 必填 | 歌曲唯一标识 ID（从搜索结果中获取） |
| br | number | 可选 | 音质等级，1-5，默认 4。详见下方音质说明 |
| fields | string | 可选 | 指定返回字段，逗号分隔。可选：cover、url、br、lyric |
| type | string | 可选 | 返回格式：json（默认）、text、lyric |
请求示例
响应示例
📦 3. 批量查询
支持批量查询多个歌曲 ID，或批量获取搜索结果中指定序号的歌曲详情。
批量 song_id（逗号分隔）
返回一个数组，包含每个 song_id 对应的详情数据。
批量序号 n（配合搜索关键词）
在搜索结果中批量获取指定序号的歌曲详情，无需先获取列表再逐个查询。
🎚 音质参数说明
参数 br 的可选值及对应音质：
📋 fields 参数详解
使用 fields 参数可以精确控制返回的数据内容，减少不必要的网络传输：
| 字段值 | 返回内容 |
|---|---|
| cover | 歌曲封面图片 URL |
| url | 歌曲播放链接（music_url） |
| br | 歌曲音质描述（br_size） |
| lyric | 歌词数据（含时间轴） |
示例：fields=cover,url 仅返回封面和播放链接，不返回音质描述和歌词。
🔧 搜索 + 单曲详情（使用 n 参数）
在搜索的同时直接获取某首歌曲的详情，适用于"搜索后自动播放第一首"等场景。
🧩 Open Music 音乐卡片组件
一个可嵌入任意网页的浮动音乐播放器卡片，支持搜索、播放、歌词展示等功能。
组件地址：https://open-music.pages.dev/music-card.js
音乐卡片是一个独立的 JavaScript 组件，基于原生 JS 编写，无需任何框架依赖。 引入脚本后会自动在页面右下角创建一个浮动音乐播放卡片，支持拖拽移动、最小化、全屏等交互。
🚀 快速开始
1. 引入 Font Awesome 图标库（如页面已有可跳过）
2. 引入音乐卡片脚本
引入后卡片会自动初始化并显示在页面右下角。默认搜索"热门歌曲"并加载列表。
⚙️ 配置选项
在引入脚本之前，通过全局变量 window.__musicCardOptions 配置参数：
| 配置项 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| baseURL | string | 'https://music-server.pages.dev' | API 服务地址，可替换为自部署的 API |
| mode | string | 'card' | 显示模式： 'card' — 默认卡片模式 'float' — 启动时最小化为浮动图标 'fullscreen' — 启动时全屏展开 |
📖 使用示例
示例一：默认卡片模式
示例二：启动即最小化（浮动图标）
示例三：指定挂载容器
🎮 卡片功能
歌曲搜索
输入关键词搜索歌曲，实时返回结果列表播放控制
播放/暂停、上一首/下一首、进度拖拽歌词同步
实时歌词高亮，全屏模式下完整展示五档音质
普通/高品质/超品/无损/Hi-Res 可切换自由拖拽
按住标题栏拖动卡片到任意位置全屏模式
一键切换到全屏沉浸式播放体验📝 手动控制（高级用法）
如果通过 new MusicCard() 手动初始化，可以获取实例并调用方法：
免责声明
Open Music 网站、API 服务及音乐卡片组件均为个人技术学习与交流项目，不存储任何音乐文件， 所有音频数据均来源于互联网公开资源。本项目不提供任何商业用途，仅供开发者学习参考和音乐爱好者个人使用。
如果您是版权所有者且认为本项目内容侵犯了您的合法权益，请及时联系我们，我们将在核实后第一时间删除相关内容。 使用本项目的任何内容即表示您已阅读并同意遵守所有适用法律，用户因使用本项目所产生的任何后果由用户自行承担。
请于下载后 24 小时内 删除所下载的音乐文件。我们尊重并支持正版音乐，建议您通过正规渠道获取音乐内容。