Managed Audio Lifecycle
Howler-based loading, playback, pause, switching, cleanup, and recovery reduce multi-player audio resource risks.
Skip to content
HTML5 Music Player Plugin
Xiao Feng Music Player
Only two lines of code, quickly integrate a web music player
StableAudio lifecycle, error fallback, and memory playback
ConvenientPlayer tag, JavaScript instance, npm, and CDN
High PerformanceLoad resources on demand and reduce page integration cost
<script src="https://cdn.jsdelivr.net/npm/xf-music-player@latest/music-player.min.js"></script> <xf-music-player language="en" theme="xf-original-theme" mode="cloud" api-url="https://music.api.xfyun.club/api/v1/music/top?platform=netease&topId=3778678" is-auto-popup="true" autoplay="true"></xf-music-player> Production configv1.0.3
Quick Preview
See the player experience in one video
This area is reserved for a player demo covering cloud playlists, themes, lyrics, responsive behavior, and debugging. Replace the video URL when the final media is ready.
- Native video controls
- Desktop and mobile ready
- Replaceable video source
Core Features
Player capabilities designed for real production pages
Audio lifecycle, cloud playlists, lyric synchronization, theme extension, and failure fallback are exposed through stable configuration and instance APIs, making integration predictable and maintainable.
Cross-Framework Integration
Use Web Component tags, IIFE, ESM, npm, or JavaScript instances in Vue, React, and static pages.
High-Performance Rendering
Delayed rendering, lazy loading, request cancellation, and state throttling reduce first-screen and runtime overhead.
Extensible Theme System
Built-in themes, random themes, automatic themes, CSS variables, and custom theme styles adapt to different brands.
Complete Lyric Experience
Supports LRC, structured lyrics, external lyric URLs, bottom lyrics, fullscreen lyrics, and race-safe switching.
Desktop Shortcuts
Tab, Space, and arrow-key controls skip inputs and sliders while remaining compatible with macOS and Windows.
Flexible Playback Rules
Order, repeat-one, shuffle, memory playback, and autoplay can be controlled by attributes or instance APIs.
Cloud and Local Modes
Use cloud api-url, local playlists, or audioProvider with playlist refresh, skip, and consecutive failure protection.
Debugger and Code Generation
The debugger configures cloud APIs, local playlists, themes, volume, and playback options, then generates integration code.
Use Cases
For web pages that need a lightweight but complete music experience
Product Sites
Add a visual listening entry for music, podcast, and content products.
Blogs & Portfolios
Add fixed music playback without taking over the main content area.
Dashboards & Tools
Manage playlist, playback mode, memory state, and themes with one API.
FAQ
Frequently Asked Questions
What is Xiao Feng Music Player?
It is a web music player plugin built with HTML5, Howler, and Lit Web Components.
Does it support remote playlists?
Yes. Use a cloud api-url or return SongInfo arrays through audioProvider.
Can I debug it online?
Yes. The online debugger runs the published bundle and generates integration code.
Disclaimer
This site is only for Xiao Feng Music Player product display, documentation, and feature debugging. Demo audio, covers, lyrics, and third-party API data are for demonstration only. Please verify copyright, API compliance, and usage scope before production integration.
Contact: 1809185784@qq.com; Name: Xiao Feng