在线调试播放器

小枫音乐播放器

播放器配置

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

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

自定义主题样式

AI 生成主题ai-generated-theme

前端直接请求用户提供的 OpenAI / Anthropic 兼容接口，API Key 只保存在当前页面内存，不会写入生成代码。接口需要允许浏览器跨域请求。

DeepSeek 调用示例可一键填入 DeepSeek OpenAI / Anthropic 兼容请求地址，模型默认使用 deepseek-v4-flash。

API 文档

API 格式AI API 地址鉴权方式API Key模型名称主题类名随机度 0.7

主题需求

布局与加载324px · 2.5em

播放器宽度底部距离歌单高度可视歌单数量延迟加载 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已运行歌单

当前配置已运行

api-urlhttps://music.api.xfyun.club/api/v1/music/top?platform=netease&topId=3778678

配置代码

未生成

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

在线调试小枫音乐播放器

播放器配置

可视化歌单

播放器状态与配置摘要

配置代码