HTML5音乐播放器插件

芒果音乐播放器

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

查看接入文档在线调试播放器

稳定

封装音频生命周期、错误兜底和记忆播放

便捷

支持标签引入、JS实例化、npm 和 CDN

高性能

按需加载资源，减少业务页面接入成本

index.html

HTML

Vue

React

                        <script src="./assets/js/music-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>
                    

快速了解

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

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

✓

原生视频控件

✓

兼容桌面端与移动端

✓

支持直接替换视频地址

查看完整接入文档 →

播放器演示视频待录制

核心特性

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

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

音频生命周期托管

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

跨框架快速接入

提供 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[] }。

能否直接在线调试？

可以。在线调试页直接运行发布后的打包文件。

免责声明

本站仅用于芒果音乐播放器插件展示、文档说明和功能调试。示例音频、封面、歌词或第三方接口数据仅用于演示，实际接入请自行确认资源版权、接口合规性与业务使用范围。

作者: 芒果
联系方式: mango@example.com