🎵 HTML5音乐播放器插件

芒果音乐播放器

一款免费开源的HTML5音乐播放器插件,支持云端歌单、本地歌单、歌词同步、记忆播放、多主题切换等功能。 简单易用,快速接入,让你的网站拥有专业的音乐播放体验。

🛡️
稳定
生产环境验证
便捷
一行代码接入
🚀
高性能
Web Components
index.html
📝 HTML
Vue
⚛️ React
<!-- 引入播放器 --> <script type="module" src="https://music.mgznb.cn/assets/js/music-player.esm.js"></script> <!-- 使用播放器 --> <mango-music-player theme="mango-original-theme" mode="cloud" api-url="https://music.api.xfyun.club/api/v1/music/top?platform=netease&topId=3778678" autoplay remember-playback ></mango-music-player>
🎯 快速了解

专业的音乐播放体验

芒果音乐播放器提供完整的音乐播放解决方案,从歌单加载到歌词同步, 从主题切换到记忆播放,一切都为你准备好。

  • 支持云端歌单和本地歌单双模式
  • 内置7种精美主题,支持自定义主题
  • 歌词同步显示,支持彩色歌词效果
  • 记忆播放位置,下次打开继续播放
查看完整文档 →
芒果音乐播放器展示
热门歌曲
网易云音乐热歌榜
核心特性

为什么选择芒果音乐播放器

我们提供完整的音乐播放解决方案,让你专注于内容创作,而不是重复造轮子

🎵

音频生命周期托管

完整的音频生命周期管理,自动处理加载、播放、暂停、错误恢复等状态, 让你无需关心底层细节。

🔗

跨框架快速接入

基于Web Components标准,原生支持HTML、Vue、React、Angular等所有主流框架, 一行代码即可接入。

🚀

高性能渲染策略

采用虚拟滚动和懒加载技术,即使是上千首歌的歌单也能流畅运行, 不占用过多内存。

🎨

主题系统可扩展

内置7种精美主题,支持自定义CSS变量,轻松打造符合你网站风格的播放器外观。

📝

歌词体验完整

支持逐字歌词、逐行歌词,彩色歌词效果,歌词滚动动画, 带来专业级的歌词体验。

⌨️

桌面快捷控制

支持键盘快捷键控制播放,支持媒体会话API, 系统级别的音乐控制体验。

🔀

播放策略灵活

支持顺序播放、单曲循环、随机播放三种模式, 满足不同场景的播放需求。

☁️

云端与本地双模式

既可以使用云端API加载歌单,也可以传入本地歌曲列表, 灵活适配各种使用场景。

🛠️

在线调试与代码生成

提供在线调试工具,可视化配置所有参数, 一键生成可直接使用的代码。

适用场景

无论你是什么类型的网站,都能轻松集成芒果音乐播放器

🏢

产品官网

在产品官网添加背景音乐播放器,提升用户浏览体验, 让访客在音乐中了解你的产品。

📝

博客与作品集

个人博客、作品集网站添加音乐播放器, 展示你的音乐品味,增加网站的个性化。

⚙️

后台和工具页

在后台管理系统、工具网站中添加音乐播放器, 让工作过程更加轻松愉快。

常见问题

FAQ 常见问题

这里整理了一些常见问题,如果没有找到答案,可以查看完整文档

芒果音乐播放器是免费的吗?
是的,芒果音乐播放器完全免费开源,你可以自由使用、修改和分发。 基于MIT协议开源,商业使用也完全免费。
支持哪些音乐平台的歌单?
目前支持网易云音乐的歌单和排行榜,包括热歌榜、新歌榜、飙升榜等官方榜单, 也支持用户自定义歌单ID加载。
可以在Vue/React项目中使用吗?
完全可以!芒果音乐播放器基于Web Components标准开发, 可以在任何框架中使用,包括Vue、React、Angular、Svelte等。 接入方式和原生HTML完全一样。
⚠️

免责声明

本播放器仅用于学习和研究目的,所有音乐版权归原音乐平台所有。 请支持正版音乐,尊重音乐人的劳动成果。

本项目基于小枫音乐播放器二次开发,由芒果网络推出。 如有侵权请联系我们,我们会及时处理。