[NMP v2] NeteaseMiniPlayer v2 搭建个人网站网易云迷你播放器

注意：Netease Mini Player v1 版本过旧已弃用，不再提供维护，已归档
在线演示：https://nmp.hypcvgm.top/

最近使用网易云官方的嵌入式播放器，有很多功能无法实现，比如无法调节音量，无法播放歌单内容，后来我自己写了一个轻量、美观、无依赖个人网站的网易云音乐播放器组件，这个组件基于开源项目 NeteaseCloudMusicApi 二次开发的迷你播放器，支持浮动/嵌入双模式、歌词同步、主题切换、响应式布局。

下面就是讲解如何部署自己的 API 服务，彻底告别第三方接口不稳定的问题。

一、快速上手：3 步引入播放器

NeteaseMiniPlayer v2 是一个纯原生 JavaScript 组件，无需 Vue/React，也不依赖 jQuery，直接通过 HTML 属性配置，真正做到“即插即用”。

1. 引入 CSS 和 JS 文件

你可以选择本地引入，也可以直接使用 CDN：

<!-- CDN 引入（推荐） -->
<link rel="stylesheet" href="https://api.hypcvgm.top/NeteaseMiniPlayer/netease-mini-player-v2.css">
<script src="https://api.hypcvgm.top/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://music.163.com/playlist?id=14273792576 中的数字）
data-song-id：单曲 ID（嵌入模式专用）
data-embed="true"：开启嵌入模式，隐藏上/下一首按钮，适合单曲展示
data-theme="auto"：自动跟随系统主题（也可设为 light 或 dark）

3. 自动初始化（无需写 JS！）

播放器会在 DOM 加载完成后自动初始化所有 .netease-mini-player 元素。如果你需要手动控制，也可以这样：

document.addEventListener('DOMContentLoaded', () => {
  const players = document.querySelectorAll('.netease-mini-player');
  players.forEach(el => new NeteaseMiniPlayer(el));
});

3. 效果（展示文章嵌入效果）

⚠️ 注意：在Markdown格式中，尽量向我下面的引用方式

<link rel="stylesheet" href="https://api.hypcvgm.top/NeteaseMiniPlayer/netease-mini-player-v2.css">
<div class="netease-mini-player"
     data-song-id="1823012873"
     data-embed="true"
     data-position="static"
     data-lyric="true"
     data-theme="auto">
</div>
<script src="https://api.hypcvgm.top/NeteaseMiniPlayer/netease-mini-player-v2.js"></script>

上面的代码如果你实在不会配置，在线演示：https://nmp.hypcvgm.top 网站拥有可视化播放器构建器，可视化配置，复制直接用

二、高级用法：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 列表见项目文档（GitHub）。

三、关键一步：自建 NeteaseCloudMusicApi（解决 404/跨域问题）

推荐方案：用 Vercel 一键部署 API

这是目前最简单、免费、稳定的方案：

Fork 项目
前往 NeteaseCloudMusicApiEnhanced/api-enhanced 点击 Fork。（原仓库已经删库了，采用第三方可用NeteaseCloudMusicApi库）
登录 Vercel
访问 vercel.com，用 GitHub 账号登录。
新建项目
- 点击 “New Project”
- 选择你刚 Fork 的仓库
- 环境变量无需配置（默认即可）
- 点击 Deploy

部署完成后，你会得到一个类似 https://xxx.vercel.app 的地址，这就是你的专属 API！

修改播放器 API 地址

目前 NeteaseMiniPlayer v2 的 API 地址是写死的，但你可以通过以下方式覆盖：

下载源码（GitHub 或 GitCode）
打开 netease-mini-player-v2.js
搜索 https://api.hypcvgm.top/NeteaseMiniPlayer/nmp.php，替换为你的 Vercel 域名（如 xxx.vercel.app）
本地引用修改后的 JS 文件

💡 小技巧：未来版本会支持通过 data-api-base 属性动态指定 API 地址，敬请期待。

四、常见问题排查

播放器不显示？
检查是否引入了 CSS/JS，且 DOM 元素 class 正确。
歌曲无法播放？
可能是版权限制（部分歌曲需登录），或 API 服务异常。建议自建 API。
自动播放无效？
现代浏览器禁止未交互页面的自动播放，需用户先点击页面。
歌词不显示？
确保 data-lyric="true"，且歌曲有可用歌词数据。

GitHub：https://github.com/numakkiyu/NeteaseMiniPlayer
GitCode：https://gitcode.com/numakkiyu/NeteaseMiniPlayer
在线演示：https://nmp.hypcvgm.top