APlayer 接入网易云歌单教程

一、前期准备

在开始之前，需要注释掉配置文件 plugins 里面的 aplayer 插件。

二、配置步骤

1. 创建播放器文件

在 themes/redefine/layout/_partial/scripts/ 目录下创建 meting.ejs 文件。

2. 添加播放器代码

在 meting.ejs 中添加以下代码：

播放器代码

<!-- require APlayer -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<!-- require MetingJS -->
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>

<style>
.aplayer {
    background: transparent !important;
    border: none !important;
}
.aplayer .aplayer-info {
    border: none !important;
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(12px);
    padding: 10px !important;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
}
.aplayer .aplayer-list {
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(12px);
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
}
.aplayer .aplayer-list ol li {
    border: none !important;
    color: #000 !important;
}
.aplayer .aplayer-list ol li:hover {
    background: rgba(255, 255, 255, 0.3) !important;
}
.aplayer .aplayer-list ol li.aplayer-list-light {
    background: rgba(255, 255, 255, 0.4) !important;
}
/* 添加以下样式来处理灰色背景 */
.aplayer.aplayer-fixed {
    background: transparent !important;
}
.aplayer.aplayer-fixed .aplayer-body {
    background: transparent !important;
}
.aplayer.aplayer-fixed .aplayer-miniswitcher {
    background: rgba(255, 255, 255, 0.2) !important;
    backdrop-filter: blur(12px);
    box-shadow: -2px 0 6px rgba(255, 255, 255, 0.1);
}
.aplayer .aplayer-lrc {
    text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
    background: transparent !important;
}
.aplayer .aplayer-lrc:before,
.aplayer .aplayer-lrc:after {
    background: transparent !important;
}
/* 添加一些额外的样式优化 */
.aplayer .aplayer-info .aplayer-music {
    color: #000 !important;
}
.aplayer .aplayer-info .aplayer-controller .aplayer-time {
    color: #000 !important;
}
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar {
    background: rgba(255, 255, 255, 0.4) !important;
}

/* 添加按钮样式 */
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded {
    background: rgba(255, 255, 255, 0.8) !important;
}

.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played {
    background: #fff !important;
}

.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap {
    border-color: rgb(229, 231, 235) !important;
}

/* 播放按钮样式 */
.aplayer .aplayer-info .aplayer-controller .aplayer-play-icon {
    border: 2px solid #fff !important;
    border-radius: 50%;
}

.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon {
    border-color: #fff !important;
}

/* 进度条底色 */
.aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar {
    border-bottom: 1px solid rgb(229, 231, 235) !important;
    background: rgba(255, 255, 255, 0.2) !important;
}

/* 音量条样式 */
.aplayer .aplayer-volume-bar-wrap .aplayer-volume-bar {
    border-bottom: 1px solid rgb(229, 231, 235) !important;
    background: rgba(255, 255, 255, 0.2) !important;
}

.aplayer .aplayer-volume-bar-wrap .aplayer-volume-bar .aplayer-volume {
    background: #fff !important;
}

/* 按钮悬停效果 */
.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon:hover {
    border-color: #fff !important;
}
</style>

<meting-js
    server="netease"
    type="playlist" 
    id="7641592364"
    fixed="true"
    autoplay="false"
    theme="#2980b9"
    loop="all"
    order="random"
    preload="auto"
    volume="0.7">
</meting-js> 

3. 主题配置

在 _config.redefine.yml 中添加：

music_player:
  enable: true
  type: aplayer
  source: netease
  id: 7641592364

4. 引入播放器

在 themes/redefine/layout/components/footer/footer.ejs 尾部添加：

<%- partial('_partial/scripts/meting') %>

三、样式优化

• 半透明背景：rgba(255, 255, 255, 0.2)
• 毛玻璃效果：backdrop-filter: blur
• 优化文字颜色和按钮样式
• 圆角和阴影效果

四、最终效果

• 播放器固定在页面底部
• 支持播放/暂停/切歌等功能
• 可以播放完整的网易云歌单
• 界面透明美观，与网站风格统一

注意事项

1. 需要确保网络连接正常
2. 歌单ID必须正确
3. 如需更换歌单，修改 meting-js 中的 id 即可