Online Player Debugger

Player Configuration

Instance & Themeen · xf-original-theme

Tag NameLanguageThemeEnvironmentCustom Theme NameFont Name Choose Font

Custom Theme CSS

AI Theme Generatorai-generated-theme

The browser calls your OpenAI / Anthropic compatible endpoint directly. The API key stays in page memory and is never written to generated code. The endpoint must allow browser CORS.

DeepSeek API SamplesFill DeepSeek OpenAI / Anthropic compatible endpoints with one click. The default model is deepseek-v4-flash.

API Docs

API FormatAI API EndpointAuth TypeAPI KeyModelTheme ClassTemperature 0.7

Theme Prompt

Layout & Loading324px · 2.5em

Player WidthBottom OffsetPlaylist HeightVisible SongsLazy Load msLazy Image URL

Playback Behaviororder · 80%

Play ModeVolume 80%Memory Key

MonitoringMemory PlaybackAutoplayOnly tries playback after mount. It does not open the player.Auto PopupMaps to is-auto-popup and only controls the UI popup state.Auto Open PlaylistColorful LyricsAudio Visualization NEWUses Canvas with real-time audio analysis for the progress waveform and lyric background. Cross-origin audio falls back to the regular progress bar safely.

Browser PluginsDisabled

Compatibility ModeSakura Effect

When enabled, generated code adds plugin script tags. Compatibility mode is placed before the player bundle, and the sakura effect is placed after it.

Cloud Music API Builder

Official API Originhttps://music.api.xfyun.club

API OriginMusic Platform

Music ChartCustom Top IDCloud API URL

The current cloud URL is applied to the player.

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

NetEase Cloud Music chart APIs return a song array that the player can consume directly. The search endpoint is not called here to avoid writing non-playable metadata into api-url.

Local Playlist0 songs

Local Playlist API URL

Local music reads /mock/songList.json by default. You can also use a site path or your own http/https playlist API. The response must be a song array, { list: [] }, { playlist: [] }, or { code: 200, data: [] }. This field does not use the cloud api-url.

Use audioProvider in Code

Editing and fetching update the draft only. Apply to reload the local playlist.

Visual Playlist

0songs

1selected

0batch selected

cloudcode source

Import / Edit Playlist JSONSupports arrays, { list: [] }, { playlist: [] }, and common playlist payloads.

Player Status & Configuration

Waiting for Player MountWaiting for initialization

ModeCloud modeNetEase Cloud Music · Charts

xf-music-playerCurrent Tag

0Running Songs

Configuration is running

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

Configuration Code

Not generated

No code generatedClick “Generate Code” to preview and copy it.

Online Debugger for Xiao Feng Music Player

Player Configuration

Visual Playlist

Player Status & Configuration

Configuration Code