子比主题首页添加播放器-综合交流社区-综合交流-大玩咖社区

子比主题首页添加播放器

20260629211205463-image

第一步:替换「自定义底部代码」

<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); }
}

 

 

请登录后发表评论

    请登录后查看回复内容

 

昼夜

客服

客服

点击联系站长 点击联系站长

在线时间
12:00 - 22:00

关注微信公众号

扫码加入QQ交流群
交流QQ群

1064590465

站长邮箱 3337469827@qq.com