Neumorphism 设计
采用新拟态设计风格,柔和的阴影和高光效果,现代化的视觉体验
歌单内切歌
可以在填写的歌单内自由切换歌单里面的音乐
完全响应式
适配桌面端、平板和移动设备,支持触摸操作
迷你歌词系统
双层歌词布局,支持翻译显示,当前行高亮和发光效果
基于 NeteaseCloudMusicApi 构建
本播放器基于开源项目 NeteaseCloudMusicApi 提供的接口服务,通过 API 代理实现跨域访问。
当前演示使用 墨染云 的https://zm.i9mr.com
作为数据源。
为获得更稳定的服务体验,建议在生产环境中部署自己的 NeteaseCloudMusicApi 实例
核心功能特性
播放控制
播放/暂停/停止
切换控制
上一首/下一首
进度控制
拖拽进度条
音量调节
滑块控制音量
歌词显示
同步歌词滚动
播放列表
歌曲列表管理
缩放模式
迷你/完整视图
显示模式
浮动/嵌入布局
技术规格
- 框架依赖:无依赖,纯原生 JS
- 浏览器支持:Chrome 60+, Firefox 55+, Safari 12+
- 文件大小:CSS 15KB + JS 35KB (压缩后)
- API 来源:NeteaseCloudMusicApi
- 许可证:Apache License 2.0
性能指标
< 100ms
初始化时间
< 5MB
内存占用
引入文件
<!-- 引入 CSS 文件 -->
<link rel="stylesheet" href="netease-mini-player-v2.css">
<!-- 引入 JS 文件 -->
<script src="netease-mini-player-v2.js"></script>
<!-- 引入 CSS 文件 -->
<link rel="stylesheet" href="https://api.hypcvgm.top/NeteaseMiniPlayer/netease-mini-player-v2.css">
<!-- 引入 JS 文件 -->
<script src="https://api.hypcvgm.top/NeteaseMiniPlayer/netease-mini-player-v2.js"></script>
创建播放器
<!-- 基础播放器 -->
<div class="netease-mini-player"
data-playlist-id="14273792576"
data-lyric="true"
data-theme="auto"
data-size="compact">
</div>
<!-- 浮动播放器 -->
<div class="netease-mini-player"
data-playlist-id="14273792576"
data-position="bottom-right"
data-lyric="true"
data-autoplay="false">
</div>
初始化
// 自动初始化(推荐)
// 播放器会在 DOM 加载完成后自动初始化
// 手动初始化
document.addEventListener('DOMContentLoaded', function() {
const players = document.querySelectorAll('.netease-mini-player');
players.forEach(playerElement => {
new NeteaseMiniPlayer(playerElement);
});
});
// 单个播放器初始化
const playerElement = document.querySelector('#my-player');
const player = new NeteaseMiniPlayer(playerElement);
快速提示
播放器会自动检测页面中的
.netease-mini-player
元素并初始化
确保在引入 JS 文件后再创建播放器元素
支持在同一页面创建多个播放器实例
配置参数
参数 | 说明 |
---|---|
data-playlist-id |
歌单ID |
data-lyric |
显示歌词 |
data-theme |
主题模式 |
data-size |
播放器尺寸 |
data-position |
浮动位置 |
data-autoplay |
自动播放 |
版本信息
当前版本
v2.0.1
发布日期
2025-10-16
更新内容
性能优化
在线演示
浮动模式演示
固定在页面角落的浮动播放器,支持缩小为黑胶唱片样式
<div class="netease-mini-player"
data-playlist-id="14273792576"
data-position="bottom-right"
data-lyric="true"
data-theme="auto"
data-embed="false">
</div>
嵌入模式演示
简化版播放器,适合嵌入到文章或其他内容中,不支持缩小功能
<div class="netease-mini-player"
data-song-id="1823012873"
data-position="static"
data-lyric="true"
data-theme="auto"
data-embed="true"
data-autoplay="false">
</div>
模式说明
浮动模式
- • 固定在页面角落显示
- • 支持完整播放列表
- • 可缩小为黑胶唱片
- • 适合全站音乐播放
- • 不影响页面布局
嵌入模式
- • 简化版播放器界面
- • 主要用于单曲播放
- • 无缩小展开功能
- • 适合文章内容嵌入
- • 占用固定页面空间
演示控制
技术提示
播放器使用 Web Audio API 和 Canvas 实现黑胶唱片动画效果, 支持现代浏览器的硬件加速渲染。配置参数
参数 | 类型 | 默认值 | 说明 |
---|---|---|---|
data-playlist-id |
String | - | 网易云音乐歌单 ID(页面模式必填) |
data-song-id |
String | - | 网易云音乐歌曲 ID(嵌入模式必填) |
data-position |
String | bottom-left | 播放器位置:top-left, top-right, bottom-left, bottom-right |
data-embed |
Boolean | false | 是否为嵌入模式 |
data-autoplay |
Boolean | false | 是否自动播放(仅页面模式) |
data-lyric |
Boolean | true | 是否显示歌词 |
data-theme |
String | auto | 主题:light, dark, auto |
API 方法
// 获取播放器实例
const player = document.querySelector('.netease-mini-player')._neteasePlayer;
// 播放控制
player.play(); // 播放
player.pause(); // 暂停
player.togglePlay(); // 切换播放状态
// 歌曲切换
player.nextSong(); // 下一首
player.previousSong(); // 上一首
// 界面控制
player.toggleLyrics(); // 切换歌词显示
player.togglePlaylist(); // 切换播放列表
player.toggleMinimize(); // 切换缩小状态
// 音量控制
player.setVolume(0.5); // 设置音量 (0-1)
// 进度控制
player.seekTo(30); // 跳转到指定时间(秒)
样式自定义
/* 自定义播放器颜色 */
.netease-mini-player {
--primary-bg: #f5f5f5;
--secondary-bg: #e8e8e8;
--accent-color: #ec4141;
--text-primary: #333333;
--text-secondary: #666666;
--text-muted: #999999;
--border-radius: 12px;
}
/* 自定义播放器尺寸 */
.netease-mini-player {
width: 450px;
height: 140px;
}
/* 自定义缩小状态尺寸 */
.netease-mini-player.minimized {
width: 100px;
height: 100px;
}
常见问题
在网易云音乐网页版打开歌单或者歌曲,URL 中的数字就是 ID。例如:
在歌单页面,URL 中的数字就是歌单 ID。例如:
在歌曲页面,URL 中的数字就是歌曲 ID。例如:
在歌单页面,URL 中的数字就是歌单 ID。例如:
https://music.163.com/playlist?id=14273792576
在歌曲页面,URL 中的数字就是歌曲 ID。例如:
https://music.163.com/song?id=1335231450
可能的原因:
1. 歌单或者歌曲 ID 不正确
2. 网络连接问题
3. API 服务暂时不可用
4. 歌曲版权限问题(某些歌曲需要登录才能播放)
1. 歌单或者歌曲 ID 不正确
2. 网络连接问题
3. API 服务暂时不可用
4. 歌曲版权限问题(某些歌曲需要登录才能播放)
支持所有现代浏览器:
• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+
• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+
可视化播放器构建器
通过可视化界面配置播放器参数,自动生成代码
配置选项
基础配置
显示配置
(不建议开启,受限于浏览器的自动播放策略,大多数都播放器初始化后需手动点击播放按钮以启动。)
样式配置
预览效果
生成代码
HTML 代码