音频生命周期托管
基于 Howler 统一处理加载、播放、暂停、切歌、释放和错误恢复，降低多实例音频资源泄漏风险。
Skip to content
HTML5 音乐播放器插件
小枫音乐播放器
仅需两行代码, 快速集成网页音乐播放器
稳定封装音频生命周期、错误兜底和记忆播放
便捷支持标签引入、JS 实例化、npm 和 CDN
高性能按需加载资源，减少业务页面接入成本
<script src="https://player.xfyun.club/js/music-player/music-player.min.js"></script> <xf-music-player language="zh" 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> 生产配置v1.0.3
快速了解
用一段视频了解播放器体验
这里预留播放器演示视频位置，可展示云端歌单、主题切换、歌词、移动端适配和调试流程。后续只需替换视频地址即可发布。
- 原生视频控件
- 兼容桌面端与移动端
- 支持直接替换视频地址
核心特性
为真实业务场景设计的播放器能力
从音频生命周期、云端歌单、歌词同步到主题扩展和异常兜底，播放器把复杂交互收束为稳定的配置与实例 API，接入成本更低，线上表现更可控。
跨框架快速接入
提供 Web Component 标签、IIFE、ESM、npm 和 JS 实例化方式，Vue、React、静态页面都能直接使用。
高性能渲染策略
延迟渲染、懒加载、请求取消和状态节流协同工作，减少首屏压力和高频播放状态更新开销。
主题系统可扩展
内置多套主题，同时支持随机主题、自动主题、CSS 变量和自定义主题样式，适配不同品牌视觉。
歌词体验完整
支持 LRC、结构化歌词、外链歌词、底部歌词和全屏歌词，切歌时自动处理请求竞态和滚动定位。
桌面快捷控制
支持 Tab、Space、左右方向键控制播放器，并自动避开输入框、滑块和组合键，兼容 macOS 与 Windows。
播放策略灵活
顺序播放、单曲循环、随机播放、记忆播放和自动播放都可通过属性或实例 API 精确控制。
云端与本地双模式
默认支持云端 api-url，也支持本地歌单和 audioProvider，接口异常时提供重拉歌单、跳歌和连续失败保护。
在线调试与代码生成
调试页可视化配置云端接口、本地歌单、主题、音量和播放参数，并生成可直接复制的集成代码。
适用场景
适合需要轻量但完整音乐体验的前端页面
产品官网
为音乐、播客、内容产品提供可视化试听入口。
博客与作品集
在不侵入页面主体的情况下加入固定音乐播放控件。
后台和工具页
用统一 API 管理歌单、播放模式、状态记忆和主题。
FAQ
常见问题
小枫音乐播放器是什么？
它是一款基于 HTML5、Howler 和 Lit Web Components 的 Web 音乐播放器插件。
是否支持远程歌单？
支持。可以通过 audioProvider 返回 SongInfo 数组或 { list: SongInfo[] }。
能否直接在线调试？
可以。在线调试页直接运行发布后的打包文件。
免责声明
本站仅用于小枫音乐播放器插件展示、文档说明和功能调试。示例音频、封面、歌词或第三方接口数据仅用于演示，实际接入请自行确认资源版权、接口合规性与业务使用范围。
作者: 小枫
联系方式: 1809185784@qq.com