[NMP v2] NeteaseMiniPlayer v2 搭建高颜值网易云迷你播放器（附部署指南）

注意：Netease Mini Player v1 版本过旧已弃用，不再提供维护，已归档

在线演示：<https://nmp.hypcvgm.top/>

使用文档：<https://docs.nmp.hypcvgm.top/>

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

我建议详细阅读 [NMP v2] NeteaseMiniPlayer v2 使用文档

一、快速上手：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）

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

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 使用文档 ）

三、常见问题排查

播放器不显示？
检查是否引入了 CSS/JS，且 DOM 元素 class 正确。

歌曲无法播放？
可能是版权限制（部分歌曲需登录），或 API 服务异常。建议自建 API。

自动播放无效？
现代浏览器禁止未交互页面的自动播放，需用户先点击页面 。

歌词不显示？
确保 data-lyric="true"，且歌曲有可用歌词数据。

• GitHub：https://github.com/numakkiyu/NeteaseMiniPlayer
• Gitee：https://gitee.com/numakkiyu/NeteaseMiniPlayer
• 使用文档：https://docs.nmp.hypcvgm.top/
• 在线演示：https://nmp.hypcvgm.top