
第一步:替换「自定义底部代码」
<script>
(function() {
// 1. 精准判断是否为网站首页
var isHomePage = window.location.pathname === '/' ||
window.location.pathname === '/index.php' ||
window.location.pathname === '/index.html';
if (isHomePage) {
var LOCK_KEY = 'homepage_music_owner_lock';
var currentTime = new Date().getTime();
// 跨标签页核心锁检查
var existingLock = localStorage.getItem(LOCK_KEY);
if (existingLock) {
if (currentTime - parseInt(existingLock) < 3600000) {
console.log('🔒 其他标签页正在播放音乐,本页放弃加载。');
return;
}
}
// 页面内防重叠双重保险
if (document.querySelector('meting-js')) return;
// 成功抢占播放主权
localStorage.setItem(LOCK_KEY, currentTime);
// 释放主权逻辑
window.addEventListener('beforeunload', function() {
localStorage.removeItem(LOCK_KEY);
});
// 2. 动态加载 APlayer 和 MetingJS 核心脚本
var loadScript = function(src, callback) {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = src;
script.onload = callback;
document.head.appendChild(script);
};
// 按顺序加载依赖
loadScript("https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js", function() {
loadScript("https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js", function() {
initHomepagePlayer();
});
});
}
// 3. 播放器初始化(锁定纯圆 mini 模式)
function initHomepagePlayer() {
var meting = document.createElement('meting-js');
meting.setAttribute('server', 'netease');
meting.setAttribute('type', 'playlist');
meting.setAttribute('id', '26467411'); // 🔴 关键:替换为你的网易云歌单ID
meting.setAttribute('fixed', 'true');
meting.setAttribute('mini', 'true'); // ✨ 核心:强制锁定 mini 纯圆模式
meting.setAttribute('order', 'random');
meting.setAttribute('volume', '0.5');
meting.setAttribute('autoplay', 'false');
meting.setAttribute('list-folded', 'true');
document.body.appendChild(meting);
// 轮询检查播放器实例并绑定用户点击/滚动激活
var checkCount = 0;
var checkAplayer = setInterval(function () {
checkCount++;
var metingEl = document.querySelector('meting-js');
var aplayer = metingEl && metingEl.aplayer;
if (aplayer) {
clearInterval(checkAplayer);
var safePlay = function () {
if (aplayer.audio && !aplayer.audio.paused) {
removeListeners();
return;
}
var playPromise = aplayer.play();
if (playPromise !== undefined) {
playPromise.then(function() {
removeListeners();
}).catch(function(err) {
console.log('等待用户更明确的交互以激活音频...');
});
}
};
var removeListeners = function() {
document.removeEventListener('click', safePlay);
document.removeEventListener('touchstart', safePlay);
document.removeEventListener('scroll', safePlay);
};
if (navigator.userActivation && navigator.userActivation.hasBeenActive) {
safePlay();
} else {
document.addEventListener('click', safePlay, { passive: true });
document.addEventListener('touchstart', safePlay, { passive: true });
document.addEventListener('scroll', safePlay, { passive: true });
}
}
if (checkCount > 33) clearInterval(checkAplayer);
}, 300);
}
})();
</script>
第二步:替换「自定义 CSS 样式」
/* ==========================================================
🎯 终极全穿透:彻底剥离长方形,只留唯一悬浮纯圆
========================================================== */
/* 1. 核心轰炸:把外壳、内壳、主体躯干的背景和边框全部化为无形 */
.aplayer.aplayer-fixed,
.aplayer.aplayer-fixed .aplayer-body,
.aplayer.aplayer-fixed .aplayer-info {
background: transparent !important; /* 强制全透明 */
box-shadow: none !important; /* 砍掉阴影 */
border: none !important; /* 砍掉边框 */
background-image: none !important;
}
/* 2. 锁死主容器尺寸:让它缩得跟圆盘一样大,防止隐形区域阻挡网页其他元素的点击 */
.aplayer.aplayer-fixed.aplayer-narrow,
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
bottom: 30px !important;
left: 30px !important;
width: 105px !important; /* 宽度等同圆盘 */
height: 105px !important; /* 高度等同圆盘 */
overflow: visible !important;
transition: none !important;
}
/* 3. 唯一的视觉主角:大圆盘(承载白边与深层立体阴影) */
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-pic {
position: absolute !important;
left: 0 !important;
top: 0 !important;
width: 105px !important;
height: 105px !important;
border-radius: 50% !important; /* 绝对正圆 */
border: 4px solid #ffffff !important; /* 精致纯白外边框 */
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35) !important; /* 独立高级阴影 */
z-index: 99 !important;
overflow: hidden !important;
background-color: transparent !important;
transform: none !important;
clip-path: circle(50% at 50% 50%) !important; /* 硬件级正圆裁剪,绝不留白色死角 */
}
/* 4. 圆心橙红色控制按钮(提取到最高层级) */
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-button {
position: absolute !important;
width: 38px !important;
height: 38px !important;
background: rgba(235, 77, 75, 0.9) !important; /* 标志性红橙色 */
border: 2px solid #ffffff !important;
box-shadow: 0 0 12px rgba(235, 77, 75, 0.5) !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
margin: 0 !important;
opacity: 1 !important;
z-index: 100 !important;
border-radius: 50% !important;
display: block !important;
}
/* 确保按钮内的播放/暂停图标完美居中 */
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-button svg {
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
width: 16px !important;
height: 16px !important;
margin: 0 !important;
fill: #ffffff !important;
}
/* 5. 斩草除根:把右侧所有的文字容器、歌词容器、伸缩箭头、以及之前的伪类文字全部物理隐藏 */
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-info,
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-lrc,
.aplayer.aplayer-fixed.aplayer-narrow .aplayer-miniswitcher,
.aplayer.aplayer-fixed.aplayer-narrow::after,
.aplayer.aplayer-fixed.aplayer-narrow::before {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
height: 0 !important;
width: 0 !important;
content: "" !important;
}
/* 6. 正在播放时,大圆盘丝滑顺时针旋转 */
.aplayer-playing .aplayer-pic {
animation: albumRotateOnly 15s linear infinite !important;
}
@keyframes albumRotateOnly {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
请登录后查看回复内容