Managed Audio Lifecycle
Howler manages loading, playback, pause, switching and cleanup. One player host is active per page; await asynchronous destruction before creating its replacement.
Skip to content
Floating Music PlayerHTML5 AUDIOv1.0.7
Music, naturally.Part of your website.
Two lines of code. A complete listening experience. Lyrics, themes, and memory playback — every melody feels at home.
StableManaged lifecycle & memory playback
SimpleHTML · Vue · React · CDN
EfficientOn-demand
Lightweight
Lightweight
A closer look
- Cloud and local playlists
- Synced lyrics and memory playback
- Themes and AI creation
Core Features
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
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 XF Music Player?
Xiao Feng Music Player (XF Music Player) is an embeddable HTML5 music player plugin built with Lit Web Components and Howler. Version 1.0.7 supports playlists, lyrics, themes and playback memory for websites, blogs and web applications.
Explore player capabilitiesHow do I integrate it with HTML, Vue or React?
Install the npm package or load a published CDN file, then use a Web Component tag or a JavaScript instance. Vue, React and static HTML pages are supported. Complex options such as playlist objects, audioProvider and lifecycle hooks must be passed through JavaScript.
View integration examplesWhere do playlists and audio come from?
The integrating application supplies playlist data and audio URLs. Cloud mode fetches playlists through apiUrl; local mode uses playlist or audioProvider. A custom audioProvider takes precedence over the built-in cloud request, and playback requires an accessible audio URL.
Configure data sourcesDoes FLAC, WAV or AIFF metadata support guarantee playback?
No. The player reads available audio properties, tags, cover art and lyrics from FLAC, WAV and AIFF / AIFF-C files. Metadata parsing and audio decoding are separate capabilities: playback depends on the target browser and the file codec. The player does not transcode audio.
Read the metadata guideCan multiple players run on the same page?
A page has one active player host because playback state and audio management are shared. Await the old instance’s destroy() before creating a replacement, and confirm that the destination page is still active. Changing tagName does not create isolated concurrent players.
Read the lifecycle contractWhy can autoplay still require a play-button click?
autoplay only attempts playback; browser gesture policies or embedding permissions may still block it. isAutoPopup only expands the interface. Use the online debugger to configure APIs, playlists and playback options, click play to verify them, then generate integration code.
Open the online debuggerDisclaimer
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