🎵 HTML5 音乐播放器插件

芒果音乐播放器

仅需两行代码,快速集成网页音乐播放器

⚙️ 在线调试播放器
稳定
封装音频生命周期、错误兜底和记忆播放
便捷
支持标签引入、JS实例化、npm和CDN
高性能
按需加载资源,减少业务页面接入成本
📄 index.html
HTML
Vue
React
<!-- 引入播放器 --> <script src="assets/js/mango-player.min.js"></script> <mango-music-player language="zh" theme="mango-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" ></mango-music-player>

用一段视频了解播放器体验

这里预留播放器演示视频位置,可展示云端歌单、主题切换、歌词、移动端适配和调试流程。 后续只需替换视频地址即可发布。

  • 原生视频控件
  • 兼容桌面端与移动端
  • 支持直接替换视频地址
查看完整接入文档 →
八大精美主题 随心切换
HTML5 音乐播放器插件 | 轻量·简洁·高颜值
原始主题
原始主题
暗色主题
暗色主题
天空主题
天空主题
粉色主题
粉色主题
深绿主题
深绿主题
酒红主题
酒红主题
🎵 播放器演示视频 待录制

为真实业务场景设计的播放器能力

从音频生命周期、云端歌单、歌词同步到主题扩展和异常兜底, 播放器把复杂交互收束为稳定的配置与实例 API,接入成本更低,线上表现更可控。

🎵

音频生命周期托管

基于 Howler 统一处理加载、播放、暂停、切歌、释放和错误恢复,降低多实例音频资源泄漏风险。

📦

跨框架快速接入

提供 Web Component 标签、IIFE、ESM、npm 和 JS 实例化方式,Vue、React、静态页面都能直接使用。

高性能渲染策略

延迟渲染、懒加载、请求取消和状态节流协同工作,减少首屏压力和高频播放状态更新开销。

🎨

主题系统可扩展

内置多套主题,同时支持随机主题、自动主题、CSS 变量和自定义主题样式,适配不同品牌视觉。

📝

歌词体验完整

支持 LRC、结构化歌词、外链歌词、底部歌词和全屏歌词,切歌时自动处理请求竞态和滚动定位。

⌨️

桌面快捷控制

支持 Tab、Space、左右方向键控制播放器,并自动避开输入框、滑块和组合键,兼容 macOS 与 Windows。

🔀

播放策略灵活

顺序播放、单曲循环、随机播放、记忆播放和自动播放都可通过属性或实例 API 精确控制。

☁️

云端与本地双模式

默认支持云端 api-url,也支持本地歌单和 audioProvider,接口异常时提供重拉歌单、跳歌和连续失败保护。

🔧

在线调试与代码生成

调试页可视化配置云端接口、本地歌单、主题、音量和播放参数,并生成可直接复制的集成代码。