感觉花里胡哨的，但是还是不错.....

/**
 * 悬浮音乐播放器
 * 
 * @author 钦州的一个辣呆
 * @website https://www.napan.top
 * @description 精致悬浮音乐播放器，支持网易云音乐播放列表
 * @version 1.0
 * 
 * 功能特性：
 * - 迷你/完整模式切换
 * - 拖拽移动位置
 * - 响应式设计
 * - 动态视频背景
 * - 网易云音乐集成
 * 
 * 技术栈：
 * - APlayer 音乐播放器
 * - MetingJS 音乐API
 * - Font Awesome 图标
 * 
 * © 2025 钦州的一个辣呆 版权所有
 * 桂ICP备2024037071号 桂公网安备45070302000707号
 */

// Create floating music player element
const floatingPlayer = document.createElement('div');
floatingPlayer.id = 'floating-music-player';
floatingPlayer.className = 'player-mini';
floatingPlayer.innerHTML = `
    <!-- 播放器内部视频背景 -->
    <video class="player-video-bg" autoplay muted loop>
        <source src="https://www.xiaopozhan.top/APP%E4%B8%8B%E8%BD%BD2/download%20(17).mp4" type="video/mp4">
    </video>
  
    <div class="player-header">
        <div class="player-icon">
            <i class="fas fa-music"></i>
        </div>
        <div class="player-title">音乐播放器</div>
        <div class="player-toggle">展开</div>
    </div>
  
    <div class="player-body">
        <!-- APlayer will be initialized here -->
        <div id="aplayer"></div>
    </div>
`;

// Add styles
const style = document.createElement('style');
style.textContent = `
    :root {
        --primary-color: #6C5CE7;
        --secondary-color: #00CEFF;
        --text-color: #F8F9FA;
        --accent-color: #FFD700;
    }
  
    /* 基础样式 */
    #floating-music-player {
        position: fixed;
        left: 25px;
        bottom: 25px;
        z-index: 9999;
        width: 340px;
        max-width: 90%;
        transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
        border-radius: 18px;
        overflow: hidden;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
        background: rgba(20, 20, 30, 0.4);
        backdrop-filter: blur(15px);
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
  
    /* 圆形迷你模式 */
    #floating-music-player.player-mini {
        width: 65px;
        height: 65px;
        border-radius: 50%;
        overflow: hidden;
        cursor: pointer;
        box-shadow: 0 6px 25px rgba(0, 0, 0, 0.45);
    }
  
    /* 播放器内部视频背景 */
    .player-video-bg {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: -1;
        opacity: 0.2;
        filter: blur(3px);
    }
  
    /* 播放器头部 */
    .player-header {
        padding: 16px 22px;
        background: linear-gradient(135deg, 
            rgba(108, 92, 231, 0.2), 
            rgba(0, 206, 255, 0.2));
        display: flex;
        align-items: center;
        cursor: pointer;
        user-select: none;
        transition: all 0.4s ease;
        position: relative;
        z-index: 1;
    }
  
    /* 精致纤细的分割线 */
    .player-header::after {
        content: '';
        position: absolute;
        left: 22px;
        right: 22px;
        bottom: 0;
        height: 0.3px;
        background: linear-gradient(90deg, 
            transparent 0%, 
            rgba(255, 255, 255, 0.1) 20%, 
            rgba(255, 255, 255, 0.1) 80%, 
            transparent 100%);
        opacity: 0.5;
    }
  
    .player-mini .player-header {
        padding: 0;
        height: 100%;
        width: 100%;
        justify-content: center;
        background: linear-gradient(135deg, 
            rgba(108, 92, 231, 0.25), 
            rgba(0, 206, 255, 0.25));
    }
  
    .player-mini .player-header::after {
        display: none;
    }
  
    /* 图标设计 */
    .player-icon {
        width: 38px;
        height: 38px;
        background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 14px;
        transition: all 0.4s ease;
        box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
    }
  
    .player-mini .player-icon {
        margin: 0;
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background: transparent;
        animation: float 3s ease-in-out infinite, rotate 10s linear infinite;
    }
  
    @keyframes float {
        0%, 100% { transform: translateY(0px); }
        50% { transform: translateY(-5px); }
    }
  
    @keyframes rotate {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
  
    .player-mini .player-icon i {
        color: white;
        font-size: 30px;
        text-shadow: 0 0 15px rgba(255, 215, 0, 0.6);
    }
  
    .player-icon i {
        color: white;
        font-size: 18px;
    }
  
    /* 文字样式 */
    .player-title {
        font-size: 17px;
        font-weight: 600;
        color: var(--text-color);
        flex-grow: 1;
        transition: all 0.4s ease;
        letter-spacing: 0.5px;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    }
  
    .player-mini .player-title,
    .player-mini .player-toggle {
        display: none;
    }
  
    .player-toggle {
        color: var(--accent-color);
        font-size: 14px;
        transition: all 0.4s ease;
        font-weight: 500;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
    }
  
    /* 播放器主体 */
    .player-body {
        padding: 22px;
        display: block;
        transition: all 0.4s ease;
        position: relative;
    }
  
    .player-mini .player-body {
        display: none;
    }
  
    /* APlayer自定义样式 */
    .aplayer {
        margin: 0 !important;
        background: transparent !important;
        color: var(--text-color) !important;
        font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
        position: relative;
        z-index: 1;
    }
  
    .aplayer .aplayer-info {
        padding: 0 0 18px 0 !important;
        border-top: none !important;
        margin-top: 0 !important;
        position: relative;
    }
  
    .aplayer .aplayer-info::after {
        content: '';
        position: absolute;
        left: 0;
        right: 0;
        bottom: 10px;
        height: 0.3px;
        background: linear-gradient(90deg, 
            transparent 0%, 
            rgba(255, 255, 255, 0.1) 20%, 
            rgba(255, 255, 255, 0.1) 80%, 
            transparent 100%);
        opacity: 0.5;
    }
  
    .aplayer .aplayer-info .aplayer-music {
        color: var(--text-color) !important;
        font-size: 15px !important;
        font-weight: 500;
    }
  
    .aplayer .aplayer-info .aplayer-controller .aplayer-time {
        color: rgba(248, 249, 250, 0.7) !important;
        font-size: 13px !important;
    }
  
    .aplayer .aplayer-button path {
        fill: var(--accent-color) !important;
    }
  
    .aplayer .aplayer-volume-wrap .aplayer-volume-button path {
        fill: var(--accent-color) !important;
    }
  
    .aplayer .aplayer-bar-wrap .aplayer-bar {
        background: rgba(255, 255, 255, 0.1) !important;
        height: 4px !important;
        border-radius: 3px !important;
    }
  
    .aplayer .aplayer-bar-wrap .aplayer-bar .aplayer-played {
        background: linear-gradient(90deg, var(--primary-color), var(--secondary-color)) !important;
        height: 4px !important;
        border-radius: 3px !important;
    }
  
    .aplayer .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb {
        background: white !important;
        border: 2px solid var(--accent-color) !important;
        width: 15px !important;
        height: 15px !important;
        margin-top: -5px !important;
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
    }
  
    .aplayer .aplayer-lrc {
        display: none;
    }
  
    /* 播放列表美化 - 更高透明度 */
    .aplayer .aplayer-list {
        max-height: 260px !important;
        background: rgba(30, 30, 40, 0.4) !important;
        border-radius: 10px !important;
        margin-top: 12px !important;
        border: 1px solid rgba(255, 255, 255, 0.08);
        backdrop-filter: blur(8px);
    }
  
    .aplayer .aplayer-list ol li {
        border-top: 1px solid rgba(255, 255, 255, 0.05) !important;
        color: rgba(248, 249, 250, 0.9) !important;
        padding: 10px 18px !important;
        transition: all 0.2s ease !important;
    }
  
    .aplayer .aplayer-list ol li:hover {
        background: rgba(108, 92, 231, 0.1) !important;
        color: var(--text-color) !important;
    }
  
    .aplayer .aplayer-list ol li.aplayer-list-light {
        background: linear-gradient(90deg, 
            rgba(108, 92, 231, 0.15), 
            rgba(0, 206, 255, 0.15)) !important;
        color: var(--text-color) !important;
    }
  
    .aplayer .aplayer-list ol li .aplayer-list-index {
        color: var(--accent-color) !important;
    }
  
    .aplayer .aplayer-list ol li .aplayer-list-author {
        color: rgba(248, 249, 250, 0.7) !important;
    }
  
    /* 响应式调整 */
    @media (max-width: 768px) {
        #floating-music-player {
            width: 300px;
            left: 15px;
            bottom: 15px;
        }
  
        .player-header {
            padding: 14px 18px;
        }
  
        .player-header::after {
            left: 18px;
            right: 18px;
        }
  
        #floating-music-player.player-mini {
            width: 55px;
            height: 55px;
        }
  
        .player-mini .player-icon i {
            font-size: 26px;
        }
    }
  
    @media (max-width: 480px) {
        #floating-music-player {
            width: calc(100% - 30px);
            left: 15px;
            bottom: 15px;
        }
  
        #floating-music-player.player-mini {
            width: 50px;
            height: 50px;
        }
  
        .player-mini .player-icon i {
            font-size: 24px;
        }
    }
`;

// Add required CSS
const fontAwesomeLink = document.createElement('link');
fontAwesomeLink.rel = 'stylesheet';
fontAwesomeLink.href = 'https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.4/css/all.min.css';

const aplayerCssLink = document.createElement('link');
aplayerCssLink.rel = 'stylesheet';
aplayerCssLink.href = 'https://cdn.bootcdn.net/ajax/libs/aplayer/1.10.1/APlayer.min.css';

// Add to head
document.head.appendChild(style);
document.head.appendChild(fontAwesomeLink);
document.head.appendChild(aplayerCssLink);

// Add to body
document.body.appendChild(floatingPlayer);

// Load APlayer and Meting JS scripts
function loadScript(src, callback) {
    const script = document.createElement('script');
    script.src = src;
    script.onload = callback;
    document.body.appendChild(script);
}

// Initialize after scripts are loaded
loadScript('https://cdn.bootcdn.net/ajax/libs/aplayer/1.10.1/APlayer.min.js', function() {
    loadScript('https://cdn.bootcdn.net/ajax/libs/meting/2.0.1/Meting.min.js', function() {
        // Initialize Meting player
        const meting = document.createElement('meting-js');
        meting.setAttribute('server', 'netease');
        meting.setAttribute('type', 'playlist');
        meting.setAttribute('id', '12442693622');
        meting.setAttribute('fixed', 'false');
        meting.setAttribute('mini', 'false');
        meting.setAttribute('theme', '#6C5CE7');
        meting.setAttribute('order', 'list');
        meting.setAttribute('autoplay', 'false');
        meting.setAttribute('loop', 'all');
        meting.setAttribute('preload', 'auto');
        meting.setAttribute('list-folded', 'true');
        meting.setAttribute('volume', '0.7');
  
        document.querySelector('.player-body').appendChild(meting);
  
        // 在控制台显示版权信息
        console.log(`
%c悬浮音乐播放器 v1.0
%c作者: 钦州的一个辣呆
%c官网: https://www.napan.top
%c© 2025 版权所有
        `.trim(), 
        'color: #6C5CE7; font-weight: bold; font-size: 14px;',
        'color: #00CEFF;',
        'color: #FFD700;',
        'color: #888; font-size: 12px;'
        );
    });
});

// Player functionality
function togglePlayer() {
    const player = document.getElementById('floating-music-player');
    player.classList.toggle('player-mini');
  
    const toggleText = player.querySelector('.player-toggle');
    if (player.classList.contains('player-mini')) {
        toggleText.textContent = '展开';
    } else {
        toggleText.textContent = '收起';
    }
}

// Add copyright notice to player
function addCopyrightNotice() {
    const copyright = document.createElement('div');
    copyright.style.cssText = `
        position: absolute;
        bottom: 5px;
        right: 10px;
        font-size: 10px;
        color: rgba(255,255,255,0.3);
        z-index: 10000;
        pointer-events: none;
        font-family: 'Microsoft YaHei', sans-serif;
    `;
    copyright.innerHTML = '© 钦州的一个辣呆';
  
    const player = document.getElementById('floating-music-player');
    if (player) {
        player.appendChild(copyright);
    }
}

// Add event listeners
document.addEventListener('DOMContentLoaded', function() {
    const player = document.getElementById('floating-music-player');
    const header = player.querySelector('.player-header');
  
    // Set default mini mode
    player.classList.add('player-mini');
  
    // Set video background
    const video = player.querySelector('.player-video-bg');
    video.playbackRate = 0.5;
  
    // Toggle player on header click
    header.addEventListener('click', togglePlayer);
  
    // Add copyright notice
    addCopyrightNotice();
  
    // Prevent touch conflicts
    document.addEventListener('APlayerLoaded', function() {
        document.querySelectorAll('.aplayer-bar-wrap').forEach(function(el) {
            el.addEventListener('touchstart', function(e) {
                e.stopPropagation();
            });
        });
    });
  
    // Drag functionality
    let isDragging = false;
    let offsetX, offsetY;
  
    header.addEventListener('mousedown', function(e) {
        if (e.target === header || e.target.closest('.player-header')) {
            isDragging = true;
            offsetX = e.clientX - player.getBoundingClientRect().left;
            offsetY = e.clientY - player.getBoundingClientRect().top;
            player.style.cursor = 'grabbing';
        }
    });
  
    document.addEventListener('mousemove', function(e) {
        if (!isDragging) return;
  
        const x = e.clientX - offsetX;
        const y = e.clientY - offsetY;
  
        player.style.left = `${Math.max(0, Math.min(x, window.innerWidth - player.offsetWidth))}px`;
        player.style.top = `${Math.max(0, Math.min(y, window.innerHeight - player.offsetHeight))}px`;
        player.style.bottom = 'auto';
    });
  
    document.addEventListener('mouseup', function() {
        isDragging = false;
        player.style.cursor = '';
    });
});

使用方法，复制代码保存为.js

比如：bfq.js

• 调用方式：

  <script src="bfq.js"></script>