V2.0 · SHADOW DOM · 2026

顺雅音乐播放器
一行代码嵌入任意网站

基于 Shadow DOM 的独立音乐组件 · 全息玻璃拟态 · 歌词同步 · 沉浸式全屏
零侵入宿主页面，一行代码即刻拥有

嵌入指南 了解更多
0
TOTAL CALLS
0
TODAY
FEATURES

核心特性

从嵌入到播放，每一个细节都为你考量

Shadow DOM 隔离

attachShadow({mode:'closed'}) 封装所有 DOM 和样式，宿主 CSS 无法穿透播放器，反之亦然

全息玻璃拟态

backdrop-filter: blur(24px) saturate(200%) 磨砂玻璃，全黑白灰色系，冰晶般通透

歌词同步

自动解析 LRC 时间轴，实时高亮当前行，超长跑马灯滚动，底部浮动显示

自动深色主题

基于北京时间自动切换，6:00–17:59 日间，18:00–5:59 深色，所有 UI 跟随

沉浸式全屏

大封面、滚动歌词、完整控制栏，追踪动画弹出，关闭缩回原位

自由拖拽

圆形按钮可拖拽到任意位置，松开自动吸附边缘，面板位置跟随

播放控制

上/下一首、播放暂停、进度跳转、音量调节、列表/单曲/随机模式

状态持久化

授权后保存播放进度、模式、音量、歌词开关、位置，刷新不丢失

EMBED

嵌入方式

一行代码，即刻拥有

<script src="/embed.js"       key="你的密钥"></script>

参数说明

key — API 密钥（必填，后台密钥管理页面获取）

歌单 ID 在后台「配置 → 密钥歌单」中设置，每个密钥可绑定不同歌单。播放器默认悬浮右下角，圆形按钮可自由拖拽。

示例

<!-- 默认歌单 -->
<script src="/embed.js"
  key="你的密钥"></script>
ARCHITECTURE

技术架构

底层设计，透明可见

隔离机制

attachShadow({mode:'closed'}) 创建隔离 DOM 树，宿主 CSS/JS 无法穿透

响应式

PC 360px / 移动端 280px 面板，沉浸式全屏自动适配

性能优化

歌词 DOM 按需重建，播放中只更新 CSS class，无多余 HTTP 请求

时令问候

按北京时间 4 时段显示问候语，缩放淡入 3 秒消失，匹配当前主题

// API 终端 · RESTful
GET /assets/api.php?action=playlist&id=813528292&server=tencent
// 返回 JSON 歌单数据：title, artist, cover, url, lrc

GET /assets/api.php?action=verify-key&key=xxx
// 验证 API Key 有效性

GET /assets/api.php?action=get-config&key=xxx
// 获取用户播放器配置（主题/歌词/自动播放/歌单/音源）
ABOUT

关于

顺雅音乐播放器是一个可嵌入的独立音乐组件，基于 Shadow DOM 实现完全隔离，零侵入宿主页面。

Shadow DOM
ISOLATION
APlayer
ENGINE
Glassmorphism
UI STYLE
管理后台
© 2026 顺雅音乐播放器 · mapi.zeph72.top