主题
快速开始
简介
[NMP v2] NeteaseMiniPlayer v2 是一个轻量级的 CDN 可插入式音乐播放器，只需几行代码即可集成到任何网站中。(注意嵌入模式下只能播放单首歌曲，若需要歌单播放，请使用浮动模式。如果不会配置请访问演示网站的可视化构建工具，请不要随意配置,否则可能会导致未知问题)
基础集成
1. 引入资源文件
在你的 HTML 页面中添加以下代码：
html
<!-- 引入样式文件 -->
<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>📋 基础配置选项
通过 HTML 数据属性，你可以轻松配置播放器的行为（下列为[NMP v2]标准引用方法）：
嵌入式模式（仅播放单首歌曲）
html
<!-- 嵌入式播放器（适合文章内容中） -->
<div class="netease-mini-player"
data-song-id="1823012873"
data-embed="true"
data-position="static"
data-lyric="true"
data-theme="auto">
</div>浮动播放器（仅播放歌单）
html
<!-- 浮动在页面左下角 -->
<div class="netease-mini-player"
data-playlist-id="14273792576"
data-embed="false"
data-position="bottom-left"
data-lyric="true"
data-theme="auto">
</div>🎛️ 常用配置属性
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
data-playlist-id | string | - | 网易云歌单 ID |
data-song-id | string | - | 网易云歌曲 ID |
data-autoplay | boolean | false | 是否自动播放 |
data-theme | string | auto | 主题：light/dark/auto |
data-position | string | static (特别注意，static 仅嵌入式模式使用，否则有其问题) | 位置：static/top-left/top-right/bottom-left/bottom-right |
data-embed | boolean | false | 是否为嵌入式模式 |
data-lyric | boolean | true | 是否显示歌词 |
🌟 实际使用示例
博客背景
html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>我的博客</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/numakkiyu/NeteaseMiniPlayer@main/netease-mini-player.css">
</head>
<body>
<header>
<h1>我的博客</h1>
</header>
<main>
<article>
<h2>文章标题</h2>
<p>文章内容...</p>
</article>
</main>
<!-- 浮动音乐播放器 -->
<div class="netease-mini-player"
data-playlist-id="14273792576"
data-embed="false"
data-position="bottom-left"
data-lyric="true"
data-theme="auto">
</div>
<script src="https://cdn.jsdelivr.net/gh/numakkiyu/NeteaseMiniPlayer@main/netease-mini-player.js"></script>
</body>
</html>文章内嵌播放器
html
<article>
<h2>推荐歌曲</h2>
<p>今天为大家推荐一首好听的歌曲：</p>
<!-- 嵌入式播放器 -->
<div class="netease-mini-player"
data-song-id="1823012873"
data-embed="true"
data-position="static"
data-lyric="true"
data-theme="auto">
</div>
<p>这首歌的歌词很有意思...</p>
</article>个人网站背景音乐
html
<div class="music-section">
<h2>佰川的秘密基地</h2>
<!-- 浮动模式播放器 -->
<div class="netease-mini-player"
data-playlist-id="14273792576"
data-embed="false"
data-position="bottom-left"
data-lyric="true"
data-theme="auto">
</div>
</div>🔧 获取歌单和歌曲 ID
歌单 ID 获取方法
- 打开网易云音乐网页版
- 找到你想要的歌单
- 复制歌单链接，ID 就是链接中的数字部分
例如：https://music.163.com/#/playlist?id=14273792576 歌单 ID 就是：14273792576
歌曲 ID 获取方法
- 打开网易云音乐网页版
- 找到你想要的歌曲
- 复制歌曲链接，ID 就是链接中的数字部分
例如：https://music.163.com/#/song?id=554242291 歌曲 ID 就是：554242291
🎨 主题系统
NeteaseMiniPlayer 支持三种主题模式：
自动主题（推荐）
html
<div class="netease-mini-player"
data-theme="auto">
</div>自动主题会根据以下优先级检测：
- 用户系统主题偏好
- 网站现有主题
- CSS 变量定义的主题
- 默认浅色主题
固定主题
html
<!-- 浅色主题 -->
<div class="netease-mini-player"
data-theme="light">
</div>
<!-- 深色主题 -->
<div class="netease-mini-player"
data-theme="dark">
</div>📱 响应式支持
NeteaseMiniPlayer 自动适配不同设备：
- 桌面端：完整功能界面
- 平板端：优化的触摸交互
- 手机端：紧凑布局，触摸友好
无需额外配置，播放器会自动检测设备类型并应用相应的样式。
🚨 常见问题
播放器不显示？
- 检查网络连接
- 确认歌单/歌曲 ID 正确
- 检查浏览器控制台是否有错误信息
无法播放音乐？
- 确认歌曲版权状态（部分歌曲可能有地区限制）
- 检查浏览器是否支持 HTML5 Audio
- 确认网络环境可以访问网易云音乐 API
样式显示异常？
- 确认 CSS 文件正确加载
- 检查是否有样式冲突
- 尝试清除浏览器缓存
🎯 下一步
现在你已经成功集成了 NeteaseMiniPlayer v2！接下来你可以：
如果遇到任何问题，欢迎在 GitHub 上提交 Issue。