Halo 博客设置播放器教程

效果展示：

使用方法：

在管理面板内安装APlayer，然后在插件列表里找到APlayer：

点开它，然后转到“自定义”将这个地址填写进去：

https://api.i-meto.com/meting/api?server=:server&type=:type&id=:id&r=:r&autoplay=true

接下来回到控制台首页，然后找到如图所示的选项：

将这个神秘代码填写到页脚输入框：

<!-- 样式部分修改 -->
<style>
    /* 悬浮播放器容器样式 */
    .floating-music-player {
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 9999;
        transition: all 0.5s ease;
        display: flex;
        align-items: center;
    }

    /* 收起状态的样式 */
    .floating-music-player.collapsed .aplayer {
        transform: translateX(calc(100% + 10px));
        /* 使用百分比，适配不同宽度 */
        opacity: 0;
    }

    /* 播放器主体样式 - 默认桌面端宽度 */
    .floating-music-player .aplayer {
        transition: all 0.5s ease;
        margin-right: 10px;
        width: 390px;
        /* 桌面端默认宽度 */
    }

    /* 移动端播放器主体样式 */
    .floating-music-player.mobile .aplayer {
        width: 300px;
        /* 移动端较小宽度 */
    }

    /* 收起/展开按钮样式 */
    .toggle-button {
        width: 50px;
        height: 50px;
        background-color: transparent;
        color: #f4f4f5;
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.5s ease;
        transform: translateX(0%);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 15px rgba(0, 176, 155, 0.3);
    }

    /* 箭头图标样式 */
    .toggle-button svg {
        width: 24px;
        height: 24px;
        transition: transform 0.5s ease;
        background: linear-gradient(90deg, #00b09b 0%, #96c93d 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        fill: transparent;
    }

    /* 收起状态下的箭头图标旋转 */
    .floating-music-player.collapsed .toggle-button svg {
        transform: rotate(180deg);
    }

    /* 收起状态下的按钮样式 - 使用百分比适配 */
    .floating-music-player.collapsed .toggle-button {
        transform: translateX(calc(100% + 350px));
        /* 与播放器宽度保持一致 */
    }

    /* 移动端收起状态 */
    .floating-music-player.mobile.collapsed .toggle-button {
        transform: translateX(calc(100% + 250px));
        /* 移动端对应宽度 */
    }

    .toggle-button:hover {
        background: linear-gradient(90deg, #00b09b 0%, #96c93d 100%);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 20px rgba(0, 176, 155, 0.5);
    }

    /* 播放器样式调整 */
    .aplayer {
        border-radius: 8px;
        box-shadow: 0 4px 12px linear-gradient(90deg, #00b09b 0%, #96c93d 100%);
        overflow: hidden;
    }

    /* 暗黑模式支持 */
    .dark-theme .aplayer {
        color-scheme: dark;
        --aplayer-bg-color: #18181b;
        --aplayer-title-color: #f4f4f5;
        --aplayer-artist-color: #e4e4e7;
        --aplayer-lyrics-color: #e4e4e7;
        --aplayer-progress-bar-color: #a1a1aa;
        --aplayer-progress-loaded-color: #98989a;
        --aplayer-progress-played-color: #52525b;
        --aplayer-time-color: #e4e4e7;
        --aplayer-icon-color: #e4e4e7;
    }

    /* 移动端适配 - 小屏幕设备 */
    @media (max-width: 480px) {
        .floating-music-player {
            right: 10px;
            bottom: 10px;
        }

        .floating-music-player .aplayer {
            width: 250px;
            /* 小屏幕设备更小宽度 */
        }
    }
</style>

<!-- 悬浮音乐播放器容器 -->
<div class="floating-music-player" id="musicPlayerContainer">
    <!-- 收起/展开按钮 -->
    <button class="toggle-button" id="toggleButton" title="收起/展开播放器">
        <svg t="1764784132121" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="1603">
            <path
                d="M187.472937 589.322449c179.809148 137.24378 359.620101 274.467691 539.431055 411.691602 64.01603 48.874492 156.299395 3.225908 156.299395-77.322449V100.306592c0-80.548357-92.283365-126.195135-156.299395-77.342318a8736038.67748 8736038.67748 0 0 1-539.431055 411.691602c-51.013056 38.954735-51.013056 115.733512 0 154.666573z"
                fill="#4facfe" p-id="1604"></path>
        </svg>
    </button>

    <!-- MetingJS播放器 -->
    <meting-js auto="https://music.163.com/#/playlist?id=13472902120" theme="#52525b" loop="all" order="list"
        preload="auto" list-folded="true" list-max-height="200px" list-max-width="100px" autoplay="true"></meting-js>
</div>

<script>
    // 收起/展开播放器功能
    document.addEventListener('DOMContentLoaded', function () {
        const toggleButton = document.getElementById('toggleButton');
        const playerContainer = document.getElementById('musicPlayerContainer');
        let isCollapsed = false;

        // 检测是否为移动设备
        function isMobileDevice() {
            return /Mobi|Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ||
                (window.innerWidth <= 768); // 或者根据屏幕宽度判断
        }

        // 初始化移动端检测
        function initMobileDetection() {
            if (isMobileDevice()) {
                playerContainer.classList.add('mobile');
                console.log('移动端设备检测，播放器宽度已调整');
            } else {
                playerContainer.classList.remove('mobile');
                console.log('桌面端设备，使用默认宽度');
            }
        }

        // 窗口大小变化时重新检测
        function handleResize() {
            if (window.innerWidth <= 768) {
                playerContainer.classList.add('mobile');
            } else {
                playerContainer.classList.remove('mobile');
            }
        }

        // 初始化检测
        initMobileDetection();

        // 监听窗口大小变化
        window.addEventListener('resize', handleResize);

        toggleButton.addEventListener('click', function () {
            isCollapsed = !isCollapsed;
            playerContainer.classList.toggle('collapsed', isCollapsed);
            toggleButton.title = isCollapsed ? '展开播放器' : '收起播放器';
        });

        // 监听页面滚动，自动收起播放器
        window.addEventListener('scroll', function () {
            if (!isCollapsed && window.scrollY > 300) {
                isCollapsed = true;
                playerContainer.classList.add('collapsed');
                toggleButton.title = '展开播放器';
            }
        });

        // 检测系统暗黑模式
        if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
            document.body.classList.add('dark-theme');
        }

        // 监听系统暗黑模式变化
        window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', function (e) {
            if (e.matches) {
                document.body.classList.add('dark-theme');
            } else {
                document.body.classList.remove('dark-theme');
            }
        });
    });
</script>

其中，https://music.163.com/#/playlist?id=13472902120是你的歌单或者歌曲链接，请把它替换成你自己的歌单链接

<!-- MetingJS播放器 -->
<!-- 其中，https://music.163.com/#/playlist?id=13472902120 是你的歌单或者歌曲链接 -->
<meting-js 
    auto="https://music.163.com/#/playlist?id=13472902120" 
    theme="#52525b" 
    loop="all" 
    order="list" 
    preload="auto"
    list-folded="true"
    list-max-height="200px"
    list-max-width="100px"
    autoplay="true"
></meting-js>

保存后就可以使用了

PS：偶见切换页面的时候，点击收起按钮无响应，刷新页面后即可解决

另外播放器组件隐藏后，会导致所在区域的组件无法点击，这个后续有空再修复吧……