在线调试播放器 - 小枫音乐播放器

播放器配置

实例与主题zh · xf-original-theme

标签名语言主题环境自定义主题名字体名称选择字体

自定义主题样式

AI 生成主题customThemeStyle

浏览器直接请求所选提供商；“记住密钥”默认开启，填写后保存在本机；可取消或随时清除。密钥不写入生成代码。接口需允许 CORS；请求错误会在弹窗中脱敏显示。

AI 提供商API Key

在此设备记住密钥

按服务商分别保存，关闭浏览器后仍保留。仅在个人设备开启；同站点脚本可读取本机密钥，清除后不再记住。

模型

官方模型文档 ↗

更开放的创意探索开启后放宽配色与材质风格；始终保留播放器结构、交互和可读性。

灵感起点 500 种主题灵感

描述你的音乐空间主题需求

布局与加载324px · 2.5em

播放器宽度CSS 单位，例如 324px、22rem、90vw底部距离CSS 单位，例如 24px、2.5em、5vh歌单高度CSS 单位，例如 350px、24rem、50vh可视歌单数量延迟加载 ms懒加载图 URL

播放行为order · 80%

播放模式音量 80%记忆 key

系统监控记忆播放自动播放只控制挂载后尝试播放，不控制播放器展开。自动弹出对应 is-auto-popup，只控制界面展开/收起。自动展开歌单彩色歌词音频可视化 NEW开启后使用 Canvas 读取实时音频分析数据渲染进度波形和歌词背景；跨域音频无法分析时会自动降级为普通进度条。

扩展插件未开启

兼容模式樱花特效

开启后生成代码会额外输出插件 script 标签：兼容模式建议放在播放器主包前，樱花特效会放在播放器主包后。

云端音乐 API 生成器

官方接口地址https://music.api.xfyun.club

服务地址音乐平台

选择歌榜自定义榜单 ID云端 API URL

当前云端地址已应用到播放器。

生成地址https://music.api.xfyun.club/api/v1/music/top?platform=netease&topId=3778678

网易云音乐歌榜接口会返回播放器可直接识别的歌曲数组；搜索接口不会在调试器中调用，避免把不可播放的基础歌曲信息写入 api-url。

本地歌单0 首

本地歌单接口 URL

本地音乐默认读取 /mock/songList.json，也可以填写站内路径或用户自己的 http/https 歌单接口；接口返回格式必须是歌曲数组、{ list: [] }、{ playlist: [] } 或 { code: 200, data: [] }，这里不会使用云端 api-url。

代码使用 audioProvider

编辑和拉取只更新草稿，应用后才会重载本地歌单。

可视化歌单

0首歌曲

1当前选中

0批量选中

cloud代码数据源

导入 / 编辑歌单 JSON支持数组、{ list: [] }、{ playlist: [] } 等常见结构。

配置代码

未生成

暂无配置代码点击“生成代码”后再预览和复制。

播放器状态

等待播放器挂载等待初始化

当前模式云端模式网易云音乐 · 歌榜

xf-music-player当前标签

0已运行歌单

在线调试小枫音乐播放器

播放器配置

可视化歌单

配置代码

播放器状态