Online Player Debugger - Xiao Feng Music Player

Player Configuration

Instance & Themeen · xf-original-theme

Tag NameLanguageThemeEnvironmentCustom Theme NameFont Name Choose Font

Custom Theme CSS

AI Theme GeneratorcustomThemeStyle

Your browser calls the selected provider directly. Remember key is on by default and saves entered keys on this device; turn it off or clear keys at any time. Keys are excluded from generated code. Browser CORS is required; request errors appear in a dialog with credentials removed.

AI ProviderAPI Key

Remember key on this device

Saved separately per provider, including after browser restarts. Use on a personal device: same-site scripts can read saved keys. Clearing removes remembered keys.

Model

Official Model Docs ↗

More creative freedomExplore bolder palettes and surfaces while preserving player structure, interactions and readability.

Starting points 500 theme ideas

Describe your music space Theme prompt

Layout & Loading324px · 2.5em

Player WidthCSS units, e.g. 324px, 22rem, 90vwBottom OffsetCSS units, e.g. 24px, 2.5em, 5vhPlaylist HeightCSS units, e.g. 350px, 24rem, 50vhVisible 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.

Configuration Code

Not generated

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

Player Status

Waiting for Player MountWaiting for initialization

ModeCloud modeNetEase Cloud Music · Charts

xf-music-playerCurrent Tag

0Running Songs

Online Debugger for Xiao Feng Music Player

Player Configuration

Visual Playlist

Configuration Code

Player Status