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
内存占用

引入文件

HTML
<!-- 引入 CSS 文件 -->
<link rel="stylesheet" href="netease-mini-player-v2.css">

<!-- 引入 JS 文件 -->
<script src="netease-mini-player-v2.js"></script>
HTML
<!-- 引入 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>

创建播放器

HTML
<!-- 基础播放器 -->
<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>

初始化

JavaScript
// 自动初始化(推荐)
// 播放器会在 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 方法

JavaScript 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);        // 跳转到指定时间(秒)

样式自定义

CSS 变量
/* 自定义播放器颜色 */
.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。例如:
https://music.163.com/playlist?id=14273792576
在歌曲页面,URL 中的数字就是歌曲 ID。例如:
https://music.163.com/song?id=1335231450

可能的原因:
1. 歌单或者歌曲 ID 不正确
2. 网络连接问题
3. API 服务暂时不可用
4. 歌曲版权限问题(某些歌曲需要登录才能播放)

支持所有现代浏览器:
• Chrome 60+
• Firefox 55+
• Safari 12+
• Edge 79+

可视化播放器构建器

通过可视化界面配置播放器参数,自动生成代码

配置选项
基础配置
显示配置

(不建议开启,受限于浏览器的自动播放策略,大多数都播放器初始化后需手动点击播放按钮以启动。)
样式配置
预览效果
生成代码
HTML 代码