🎵 Open Music 音乐网站

一个设计精美、功能丰富的在线音乐播放器，提供流畅的音乐浏览与收听体验。

Open Music 是一款采用 Apple Music 风格设计的在线音乐网站， 支持歌曲搜索、榜单浏览、在线播放、歌词展示、收藏管理、音质切换及歌曲下载等功能。 界面简洁优雅，响应式布局适配桌面与移动端，提供流畅的交互体验。

网站地址：https://open-music.pages.dev

✨ 核心功能

智能搜索

支持歌曲名、歌手名关键词搜索，实时返回匹配结果

热门榜单

热歌榜、新歌榜、飙升榜、抖音热歌、经典老歌、粤语金曲

在线播放

支持播放/暂停、上下曲切换、进度拖拽、音量控制

歌词展示

实时歌词高亮跟随播放进度，支持全屏歌词面板

收藏管理

一键收藏喜爱歌曲，本地持久化存储，支持随时查看

最近播放

自动记录播放历史，方便快速回听近期歌曲

多音质切换

标准、高品、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，也可通过参数指定纯文本或纯歌词。

📌 通用参数

参数类型必填说明
typestring可选返回格式：json（默认）、text（纯文本）、lyric（仅返回歌词，格式见下文）
hstring可选纯文本模式下的换行符，默认为 \n（建议 URL 编码为 %0A）。例如 &h=###
tailstring可选批量纯文本结果之间的分隔文本，默认为 酷我音乐
fieldsstring可选仅对歌曲详情请求生效（即使用了 sid 或 n 参数），逗号分隔。可选：cover、url、br、lyric。不指定时默认返回全部四个字段（包括歌词）。若指定了字段但未包含某字段，则该字段不返回。注意：type=lyric 会忽略 fields 参数，只返回歌词。
brnumber可选音质等级，1-5，默认 4。影响所有返回歌曲详情的接口（单曲、批量sid、批量n）。详见下方音质说明

🔍 1. 歌曲搜索（仅列表，无详情）

根据关键词搜索歌曲，返回匹配的歌曲列表（不含封面、播放链接等详情）。

参数类型必填说明
msgstring必填搜索关键词，如歌曲名、歌手名
pnumber可选页码，从 1 开始计数，默认 1
scnumber可选每页返回数量，范围 1-100，默认 10
# 搜索“热门歌曲”第1页，每页20条，JSON格式 GET https://music-server.pages.dev?msg=热门歌曲&p=1&sc=20
# 纯文本输出，自定义换行符和尾部分隔 GET https://music-server.pages.dev?msg=周杰伦&type=text&h=%0A---%0A&tail=END

纯文本输出时，内容为“序号. 歌名 - 歌手 [ID: xxx]”列表，末尾追加页码信息。

响应示例（JSON）

{ "code": 200, "page": 1, "page_size": 20, "total": 20, "data": [ { "index": 1, "song_id": "12345678", "song": "歌曲名称", "singer": "歌手名称", "format": "mp3" } ] }

🎧 2. 单曲详情（通过 song_id）

根据歌曲 ID 获取详细信息，包括封面、播放链接、音质、歌词等。默认返回全部字段（可被 fields 裁剪）。

参数类型必填说明
sidstring必填歌曲唯一标识 ID（从搜索结果中获取）
GET https://music-server.pages.dev?sid=12345678&br=4&fields=cover,url,br,lyric
# 仅获取歌词（type=lyric），此时 fields 被忽略 GET https://music-server.pages.dev?sid=12345678&type=lyric

响应示例（type=json，默认）

{ "code": 200, "msg": { "data": { "song_id": "12345678", "song_cover": "https://...", "music_url": "https://...mp3", "br_size": "SQ无损", "song_link": "https://www.kuwo.cn/play_detail/12345678", "lyric": [ { "lyric": "第一句歌词", "time": "0:15" }, { "lyric": "第二句歌词", "time": "0:30" } ] } } }

响应示例（type=lyric，仅歌词数组）

[ { "lyric": "第一句歌词", "time": "0:15" }, { "lyric": "第二句歌词", "time": "0:30" } ]

📦 3. 批量查询

批量 song_id（支持逗号分隔或重复参数）

一次性获取多个歌曲的详情，返回数组格式（无 code 包装）。支持 br 和 fields 参数。默认返回全部字段（含歌词）。

# 逗号分隔，仅返回封面和播放链接 GET https://music-server.pages.dev?sid=12345678,87654321&fields=cover,url&br=4
# 批量获取歌词（type=lyric），返回格式 [{song_id, lyric}] GET https://music-server.pages.dev?sid=12345678,87654321&type=lyric

批量序号 n（配合搜索词）

在搜索结果中直接获取多首指定序号的歌曲详情，无需先拉取列表。支持 br、fields、type（text/lyric/json）参数。

参数类型必填说明
msgstring必填搜索关键词
nstring/number必填序号，从1开始，支持逗号分隔（如 1,3,5）或多个 n 参数
pnumber可选页码，默认 1
scnumber可选每页数量，默认 10（范围 1-100）
# 搜索“周杰伦”，获取第1、3首的完整信息（含封面、链接、音质、歌词） GET https://music-server.pages.dev?msg=周杰伦&n=1,3&fields=cover,url,br,lyric&br=4
# 批量获取纯文本，自定义换行和尾部分隔 GET https://music-server.pages.dev?msg=周杰伦&n=1,2&type=text&h=%0A&tail======

批量 n 返回的 JSON 结构（type=json）：

{ "code": 200, "page": 1, "page_size": 10, "total": 2, "data": [ { "song_id": "123...", "song_name": "歌曲名", "song_singer": "歌手", "index": 1, "song_cover": "https://...", "music_url": "https://...", "br_size": "SQ无损", "song_link": "https://...", "lyric": [] } ] }

当 type=lyric 时，返回格式为：[{song_id, song_name, lyric}]。

🎚 4. 音质参数（br）说明

br=1 · 标准音质 (128k MP3) br=2 · 高品音质 (192k MP3) br=3 · HQ超品质 (320k MP3) br=4 · SQ无损 (FLAC) br=5 · Hi-Res音质 (高解析FLAC)
音质等级越高，文件体积越大。若请求的高音质不可用，API 会自动降级到可用的最高音质。推荐使用 br=4 以获得最佳体验。

📋 5. fields 参数详解

精确控制返回字段，减少不必要的数据传输。仅对歌曲详情请求生效（即请求中带有 sid 或 n 参数）。

字段值返回内容
cover歌曲封面图片 URL（已处理为可用链接）
url歌曲播放链接（music_url）
br歌曲音质描述（如“SQ无损”）
lyric歌词数据（含时间轴数组）

默认行为：不指定 fields 时，上述四个字段全部返回（包括歌词）。若指定了字段列表，则只返回列表中的字段。注意：type=lyric 会完全忽略 fields，直接返回歌词数据（格式见上文）。

示例：fields=cover,url 仅返回封面和播放链接，不返回音质描述和歌词。

🔧 6. 快捷用法：搜索 + 直接获取详情

使用单个 n 参数（不加批量逗号），可直接获取搜索结果中某一首的完整详情，返回格式与单曲详情（sid）一致，并额外包含 song_name 和 song_singer。

# 搜索“晴天”并直接获取第1首的详情（含封面、链接、歌词等） GET https://music-server.pages.dev?msg=晴天&n=1&fields=cover,url,br,lyric

若只需要歌词，可加 &type=lyric，此时返回歌词数组。

❌ 7. 错误码说明

HTTP 状态码code说明
200200请求成功
400-1缺少必要参数（如无 msg 或无 sid）
404-3播放链接获取失败（歌曲可能无版权）
500-500服务器内部错误

💬 8. 评论获取

根据歌曲ID获取评论区内容，支持最新评论和热门评论，分页及批量查询。需携带 comment=1 或 get_comment=1 参数。

请求参数

参数类型必填说明
sidstring必填歌曲ID，支持逗号分隔批量（如 123,456）或重复参数
commentnumber必填必须为 1，也可使用 get_comment=1 触发评论模式
comment_sortstring可选排序方式：latest（最新评论，默认）、hot（热门评论）
pagenumber可选页码，从1开始，默认1
rowsnumber可选每页返回条数，最大30，默认10
typestring可选返回格式：json（默认）、text（纯文本，可用 h 和 tail 自定义格式）
hstring可选文本模式换行符，默认 \n（建议URL编码为 %0A）
tailstring可选批量文本结果之间的分隔文本，默认“酷我音乐”
注意：fields、br 等参数对评论接口无效。批量请求时，返回顺序与传入的 sid 顺序一致，单个失败不影响其他。

示例1：获取单首歌曲的最新评论（JSON）

GET https://music-server.pages.dev?sid=12345678&comment=1&page=1&rows=20
# 获取热门评论，第2页，每页5条 GET https://music-server.pages.dev?sid=12345678&comment=1&comment_sort=hot&page=2&rows=5

响应示例（JSON）

{ "code": 200, "data": { "sid": "12345678", "total": 156, "page": 1, "rows": 20, "totalPage": 8, "comments": [ { "content": "太好听了！", "time": "2025-03-15 10:30", "nickname": "音乐爱好者", "likeCount": 42, "vip": 0, "rank": "LV.8", "medal": "摇滚之星" } ] } }

示例2：纯文本输出（单曲）

GET https://music-server.pages.dev?sid=12345678&comment=1&type=text&h=%0A&tail=--- End ---

纯文本输出格式：歌曲ID、总评论数、页码，每条评论格式为 [👍点赞数] 昵称：内容，末尾附加分页信息。

示例3：批量获取多个歌曲的评论

# 逗号分隔多个 sid GET https://music-server.pages.dev?sid=12345678,87654321,11223344&comment=1&comment_sort=hot&page=1&rows=10
# 重复使用 sid 参数 GET https://music-server.pages.dev?sid=12345678&sid=87654321&comment=1&type=json

批量响应示例（JSON）

{ "code": 200, "data": [ { "sid": "12345678", "total": 156, "comments": [...] }, { "sid": "87654321", "total: 89, "comments": [...] }, { "sid: "11223344", "error: "评论接口返回异常" } ] }
限制说明：单页最多返回30条评论，如需更多请分页请求。type=text 时批量请求会以 tail 分隔每首歌曲的评论内容。

🧩 Open Music 音乐卡片组件

一个可嵌入任意网页的浮动音乐播放器卡片，支持搜索、播放、歌词展示等功能。

组件地址：https://open-music.pages.dev/music-card.js

音乐卡片是一个独立的 JavaScript 组件，基于原生 JS 编写，无需任何框架依赖。 引入脚本后会自动在页面右下角创建一个浮动音乐播放卡片，支持拖拽移动、最小化、全屏等交互。

🚀 快速开始

1. 引入 Font Awesome 图标库（如页面已有可跳过）

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">

2. 引入音乐卡片脚本

<script src="https://open-music.pages.dev/music-card.js"></script>

引入后卡片会自动初始化并显示在页面右下角。默认搜索"热门歌曲"并加载列表。

⚙️ 配置选项

在引入脚本之前，通过全局变量 window.__musicCardOptions 配置参数：

<script> window.__musicCardOptions = { baseURL: 'https://music-server.pages.dev', // API 地址 mode: 'card' // 显示模式：'card' | 'float' | 'fullscreen' }; </script> <script src="https://open-music.pages.dev/music-card.js"></script>
配置项类型默认值说明
baseURL string 'https://music-server.pages.dev' API 服务地址，可替换为自部署的 API
mode string 'card' 显示模式：
'card' — 默认卡片模式
'float' — 启动时最小化为浮动图标
'fullscreen' — 启动时全屏展开

📖 使用示例

示例一：默认卡片模式

<!-- 直接引入，默认显示在右下角 --> <script src="https://open-music.pages.dev/music-card.js"></script>

示例二：启动即最小化（浮动图标）

<script> window.__musicCardOptions = { mode: 'float' }; </script> <script src="https://open-music.pages.dev/music-card.js"></script>

示例三：指定挂载容器

<!-- 在页面中准备一个容器 --> <div id="my-music-player"></div> <script> // 手动初始化到指定容器 new MusicCard('#my-music-player', { baseURL: 'https://music-server.pages.dev', mode: 'card' }); </script>

🎮 卡片功能

歌曲搜索

输入关键词搜索歌曲，实时返回结果列表

播放控制

播放/暂停、上一首/下一首、进度拖拽

歌词同步

实时歌词高亮，全屏模式下完整展示

五档音质

普通/高品质/超品/无损/Hi-Res 可切换

自由拖拽

按住标题栏拖动卡片到任意位置

全屏模式

一键切换到全屏沉浸式播放体验

📝 手动控制（高级用法）

如果通过 new MusicCard() 手动初始化，可以获取实例并调用方法：

const mc = new MusicCard('#container', { mode: 'card' }); // 搜索歌曲 mc.search('周杰伦'); // 播放指定索引的歌曲 mc.playByIndex(0); // 切换播放/暂停 mc.togglePlay(); // 上一首 / 下一首 mc.playPrev(); mc.playNext(); // 最小化 / 展开 / 全屏 mc.toggleMinimize(); mc.toggleFold(); mc.toggleFullscreen();

免责声明

Open Music 网站、API 服务及音乐卡片组件均为个人技术学习与交流项目，不存储任何音乐文件， 所有音频数据均来源于互联网公开资源。本项目不提供任何商业用途，仅供开发者学习参考和音乐爱好者个人使用。

如果您是版权所有者且认为本项目内容侵犯了您的合法权益，请及时联系我们，我们将在核实后第一时间删除相关内容。 使用本项目的任何内容即表示您已阅读并同意遵守所有适用法律，用户因使用本项目所产生的任何后果由用户自行承担。

请于下载后 24 小时内 删除所下载的音乐文件。我们尊重并支持正版音乐，建议您通过正规渠道获取音乐内容。

© 2026 Open Music · 仅供学习交流使用 · 请支持正版音乐