<pre>&lt;!--
 * @package 163_music
 * @author Suxiaoqinx/kanxizai
 * @version 1.0
 * @Date 2025-02-26
 * @link https://api.kxzjoker.cn
--&gt;
&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;zh-CN&quot;&gt;
&lt;head&gt;
    &lt;meta charset=&quot;UTF-8&quot;&gt;
    &lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1.0&quot;&gt;
    &lt;title&gt;网易云无损解析&lt;/title&gt;
    &lt;link href=&quot;https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/css/bootstrap.min.css&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;link href=&quot;https://cdn.bootcdn.net/ajax/libs/aplayer/1.10.1/APlayer.min.css&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;link href=&quot;https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.4/css/all.min.css&quot; rel=&quot;stylesheet&quot;&gt;
    &lt;style&gt;
        :root {
            --primary-color: #ff8db4;
            --secondary-color: #6b7ff2;
            --bg-gradient: linear-gradient(135deg, #f5f7fb 0%, #e7ebfd 100%);
            --card-bg: rgba(255, 255, 255, 0.7);
            --text-primary: #2d3748;
            --text-secondary: #4a5568;
            --border-radius: 16px;
            --shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
            --glow: 0 0 15px rgba(255, 141, 180, 0.5);
        }

        body {
            background: var(--bg-gradient);
            min-height: 100vh;
            font-family: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
            position: relative;
            color: var(--text-primary);
            line-height: 1.6;
        }

        .glass-effect {
            background: var(--card-bg);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: var(--shadow);
            border-radius: var(--border-radius);
        }

        .container {
            max-width: 800px;
            padding: 2rem;
        }

        .header {
            text-align: center;
            margin-bottom: 2.5rem;
            padding: 2rem;
            border-radius: var(--border-radius);
            background: var(--card-bg);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: var(--shadow);
            position: relative;
        }

        .header h1 {
            color: var(--primary-color);
            font-weight: 800;
            font-size: 2.5rem;
            letter-spacing: -0.025em;
            margin-bottom: 0.5rem;
            text-shadow: var(--glow);
        }

        .header p {
            color: var(--text-secondary);
            font-size: 1.1rem;
        }

        .card-form {
            border-radius: var(--border-radius);
            padding: 2rem;
            margin-bottom: 2rem;
            background: var(--card-bg);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: var(--shadow);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        
        .card-form:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow), var(--glow);
        }

        .control-buttons {
            position: fixed;
            top: 1.5rem;
            right: 1.5rem;
            z-index: 1000;
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }
        
        .control-btn {
            width: 45px;
            height: 45px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--card-bg);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: var(--shadow);
            cursor: pointer;
            transition: all 0.3s ease;
            color: var(--text-primary);
            font-size: 1.1rem;
        }
        
        .control-btn:hover {
            transform: translateY(-5px) scale(1.05);
            box-shadow: var(--shadow), var(--glow);
            color: var(--primary-color);
        }
        
        .control-btn.active {
            background: var(--primary-color);
            color: white;
        }
        
        .history-sidebar {
            position: fixed;
            top: 0;
            right: -350px;
            width: 350px;
            height: 100vh;
            background: rgba(255, 255, 255, 0.85);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            border-left: 1px solid rgba(255, 255, 255, 0.5);
            box-shadow: -5px 0 25px rgba(0, 0, 0, 0.05);
            z-index: 1001;
            transition: right 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            padding: 1.5rem;
            overflow-y: auto;
        }
        
        .history-sidebar.active {
            right: 0;
        }
        
        .history-sidebar-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 1.25rem;
            padding-bottom: 0.75rem;
            border-bottom: 1px solid rgba(0, 0, 0, 0.05);
        }

        .history-sidebar-header h5 {
            font-weight: 700;
            color: var(--primary-color);
        }
        
        .close-history {
            background: none;
            border: none;
            font-size: 1.5rem;
            cursor: pointer;
            color: var(--text-secondary);
            transition: color 0.2s ease;
        }
        
        .close-history:hover {
            color: var(--primary-color);
        }

        .user-ip-info {
            background: rgba(255, 255, 255, 0.7);
            border-radius: 8px;
            padding: 0.75rem 1rem;
            margin-bottom: 1.25rem;
            border: 1px solid rgba(0, 0, 0, 0.05);
            font-size: 0.9rem;
        }

        .form-control, .form-select {
            border: 2px solid rgba(107, 127, 242, 0.2);
            border-radius: 12px;
            padding: 0.875rem 1.25rem;
            transition: all 0.3s ease;
            background: rgba(255, 255, 255, 0.8);
            color: var(--text-primary);
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.03);
        }

        .form-control:focus, .form-select:focus {
            border-color: var(--secondary-color);
            box-shadow: 0 0 0 3px rgba(107, 127, 242, 0.25);
            background: white;
        }

        .form-label {
            font-weight: 600;
            margin-bottom: 0.75rem;
            color: var(--text-primary);
        }

        .btn-primary {
            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
            border: none;
            padding: 0.875rem 2rem;
            border-radius: 12px;
            font-weight: 600;
            letter-spacing: 0.025em;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(107, 127, 242, 0.3);
        }

        .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 25px rgba(107, 127, 242, 0.4);
        }

        .btn-primary:active {
            transform: translateY(-1px);
        }

        .result-card {
            border-radius: var(--border-radius);
            padding: 2rem;
            margin-top: 2rem;
            background: var(--card-bg);
            backdrop-filter: blur(12px);
            -webkit-backdrop-filter: blur(12px);
            border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: var(--shadow);
            transition: transform 0.3s ease;
        }
        
        .result-card:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow), var(--glow);
        }

        .song-info img {
            width: 100%;
            max-width: 300px;
            border-radius: var(--border-radius);
            margin: 1rem auto;
            box-shadow: var(--shadow);
            cursor: pointer;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }

        .song-info img:hover {
            transform: scale(1.03);
            box-shadow: var(--shadow), var(--glow);
        }

        /* 播放器整体布局调整 */
        .aplayer {
            border-radius: var(--border-radius);
            margin: 1.5rem 0;
            box-shadow: var(--shadow);
            overflow: visible !important; /* 改为visible确保控制元素不被截断 */
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border: 1px solid rgba(255, 255, 255, 0.3);
            background: rgba(255, 255, 255, 0.7) !important;
            min-height: 120px;
            padding-bottom: 15px; /* 底部增加额外空间 */
        }
        
        /* 确保音量控制显示正常 */
        .aplayer .aplayer-controller {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 8px 0;
            min-height: 45px;
        }
        
        .aplayer .aplayer-controller .aplayer-time {
            position: relative;
            display: flex;
            align-items: center;
        }
        
        .aplayer .aplayer-controller .aplayer-time .aplayer-icon {
            margin: 0 5px;
        }
        
        .aplayer .aplayer-controller .aplayer-bar-wrap {
            margin: 0 10px;
        }
        
        /* 导航按钮样式调整 */
        .aplayer .aplayer-controller .player-navigation-btns {
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 8px;
        }
        
        .aplayer .aplayer-controller .player-navigation-btns .aplayer-icon {
            margin: 0 3px;
            flex-shrink: 0;
        }
        
        /* 音量控制样式调整 */
        .aplayer .aplayer-volume-wrap {
            position: relative;
            margin-left: 15px;
            z-index: 100; /* 确保音量控制显示在最上层 */
        }
        
        .aplayer:hover {
            transform: translateY(-5px);
            box-shadow: var(--shadow), var(--glow);
        }
        
        /* 自定义播放器样式 */
        .aplayer .aplayer-info {
            padding: 16px !important;
            border: none !important;
            background: transparent !important;
        }
        
        .aplayer .aplayer-info .aplayer-music {
            margin-bottom: 12px;
        }
        
        .aplayer .aplayer-info .aplayer-music .aplayer-title {
            font-size: 16px;
            color: var(--text-primary);
            font-weight: 600;
        }
        
        .aplayer .aplayer-info .aplayer-music .aplayer-author {
            font-size: 14px;
            color: var(--text-secondary);
        }
        
        .aplayer .aplayer-lrc {
            margin: 8px 0;
        }
        
        .aplayer .aplayer-lrc p {
            font-size: 14px;
            color: var(--text-secondary);
        }
        
        .aplayer .aplayer-lrc p.aplayer-lrc-current {
            color: var(--primary-color);
            font-weight: 500;
        }
        
        .aplayer .aplayer-pic {
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }
        
        .aplayer .aplayer-controller {
            background-color: transparent !important;
        }
        
        .aplayer .aplayer-bar-wrap .aplayer-bar {
            height: 6px;
            border-radius: 3px;
            background: rgba(0, 0, 0, 0.05);
        }
        
        .aplayer .aplayer-bar-wrap .aplayer-bar .aplayer-loaded {
            background: rgba(107, 127, 242, 0.2);
            height: 6px;
            border-radius: 3px;
        }
        
        .aplayer .aplayer-bar-wrap .aplayer-bar .aplayer-played {
            height: 6px;
            border-radius: 3px;
        }
        
        .aplayer .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb {
            background: var(--primary-color);
            box-shadow: 0 0 5px rgba(255, 141, 180, 0.8);
            transform: scale(1);
            transition: transform 0.2s ease;
        }
        
        .aplayer .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb:hover {
            transform: scale(1.2);
        }
        
        .aplayer .aplayer-time {
            color: var(--text-secondary);
        }
        
        .aplayer .aplayer-icon {
            transition: color 0.2s ease, transform 0.2s ease;
        }
        
        .aplayer .aplayer-icon:hover {
            color: var(--primary-color) !important;
            transform: scale(1.1);
        }
        
        /* 修复音量控制被挡住的问题 */
        .aplayer .aplayer-volume-wrap {
            position: relative;
            margin-left: 15px;
        }
        
        .aplayer .aplayer-volume-wrap .aplayer-volume-bar-wrap {
            position: absolute;
            bottom: 15px;
            right: 5px;
            width: 25px;
            height: 120px;
            background-color: rgba(255, 255, 255, 0.9);
            border-radius: 10px;
            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
            z-index: 100;
            display: none;
            transform: rotate(0);
            transform-origin: bottom center;
            padding: 10px 0;
        }
        
        .aplayer .aplayer-volume-wrap:hover .aplayer-volume-bar-wrap {
            display: block;
        }
        
        .aplayer .aplayer-volume-wrap .aplayer-volume-bar-wrap .aplayer-volume-bar {
            position: absolute;
            width: 8px;
            height: 100px;
            left: 50%;
            transform: translateX(-50%);
            bottom: 10px;
            background: rgba(0, 0, 0, 0.05);
            border-radius: 4px;
        }
        
        .aplayer .aplayer-volume-wrap .aplayer-volume-bar-wrap .aplayer-volume-bar .aplayer-volume {
            border-radius: 4px;
            width: 8px;
            background: var(--primary-color);
        }
        
        /* 改进控制器布局 */
        .aplayer .aplayer-controller {
            display: flex;
            align-items: center;
            padding: 5px 0;
        }
        
        .aplayer .aplayer-controller .aplayer-time {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
        }
        
        /* 改进列表样式 */
        .aplayer .aplayer-list {
            background: rgba(255, 255, 255, 0.7) !important;
            border-top: 1px solid rgba(0, 0, 0, 0.05) !important;
            max-height: 200px !important;
        }

        .lyric-box {
            max-height: 300px;
            overflow-y: auto;
            padding: 1.25rem;
            background: rgba(248, 249, 250, 0.7);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            border-radius: 12px;
            margin: 1.25rem 0;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
        }

        .history-item {
            display: flex;
            align-items: center;
            padding: 0.875rem 1rem;
            transition: all 0.3s ease;
            border-left: 3px solid transparent;
            margin-bottom: 0.75rem;
            background: rgba(255, 255, 255, 0.7);
            backdrop-filter: blur(5px);
            -webkit-backdrop-filter: blur(5px);
            border-radius: 10px;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
        }

        .history-item:hover {
            background-color: rgba(255, 255, 255, 0.9);
            border-left-color: var(--primary-color);
            transform: translateX(3px) scale(1.01);
            box-shadow: 0 3px 10px rgba(0, 0, 0, 0.04);
        }

        .history-item img {
            width: 50px;
            height: 50px;
            border-radius: 8px;
            margin-right: 1rem;
            object-fit: cover;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }

        .history-item-info {
            flex: 1;
        }

        .history-item-title {
            font-weight: 600;
            margin-bottom: 0.25rem;
            color: var(--text-primary);
            font-size: 0.95rem;
        }

        .history-item-artist {
            font-size: 0.85rem;
            color: var(--text-secondary);
        }
        
        .history-item-quality {
            font-size: 0.75rem;
            margin-top: 0.25rem;
        }
        
        .history-item-quality .badge {
            font-weight: normal;
            padding: 0.25rem 0.5rem;
            border-radius: 6px;
            box-shadow: 0 2px 3px rgba(0, 0, 0, 0.05);
        }
        
        .badge.bg-standard { background-color: #6c757d !important; }
        .badge.bg-exhigh { background-color: #28a745 !important; }
        .badge.bg-lossless { background-color: #17a2b8 !important; }
        .badge.bg-hires { background-color: #007bff !important; }
        .badge.bg-sky { background-color: #6f42c1 !important; }
        .badge.bg-jyeffect { background-color: #fd7e14 !important; }
        .badge.bg-jymaster { background-color: #dc3545 !important; }

        .history-item-actions {
            display: flex;
            gap: 0.5rem;
        }
        
        .btn-sm {
            padding: 0.25rem 0.5rem;
            border-radius: 6px;
            transition: all 0.2s ease;
        }
        
        .btn-outline-primary, .btn-outline-danger {
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
        }
        
        .btn-outline-primary:hover, .btn-outline-danger:hover {
            transform: translateY(-2px);
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
        }
        
        /* 樱花特效容器 */
        .sakura {
            position: fixed;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            pointer-events: none;
            z-index: 999;
        }
        
        /* 模态框样式 */
        .modal-content {
            border-radius: var(--border-radius);
            border: none;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(15px);
            -webkit-backdrop-filter: blur(15px);
            box-shadow: var(--shadow), var(--glow);
        }
        
        .modal-header {
            border-bottom-color: rgba(0, 0, 0, 0.05);
            padding: 1.25rem 1.5rem;
        }
        
        .modal-footer {
            border-top-color: rgba(0, 0, 0, 0.05);
            padding: 1.25rem 1.5rem;
        }
        
        .modal-title {
            color: var(--primary-color);
            font-weight: 700;
        }
        
        /* 复制弹窗特殊样式 */
        #copyModal .modal-content {
            border-left: 4px solid var(--primary-color);
        }
        
        #copy-song-url {
            word-break: break-all;
            font-family: monospace;
            background-color: rgba(0, 0, 0, 0.03) !important;
        }
        
        #copyModal .modal-body {
            padding: 1.5rem;
        }
        
        #browser-download-btn {
            background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
            border: none;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(107, 127, 242, 0.3);
        }
        
        #browser-download-btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(107, 127, 242, 0.4);
        }

        @media (max-width: 768px) {
            .container {
                padding: 1rem;
            }
            
            .header h1 {
                font-size: 1.8rem;
            }
            
            .form-control, .form-select {
                font-size: 0.95rem;
                padding: 0.75rem 1rem;
            }
            
            .history-sidebar {
                width: 100%;
                right: -100%;
            }
            
            .control-buttons {
                top: auto;
                bottom: 1.5rem;
                right: 1.5rem;
                flex-direction: row;
            }
            
            .card-form, .result-card {
                padding: 1.5rem;
            }
            
            .playback-controls {
                gap: 0.5rem;
            }
            
            .playback-btn {
                width: 35px;
                height: 35px;
            }
            
            .playback-btn.large {
                width: 45px;
                height: 45px;
            }
        }

        /* 新增播放控制条样式 - 改为透明，因为不再需要 */
        .playback-controls {
            display: none; /* 隐藏额外的控制栏 */
        }
    &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
    &lt;!-- 樱花特效容器 --&gt;
    &lt;div id=&quot;sakura-container&quot; class=&quot;sakura&quot;&gt;&lt;/div&gt;
    
    &lt;!-- 控制按钮 --&gt;
    &lt;div class=&quot;control-buttons&quot;&gt;
        &lt;div class=&quot;control-btn&quot; id=&quot;toggle-history&quot; title=&quot;历史记录&quot;&gt;
            &lt;i class=&quot;fas fa-history&quot;&gt;&lt;/i&gt;
        &lt;/div&gt;
        &lt;div class=&quot;control-btn&quot; id=&quot;toggle-sakura&quot; title=&quot;樱花特效&quot;&gt;
            &lt;i class=&quot;fas fa-seedling&quot;&gt;&lt;/i&gt;
        &lt;/div&gt;
    &lt;/div&gt;
    
    &lt;!-- 历史记录侧边栏 --&gt;
    &lt;div class=&quot;history-sidebar&quot; id=&quot;history-sidebar&quot;&gt;
        &lt;div class=&quot;history-sidebar-header&quot;&gt;
            &lt;h5 class=&quot;mb-0&quot;&gt;📜 解析历史&lt;/h5&gt;
            &lt;div&gt;
                &lt;button id=&quot;clear-history&quot; class=&quot;btn btn-sm btn-outline-danger me-2&quot;&gt;清空历史&lt;/button&gt;
                &lt;button class=&quot;close-history&quot; id=&quot;close-history&quot;&gt;&amp;times;&lt;/button&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class=&quot;user-ip-info mb-3 p-2 bg-light rounded&quot;&gt;
            &lt;small class=&quot;text-muted&quot;&gt;当前IP: &lt;span id=&quot;user-ip&quot;&gt;正在获取...&lt;/span&gt;&lt;/small&gt;
        &lt;/div&gt;
        &lt;div id=&quot;history-list&quot; class=&quot;list-group&quot;&gt;
            &lt;!-- 历史记录将在这里动态加载 --&gt;
            &lt;div class=&quot;text-center text-muted py-3&quot; id=&quot;no-history&quot;&gt;暂无解析历史&lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;div class=&quot;container&quot;&gt;
        &lt;!-- 自动弹窗 --&gt;
        &lt;div class=&quot;modal fade&quot; id=&quot;welcomeModal&quot; tabindex=&quot;-1&quot; aria-labelledby=&quot;welcomeModalLabel&quot; aria-hidden=&quot;true&quot;&gt;
            &lt;div class=&quot;modal-dialog modal-dialog-centered&quot;&gt;
                &lt;div class=&quot;modal-content&quot;&gt;
                    &lt;div class=&quot;modal-header&quot;&gt;
                        &lt;h5 class=&quot;modal-title&quot; id=&quot;welcomeModalLabel&quot;&gt;欢迎使用网易云无损解析工具&lt;/h5&gt;
                        &lt;button type=&quot;button&quot; class=&quot;btn-close&quot; data-bs-dismiss=&quot;modal&quot; aria-label=&quot;关闭&quot;&gt;&lt;/button&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;modal-body&quot;&gt;
                        &lt;p&gt;👋 欢迎使用网易云无损解析工具！&lt;/p&gt;
                        &lt;p&gt;使用方法：&lt;/p&gt;
                        &lt;ul&gt;
                            &lt;li&gt;输入网易云音乐歌曲ID或分享链接&lt;/li&gt;
                            &lt;li&gt;选择您想要的音质等级&lt;/li&gt;
                            &lt;li&gt;点击&quot;立即解析&quot;按钮&lt;/li&gt;
                            &lt;li&gt;欢迎加入QQ群交流群：784907066&lt;/li&gt;
                        &lt;/ul&gt;
                        &lt;p&gt;祝您使用愉快！🎵&lt;/p&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;modal-footer&quot;&gt;
                        &lt;button type=&quot;button&quot; class=&quot;btn btn-primary&quot; data-bs-dismiss=&quot;modal&quot;&gt;了解了&lt;/button&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
        
        &lt;div class=&quot;header&quot;&gt;
            &lt;h1&gt;🎵 网易云无损解析&lt;/h1&gt;
            &lt;p class=&quot;text-muted&quot;&gt;高品质音乐解析下载工具&lt;/p&gt;
        &lt;/div&gt;

        &lt;div class=&quot;card-form&quot;&gt;
            &lt;form id=&quot;query-form&quot;&gt;
                &lt;div class=&quot;mb-4&quot;&gt;
                    &lt;label for=&quot;song_ids&quot; class=&quot;form-label fw-bold&quot;&gt;歌曲ID或URL&lt;/label&gt;
                    &lt;input type=&quot;text&quot; id=&quot;song_ids&quot; class=&quot;form-control&quot; 
                           placeholder=&quot;请输入歌曲ID或分享链接&quot;&gt;
                &lt;/div&gt;
                &lt;div class=&quot;mb-4&quot;&gt;
                    &lt;label for=&quot;level&quot; class=&quot;form-label fw-bold&quot;&gt;音质选择&lt;/label&gt;
                    &lt;select id=&quot;level&quot; class=&quot;form-select&quot;&gt;
                        &lt;option value=&quot;standard&quot;&gt;标准音质&lt;/option&gt;
                        &lt;option value=&quot;exhigh&quot;&gt;极高音质&lt;/option&gt;
                        &lt;option value=&quot;lossless&quot;&gt;无损音质&lt;/option&gt;
                        &lt;option value=&quot;hires&quot;&gt;Hires音质&lt;/option&gt;
                        &lt;option value=&quot;sky&quot;&gt;沉浸环绕声&lt;/option&gt;
                        &lt;option value=&quot;jyeffect&quot;&gt;高清环绕声&lt;/option&gt;
                        &lt;option value=&quot;jymaster&quot;&gt;超清母带&lt;/option&gt;
                    &lt;/select&gt;
                &lt;/div&gt;
                &lt;div class=&quot;d-grid&quot;&gt;
                    &lt;button type=&quot;submit&quot; class=&quot;btn btn-primary btn-lg&quot;&gt;
                        🎶 立即解析
                    &lt;/button&gt;
                &lt;/div&gt;
            &lt;/form&gt;
        &lt;/div&gt;

        &lt;!-- 解析历史已移至右侧侧边栏 --&gt;

        &lt;div id=&quot;song-info&quot; class=&quot;result-card d-none&quot;&gt;
            &lt;div id=&quot;aplayer&quot;&gt;&lt;/div&gt;
            
            &lt;!-- 新增播放控制条 --&gt;
            &lt;div class=&quot;playback-controls&quot;&gt;
                &lt;button id=&quot;prev-song&quot; class=&quot;playback-btn&quot;&gt;
                    &lt;i class=&quot;fas fa-step-backward&quot;&gt;&lt;/i&gt;
                &lt;/button&gt;
                &lt;button id=&quot;play-pause&quot; class=&quot;playback-btn large&quot;&gt;
                    &lt;i class=&quot;fas fa-play&quot;&gt;&lt;/i&gt;
                &lt;/button&gt;
                &lt;button id=&quot;next-song&quot; class=&quot;playback-btn&quot;&gt;
                    &lt;i class=&quot;fas fa-step-forward&quot;&gt;&lt;/i&gt;
                &lt;/button&gt;
            &lt;/div&gt;
            
            &lt;div class=&quot;song-info text-center&quot;&gt;
                &lt;img id=&quot;song_pic&quot; src=&quot;&quot; alt=&quot;专辑封面&quot; class=&quot;img-fluid&quot;&gt;
                &lt;h3 class=&quot;mt-3&quot; id=&quot;song_name&quot;&gt;&lt;/h3&gt;
                &lt;p class=&quot;text-muted&quot; id=&quot;artist_names&quot;&gt;&lt;/p&gt;
            &lt;/div&gt;
            
            &lt;div class=&quot;row mt-4&quot;&gt;
                &lt;div class=&quot;col-md-6&quot;&gt;
                    &lt;p&gt;&lt;strong&gt;📀 专辑：&lt;/strong&gt;&lt;span id=&quot;song_alname&quot;&gt;&lt;/span&gt;&lt;/p&gt;
                    &lt;p&gt;&lt;strong&gt;🎚️ 音质：&lt;/strong&gt;&lt;span id=&quot;song_level&quot;&gt;&lt;/span&gt;&lt;/p&gt;
                &lt;/div&gt;
                &lt;div class=&quot;col-md-6&quot;&gt;
                    &lt;p&gt;&lt;strong&gt;📦 大小：&lt;/strong&gt;&lt;span id=&quot;song_size&quot;&gt;&lt;/span&gt;&lt;/p&gt;
                    &lt;p&gt;&lt;strong&gt;⬇️ 下载：&lt;/strong&gt;&lt;button id=&quot;download_btn&quot; class=&quot;btn btn-sm btn-outline-primary&quot;&gt;复制链接&lt;/button&gt;&lt;/p&gt;
                &lt;/div&gt;
            &lt;/div&gt;

            &lt;div class=&quot;lyric-box&quot;&gt;
                &lt;h5&gt;📜 歌词&lt;/h5&gt;
                &lt;div id=&quot;lyric&quot; class=&quot;text-secondary&quot;&gt;&lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;!-- 复制成功提示弹窗 --&gt;
    &lt;div class=&quot;modal fade&quot; id=&quot;copyModal&quot; tabindex=&quot;-1&quot; aria-labelledby=&quot;copyModalLabel&quot; aria-hidden=&quot;true&quot;&gt;
        &lt;div class=&quot;modal-dialog modal-dialog-centered&quot;&gt;
            &lt;div class=&quot;modal-content&quot;&gt;
                &lt;div class=&quot;modal-header&quot;&gt;
                    &lt;h5 class=&quot;modal-title&quot; id=&quot;copyModalLabel&quot;&gt;
                        &lt;i class=&quot;fas fa-check-circle me-2 text-success&quot;&gt;&lt;/i&gt;链接复制成功！
                    &lt;/h5&gt;
                    &lt;button type=&quot;button&quot; class=&quot;btn-close&quot; data-bs-dismiss=&quot;modal&quot; aria-label=&quot;关闭&quot;&gt;&lt;/button&gt;
                &lt;/div&gt;
                &lt;div class=&quot;modal-body&quot;&gt;
                    &lt;div class=&quot;mb-3&quot;&gt;
                        &lt;div class=&quot;fw-bold mb-1&quot;&gt;🎵 歌曲名称：&lt;/div&gt;
                        &lt;div id=&quot;copy-song-name&quot; class=&quot;ms-3&quot;&gt;&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;mb-3&quot;&gt;
                        &lt;div class=&quot;fw-bold mb-1&quot;&gt;📦 文件大小：&lt;/div&gt;
                        &lt;div id=&quot;copy-song-size&quot; class=&quot;ms-3&quot;&gt;&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class=&quot;mb-3&quot;&gt;
                        &lt;div class=&quot;fw-bold mb-1&quot;&gt;🎚️ 音质：&lt;/div&gt;
                        &lt;div id=&quot;copy-song-quality&quot; class=&quot;ms-3&quot;&gt;&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div&gt;
                        &lt;div class=&quot;fw-bold mb-1&quot;&gt;🔗 下载链接：&lt;/div&gt;
                        &lt;div class=&quot;d-flex align-items-center&quot;&gt;
                            &lt;div id=&quot;copy-song-url&quot; class=&quot;bg-light p-2 rounded small text-break flex-grow-1 ms-3&quot; 
                                 style=&quot;max-height: 70px; overflow-y: auto;&quot;&gt;&lt;/div&gt;
                        &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
                &lt;div class=&quot;modal-footer&quot;&gt;
                    &lt;button type=&quot;button&quot; class=&quot;btn btn-secondary&quot; data-bs-dismiss=&quot;modal&quot;&gt;关闭&lt;/button&gt;
                    &lt;a id=&quot;browser-download-btn&quot; href=&quot;&quot; target=&quot;_blank&quot; class=&quot;btn btn-primary&quot;&gt;
                        &lt;i class=&quot;fas fa-external-link-alt me-1&quot;&gt;&lt;/i&gt;去浏览器下载
                    &lt;/a&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/div&gt;

    &lt;script src=&quot;https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;https://cdn.bootcdn.net/ajax/libs/aplayer/1.10.1/APlayer.min.js&quot;&gt;&lt;/script&gt;
    &lt;script src=&quot;https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.1.3/js/bootstrap.bundle.min.js&quot;&gt;&lt;/script&gt;

    &lt;!-- 樱花特效脚本 --&gt;
    &lt;script&gt;
        // 更现代化的日本风格樱花特效
        function Sakura(selector, options) {
            const defaultOptions = {
                maxSize: 30,
                minSize: 10,
                newOn: 50,
                flakeColors: ['#ffa7b6', '#ffccd5', '#ffd1dc', '#f7cac9', '#f6c6ea', '#ffb7c5', '#ffacc7'],
                className: 'sakura-flake',
                fallSpeed: 1,
                delay: 30
            };
            
            this.options = Object.assign({}, defaultOptions, options);
            this.selector = selector;
            this.element = document.querySelector(selector);
            this.flakes = [];
            this.active = false;
            this.resizeTimeout = null;
            this.isTouch = 'ontouchstart' in window || navigator.msMaxTouchPoints;
            
            // 获取视窗大小
            this.viewportHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
            this.viewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
            
            // 初始化位置范围
            this.xRange = this.viewportWidth - 50;
            this.yRange = this.viewportHeight - 50;
            
            // 监听窗口大小变化
            window.addEventListener('resize', () =&gt; {
                clearTimeout(this.resizeTimeout);
                this.resizeTimeout = setTimeout(() =&gt; {
                    this.viewportHeight = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
                    this.viewportWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
                    this.xRange = this.viewportWidth - 50;
                    this.yRange = this.viewportHeight - 50;
                }, 200);
            });
            
            // 创建樱花瓣元素
            this.createFlake = function() {
                // 基本属性
                const x = Math.floor(Math.random() * this.xRange);
                const y = Math.floor(Math.random() * -200) - 50; // 起始位置在视窗上方
                const size = Math.floor(Math.random() * (this.options.maxSize - this.options.minSize)) + this.options.minSize;
                const colorIndex = Math.floor(Math.random() * this.options.flakeColors.length);
                const color = this.options.flakeColors[colorIndex];
                
                // 运动参数
                const speed = Math.random() * 1.5 + this.options.fallSpeed;
                const opacity = Math.random() * 0.6 + 0.3;
                const flipDegree = Math.random() * 360; // 初始旋转角度
                const flipSpeed = Math.random() * 3 - 1.5; // 旋转速度
                const swingRange = Math.random() * 10 + 5; // 左右摆动幅度
                const swingSpeed = Math.random() * 0.1 + 0.05; // 左右摆动速度
                
                // 创建HTML元素
                const flake = document.createElement('div');
                
                // 随机选择樱花形状 (使用多种樱花图标和表情符号)
                const shapes = [
                    '&lt;svg viewBox=&quot;0 0 24 24&quot; width=&quot;100%&quot; height=&quot;100%&quot;&gt;&lt;path fill=&quot;' + color + '&quot; d=&quot;M12,1C10.89,1 9.89,1.54 9.31,2.41L12,6.29L14.69,2.41C14.11,1.54 13.11,1 12,1M5.69,3.41L2.41,9.31C3.28,9.89 4.29,10.12 5.23,9.82L9.11,7.13L7.13,3.43C6.49,3.09 6.05,3.16 5.69,3.41M18.31,3.41C17.95,3.16 17.5,3.09 16.87,3.43L14.89,7.13L18.77,9.82C19.71,10.12 20.72,9.89 21.59,9.31L18.31,3.41M3.41,14.69L7.13,16.87L9.13,13.16C8.51,12.56 8,11.67 8,10.8C8,10.58 8.03,10.37 8.07,10.16L4.28,8.3C3.68,8.03 3.16,8.08 2.76,8.13C2.39,8.17 2.07,8.28 1.81,8.5C2.21,11.14 2.65,13.37 3.41,14.69M9.11,16.87L12,22L14.9,16.87C14.31,16.4 13.67,15.74 13.29,15L10.7,15C10.32,15.74 9.68,16.4 9.11,16.87M20.59,8.5C20.34,8.28 20,8.17 19.6,8.13C19.24,8.08 18.73,8.03 18.12,8.3L14.33,10.16C14.37,10.37 14.41,10.59 14.41,10.8C14.41,11.67 13.89,12.57 13.27,13.16L15.27,16.87L19,14.69C19.76,13.37 20.21,11.14 20.59,8.5M12,10A0.8,0.8 0 0,0 11.2,10.8A0.8,0.8 0 0,0 12,11.6A0.8,0.8 0 0,0 12.8,10.8A0.8,0.8 0 0,0 12,10Z&quot; /&gt;&lt;/svg&gt;',
                    '&lt;svg viewBox=&quot;0 0 24 24&quot; width=&quot;100%&quot; height=&quot;100%&quot;&gt;&lt;path fill=&quot;' + color + '&quot; d=&quot;M18.66,2C18.4,2 18.16,2.09 18,2.26L14.04,6.21L16.04,8.2L20,4.25C20.33,3.92 20.33,3.38 20,3.05L19.36,2.4C19.2,2.16 18.92,2 18.66,2M13.05,7.19L9.5,10.74C9.5,10.74 9.5,10.74 9.5,10.74L13.11,14.35L16.67,10.8L13.05,7.19M8.13,12.12L4.15,16.1C3.54,16.71 3.54,17.69 4.15,18.3L4.82,19C5.43,19.61 6.41,19.61 7.03,19L11,15.04L8.13,12.12M19.07,15.88C19.07,15.88 15.06,19.88 15.06,19.88C14.45,20.49 13.47,20.49 12.86,19.88L8.46,15.47C8.46,15.47 9.68,14.24 9.68,14.24L14.08,18.63C14.08,18.63 17.26,15.46 17.26,15.46L19.07,15.88Z&quot; /&gt;&lt;/svg&gt;',
                    '&lt;svg viewBox=&quot;0 0 24 24&quot; width=&quot;100%&quot; height=&quot;100%&quot;&gt;&lt;path fill=&quot;' + color + '&quot; d=&quot;M8,3C6.47,3 5.04,3.23 4.22,4.05C3.41,4.87 3,6.23 3,8C3,10.34 4.07,13.11 5.76,15.73C7.45,18.35 9.79,20.59 12,21.93C14.21,20.59 16.55,18.35 18.24,15.73C19.93,13.11 21,10.34 21,8C21,6.23 20.59,4.87 19.78,4.05C18.96,3.23 17.53,3 16,3C14.82,3 13.93,3.47 13.21,3.91C12.86,4.13 12.53,4.37 12.25,4.58C11.97,4.37 11.64,4.13 11.29,3.91C10.57,3.47 9.68,3 8.5,3H8M8.17,5.08C8.68,5.08 9.15,5.36 9.56,5.67C10.07,6.05 10.47,6.5 11.03,6.92C11.29,7.09 11.92,7.09 12.19,6.92C12.74,6.5 13.14,6.05 13.65,5.67C14.07,5.36 14.5,5.08 15.03,5.08C15.81,5.08 16.21,5.14 16.54,5.27C16.87,5.39 17.08,5.61 17.25,5.91C17.61,6.57 17.69,7.71 17.06,9.21C16.44,10.7 15.31,12.43 14,14.07C13.38,14.86 12.7,15.57 12,16.11C11.3,15.57 10.62,14.86 10,14.07C8.7,12.43 7.56,10.7 6.94,9.21C6.31,7.71 6.39,6.57 6.75,5.91C6.92,5.61 7.13,5.39 7.46,5.27C7.8,5.14 8.17,5.08 8.17,5.08Z&quot; /&gt;&lt;/svg&gt;'
                ];
                
                const shape = shapes[Math.floor(Math.random() * shapes.length)];
                flake.innerHTML = shape;
                
                // 设置样式
                flake.style.position = 'fixed';
                flake.style.left = x + 'px';
                flake.style.top = y + 'px';
                flake.style.width = size + 'px';
                flake.style.height = size + 'px';
                flake.style.opacity = opacity;
                flake.style.transform = `rotate(${flipDegree}deg)`;
                flake.style.transformOrigin = 'center center';
                flake.style.zIndex = 9999;
                flake.style.pointerEvents = 'none';
                flake.style.transition = 'transform 0.2s ease-out';
                flake.style.filter = 'drop-shadow(0 0 1px rgba(255, 255, 255, 0.7))';
                
                if(this.isTouch) {
                    flake.style.display = Math.random() &gt; 0.25 ? 'block' : 'none';
                }
                
                flake.className = this.options.className;
                
                // 添加到樱花对象数组
                this.flakes.push({
                    el: flake,
                    x: x,
                    y: y,
                    size: size,
                    speed: speed,
                    flipSpeed: flipSpeed,
                    flipDegree: flipDegree,
                    swingDirection: 0,
                    swingPosition: 0,
                    swingRange: swingRange,
                    swingSpeed: swingSpeed
                });
                
                // 添加到DOM
                if(this.element) {
                    this.element.appendChild(flake);
                }
            };
            
            // 更新所有樱花瓣位置
            this.updateFlakes = function() {
                if(!this.active) return;
                
                // 遍历所有花瓣
                for(let i = 0; i &lt; this.flakes.length; i++) {
                    const flake = this.flakes[i];
                    
                    // 更新位置
                    flake.y += flake.speed;
                    
                    // 左右摆动
                    flake.swingPosition += flake.swingSpeed;
                    flake.x += Math.sin(flake.swingPosition) * flake.swingRange / 10;
                    
                    // 旋转角度
                    flake.flipDegree += flake.flipSpeed;
                    
                    // 应用新位置
                    flake.el.style.top = flake.y + 'px';
                    flake.el.style.left = flake.x + 'px';
                    flake.el.style.transform = `rotate(${flake.flipDegree}deg)`;
                    
                    // 如果樱花瓣离开视窗，从DOM移除并创建新的
                    if(flake.y &gt; this.viewportHeight) {
                        this.element.removeChild(flake.el);
                        this.flakes.splice(i, 1);
                        i--;
                        
                        // 创建新的樱花瓣保持数量
                        if(this.active &amp;&amp; Math.random() &lt; 0.8) {
                            this.createFlake();
                        }
                    }
                }
                
                // 添加新的樱花瓣（基于设定的频率）
                if(this.active &amp;&amp; Math.random() * this.options.newOn &lt; 1) {
                    this.createFlake();
                }
                
                // 继续动画循环
                requestAnimationFrame(() =&gt; this.updateFlakes());
            };
            
            // 启动樱花特效
            this.start = function() {
                if(this.active) return;
                this.active = true;
                
                // 清空现有花瓣
                while(this.element.firstChild) {
                    this.element.removeChild(this.element.firstChild);
                }
                this.flakes = [];
                
                // 初始创建一批樱花瓣
                const initialCount = Math.min(50, Math.floor((this.viewportWidth * this.viewportHeight) / 15000));
                for(let i = 0; i &lt; initialCount; i++) {
                    this.createFlake();
                    
                    // 随机设置初始位置，使其分布在整个屏幕
                    const flake = this.flakes[i];
                    flake.y = Math.random() * this.viewportHeight;
                    flake.el.style.top = flake.y + 'px';
                }
                
                // 开始动画
                this.updateFlakes();
            };
            
            // 停止樱花特效
            this.stop = function() {
                this.active = false;
                
                // 渐隐现有花瓣
                const flakes = document.querySelectorAll(this.selector + ' .' + this.options.className);
                flakes.forEach(flake =&gt; {
                    flake.style.transition = 'opacity 1.5s ease-out';
                    flake.style.opacity = 0;
                    
                    // 移除已淡出的元素
                    setTimeout(() =&gt; {
                        if(flake.parentNode === this.element) {
                            this.element.removeChild(flake);
                        }
                    }, 1500);
                });
                
                // 清空数组
                this.flakes = [];
            };
        }
    &lt;/script&gt;

    &lt;script&gt;
        $(document).ready(function() {
            // 樱花特效实例
            const sakura = new Sakura('#sakura-container');
            let sakuraActive = false;
            
            // 获取用户IP
            let userIP = '';
            
            // 当前播放歌曲在历史记录中的索引
            let currentHistoryIndex = -1;
            
            // 尝试获取用户IP
            $.getJSON('https://api.ipify.org?format=json', function(data) {
                    userIP = data.ip;
                $('#user-ip').text(userIP);
                    // 获取到IP后加载历史记录
                    loadHistoryByIP(userIP);
            }).fail(function() {
                // 如果获取失败，使用备用方法或使用本地存储
                $.getJSON('https://ipapi.co/json/', function(data) {
                    userIP = data.ip;
                    $('#user-ip').text(userIP);
                    loadHistoryByIP(userIP);
                }).fail(function() {
                    // 最后的备用方法，使用随机ID作为标识
                userIP = 'user-' + Math.random().toString(36).substring(2, 15);
                $('#user-ip').text('未能获取 (使用本地存储)');
                loadHistoryByIP(userIP);
                });
            });
            
            // 基于IP的历史记录功能
            function loadHistoryByIP(ip) {
                // 使用IP作为存储键的一部分
                const storageKey = 'music_history_' + ip.replace(/\./g, '_');
                let historyData = JSON.parse(localStorage.getItem(storageKey) || '[]');
                
                if (historyData.length === 0) {
                    $('#no-history').show();
                    $('#history-list .history-item').remove(); // 清除所有历史项
                    return;
                }
                
                $('#no-history').hide();
                $('#history-list').html(''); // 清空历史列表，重新渲染
                
                historyData.forEach((item, index) =&gt; {
                    const historyItem = `
                        &lt;div class=&quot;list-group-item history-item&quot; data-index=&quot;${index}&quot;&gt;
                            &lt;img src=&quot;${item.pic}&quot; alt=&quot;${item.name}&quot;&gt;
                            &lt;div class=&quot;history-item-info&quot;&gt;
                                &lt;div class=&quot;history-item-title&quot;&gt;${item.name}&lt;/div&gt;
                                &lt;div class=&quot;history-item-artist&quot;&gt;${item.artist}&lt;/div&gt;
                                &lt;div class=&quot;history-item-quality&quot;&gt;
                                    &lt;span class=&quot;badge bg-${item.level}&quot;&gt;${getLevelName(item.level)}&lt;/span&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                            &lt;div class=&quot;history-item-actions&quot;&gt;
                                &lt;button class=&quot;btn btn-sm btn-outline-primary load-history&quot; data-index=&quot;${index}&quot;&gt;
                                    &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;16&quot; height=&quot;16&quot; fill=&quot;currentColor&quot; class=&quot;bi bi-play-fill&quot; viewBox=&quot;0 0 16 16&quot;&gt;
                                        &lt;path d=&quot;m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z&quot;/&gt;
                                    &lt;/svg&gt;
                                &lt;/button&gt;
                                &lt;button class=&quot;btn btn-sm btn-outline-danger remove-history&quot; data-index=&quot;${index}&quot;&gt;
                                    &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;16&quot; height=&quot;16&quot; fill=&quot;currentColor&quot; class=&quot;bi bi-trash&quot; viewBox=&quot;0 0 16 16&quot;&gt;
                                        &lt;path d=&quot;M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z&quot;/&gt;
                                        &lt;path d=&quot;M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z&quot;/&gt;
                                    &lt;/svg&gt;
                                &lt;/button&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    `;
                    $('#history-list').append(historyItem);
                });
                
                // 更新或添加IP相关信息
                updateStorageWithIP(userIP);
            }
            
            function updateStorageWithIP(ip) {
                localStorage.setItem('user_last_ip', ip);
                // 可以在这里添加额外的IP相关逻辑
            }
            
            // 弹窗控制逻辑 - 每隔3小时弹出一次
            function shouldShowWelcomeModal() {
                const lastPopupTime = localStorage.getItem('last_popup_time');
                const currentTime = new Date().getTime();
                const threeHoursInMs = 3 * 60 * 60 * 1000; // 3小时的毫秒数
                
                // 如果没有记录或者已经过了3小时，则显示弹窗
                if (!lastPopupTime || (currentTime - parseInt(lastPopupTime)) &gt; threeHoursInMs) {
                    localStorage.setItem('last_popup_time', currentTime.toString());
                    return true;
                }
                
                return false;
            }
            
            // 控制欢迎弹窗显示
            if (shouldShowWelcomeModal()) {
                const welcomeModal = new bootstrap.Modal(document.getElementById('welcomeModal'));
                welcomeModal.show();
            }
            
            // 历史记录功能
            let historyData = JSON.parse(localStorage.getItem('music_history') || '[]');
            // 全局APlayer实例
            let aplayer = null;
            
            // 加载历史记录
            function loadHistory() {
                if (historyData.length === 0) {
                    $('#no-history').show();
                    $('#history-list .history-item').remove(); // 清除所有历史项
                    return;
                }
                
                $('#no-history').hide();
                $('#history-list').html(''); // 清空历史列表，重新渲染
                
                historyData.forEach((item, index) =&gt; {
                    const historyItem = `
                        &lt;div class=&quot;list-group-item history-item&quot; data-index=&quot;${index}&quot;&gt;
                            &lt;img src=&quot;${item.pic}&quot; alt=&quot;${item.name}&quot;&gt;
                            &lt;div class=&quot;history-item-info&quot;&gt;
                                &lt;div class=&quot;history-item-title&quot;&gt;${item.name}&lt;/div&gt;
                                &lt;div class=&quot;history-item-artist&quot;&gt;${item.artist}&lt;/div&gt;
                                &lt;div class=&quot;history-item-quality&quot;&gt;
                                    &lt;span class=&quot;badge bg-${item.level}&quot;&gt;${getLevelName(item.level)}&lt;/span&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                            &lt;div class=&quot;history-item-actions&quot;&gt;
                                &lt;button class=&quot;btn btn-sm btn-outline-primary load-history&quot; data-index=&quot;${index}&quot;&gt;
                                    &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;16&quot; height=&quot;16&quot; fill=&quot;currentColor&quot; class=&quot;bi bi-play-fill&quot; viewBox=&quot;0 0 16 16&quot;&gt;
                                        &lt;path d=&quot;m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z&quot;/&gt;
                                    &lt;/svg&gt;
                                &lt;/button&gt;
                                &lt;button class=&quot;btn btn-sm btn-outline-danger remove-history&quot; data-index=&quot;${index}&quot;&gt;
                                    &lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;16&quot; height=&quot;16&quot; fill=&quot;currentColor&quot; class=&quot;bi bi-trash&quot; viewBox=&quot;0 0 16 16&quot;&gt;
                                        &lt;path d=&quot;M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z&quot;/&gt;
                                        &lt;path d=&quot;M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z&quot;/&gt;
                                    &lt;/svg&gt;
                                &lt;/button&gt;
                            &lt;/div&gt;
                        &lt;/div&gt;
                    `;
                    $('#history-list').append(historyItem);
                });
            }
            
            // 使用事件委托处理历史记录项的点击事件
            $('#history-list').on('click', '.load-history', function(e) {
                e.stopPropagation();
                const index = $(this).data('index');
                // 使用IP特定的存储
                const storageKey = 'music_history_' + userIP.replace(/\./g, '_');
                let historyData = JSON.parse(localStorage.getItem(storageKey) || '[]');
                const item = historyData[index];
                
                if (item.url) {
                    // 如果历史记录中已有URL，直接播放（传入索引）
                    playMusic(item, index);
                } else {
                    // 否则填充表单并触发解析
                    $('#song_ids').val(item.id);
                    $('#level').val(item.level);
                    $('#query-form').submit();
                }
            });
            
            // 使用事件委托处理删除按钮的点击事件
            $('#history-list').on('click', '.remove-history', function(e) {
                e.stopPropagation();
                e.preventDefault();
                const index = $(this).data('index');
                
                // 获取IP特定的历史数据
                const storageKey = 'music_history_' + userIP.replace(/\./g, '_');
                let historyData = JSON.parse(localStorage.getItem(storageKey) || '[]');
                
                // 立即从DOM中移除元素，提供即时反馈
                $(this).closest('.history-item').fadeOut(200, function() {
                    // 从数据中删除，并更新存储
                    historyData.splice(index, 1);
                    localStorage.setItem(storageKey, JSON.stringify(historyData));
                    
                    // 完成动画后重新加载整个列表，确保索引正确
                    loadHistoryByIP(userIP);
                });
            });
            
            // 清空历史记录
            $('#clear-history').on('click', function() {
                if (confirm('确定要清空所有历史记录吗？')) {
                    // 添加动画效果
                    $('#history-list .history-item').fadeOut(300, function() {
                        // 清空IP特定的历史数据
                        const storageKey = 'music_history_' + userIP.replace(/\./g, '_');
                        localStorage.setItem(storageKey, JSON.stringify([]));
                        loadHistoryByIP(userIP);
                    });
                }
            });
            
            // 侧边栏控制
            $('#toggle-history').on('click', function() {
                $('#history-sidebar').toggleClass('active');
            });
            
            $('#close-history').on('click', function() {
                $('#history-sidebar').removeClass('active');
            });
            
            // 樱花特效控制
            $('#toggle-sakura').on('click', function() {
                if (sakuraActive) {
                    sakura.stop();
                    sakuraActive = false;
                    $(this).removeClass('active');
                } else {
                    sakura.start();
                    sakuraActive = true;
                    $(this).addClass('active');
                }
            });
            
            // 检查是否启用了樱花特效
            const sakuraEnabled = localStorage.getItem('sakura_enabled') === 'true';
            if (sakuraEnabled) {
                sakura.start();
                sakuraActive = true;
                $('#toggle-sakura').addClass('active');
            }
            
            // 保存樱花特效状态
            $('#toggle-sakura').on('click', function() {
                localStorage.setItem('sakura_enabled', sakuraActive ? 'true' : 'false');
            });
            
            // 转换音质代码为易读的文本
            function getLevelName(level) {
                const levelMap = {
                    'standard': '标准音质',
                    'exhigh': '极高音质',
                    'lossless': '无损音质',
                    'hires': 'Hi-Res音质',
                    'sky': '沉浸环绕声',
                    'jyeffect': '高清环绕声',
                    'jymaster': '超清母带'
                };
                
                return levelMap[level] || level;
            }
            
            function lrctrim(lyrics) {
                if (!lyrics || typeof lyrics !== 'string') {
                    return [];
                }
                
                try {
                    const lines = lyrics.split('\n');
                    const data = [];
                    
                    // 正则表达式匹配时间标签 [xx:xx.xx] 或 [xx:xx:xx]
                    const timeRegex = /\[(\d{2}):(\d{2})[\.:](\d{2,3})\]/;

                    lines.forEach((line, index) =&gt; {
                        // 支持多时间标签的情况
                        const allTimeMatches = line.match(/\[\d{2}:\d{2}[\.:](\d{2,3})?\]/g);
                        if (allTimeMatches) {
                            // 提取歌词文本，去除所有时间标签
                            let text = line.replace(/\[\d{2}:\d{2}[\.:](\d{2,3})?\]/g, '').trim();
                            text = text.replace(/\s\s+/g, ' '); // 替换多个空格为单个空格
                            
                            // 处理每个时间标签
                            allTimeMatches.forEach(timeTag =&gt; {
                                const matches = timeTag.match(timeRegex);
                                if (matches) {
                                    const minutes = parseInt(matches[1], 10);
                                    // 处理秒和毫秒，确保正确转换为毫秒
                                    let seconds = 0;
                                    let milliseconds = 0;
                                    
                                    if (matches[3].length === 2) {
                                        // [xx:xx:xx] 格式
                                        seconds = parseInt(matches[2], 10);
                                        milliseconds = parseInt(matches[3], 10) * 10;
                                    } else if (matches[3].length === 3) {
                                        // [xx:xx.xxx] 格式
                                        seconds = parseInt(matches[2], 10);
                                        milliseconds = parseInt(matches[3], 10);
                                    } else {
                                        seconds = parseFloat(matches[2]);
                                        milliseconds = 0;
                                    }
                                    
                                    const timestamp = minutes * 60000 + seconds * 1000 + milliseconds;
                                    
                                    // 只有当文本不为空时才添加到数据中
                                    if (text) {
                                        data.push([timestamp, index, text]);
                                    }
                                }
                            });
                        }
                    });

                    // 根据时间戳排序
                    data.sort((a, b) =&gt; a[0] - b[0]);
                    
                    return data;
                } catch (e) {
                    console.error('歌词处理出错:', e);
                    return [];
                }
            }

            function lrctran(lyric, tlyric) {
                if (!lyric || !tlyric) {
                    return lyric || &quot;&quot;;
                }
                
                try {
                    let lrcData = lrctrim(lyric);
                    let transData = lrctrim(tlyric);
                    
                    if (lrcData.length === 0) {
                        return lyric; // 如果解析失败，返回原始歌词
                    }

                    const len1 = lrcData.length;
                    const len2 = transData.length;
                    let result = &quot;&quot;;
                    
                    // 匹配原文和翻译
                    for (let i = 0, j = 0; i &lt; len1 &amp;&amp; j &lt; len2; i++) {
                        const currentTime = lrcData[i][0];
                        
                        // 查找时间戳最接近的翻译
                        while (j + 1 &lt; len2 &amp;&amp; Math.abs(transData[j+1][0] - currentTime) &lt; Math.abs(transData[j][0] - currentTime)) {
                            j++;
                        }
                        
                        // 判断时间戳是否接近（允许100ms的误差）
                        if (Math.abs(lrcData[i][0] - transData[j][0]) &lt; 100) {
                            let transText = transData[j][2].replace('/', '').trim();
                            if (transText) {
                                lrcData[i][2] += ` 「${transText}」`;
                            }
                        }
                    }
                    
                    // 生成LRC格式的歌词
                    for (let i = 0; i &lt; len1; i++) {
                        const t = lrcData[i][0];
                        const minutes = String(Math.floor(t / 60000)).padStart(2, '0');
                        const seconds = String(Math.floor((t % 60000) / 1000)).padStart(2, '0');
                        const ms = String(t % 1000).padStart(3, '0');
                        
                        result += `[${minutes}:${seconds}.${ms}]${lrcData[i][2]}\n`;
                    }
                    
                    return result;
                } catch (e) {
                    console.error('歌词翻译处理出错:', e);
                    return lyric; // 出错时返回原始歌词
                }
            }

            function extractLinks(text) {
                var regex = /https?:\/\/\S+/g;
                var matches = text.match(regex);
                if (matches) {
                    return matches[0];
                } else {
                    return '';
                }
            }
    
            function checkValidLink(link) {
                if (link.indexOf(&quot;http&quot;) === -1 || 
                    (link.indexOf(&quot;music.163.com&quot;) === -1 &amp;&amp; link.indexOf(&quot;163cn.tv&quot;) === -1)) {
                    return false;
                }
                return true;
            }
    
            function extractAndCheckId(text) {
                var link = extractLinks(text);
                if (checkValidLink(link)) {
                    return link;
                } else {
                    var idRegex = /\b\d+\b/g;
                    var ids = text.match(idRegex);
                    if (ids &amp;&amp; ids.length &gt; 0) {
                        return ids[0];
                    }
                    return '';
                }
            }

            // 播放音乐函数
            function playMusic(songData, historyIndex = -1) {
                // 更新当前播放索引
                currentHistoryIndex = historyIndex;
                
                // 显示歌曲信息
                $('#song_name').text(songData.name);
                $('#song_pic').attr('src', songData.pic);
                $('#artist_names').text(songData.artist);
                $('#song_alname').text(songData.album || '');
                $('#song_level').text(getLevelName(songData.level) || '');
                $('#song_size').text(songData.size || '');
                $('#song_url').attr('href', songData.url);
                
                // 处理歌词，确保编码正确
                let processedLyrics = '';
                if (songData.lyrics) {
                    try {
                        // 确保歌词文本编码正确
                        processedLyrics = decodeURIComponent(encodeURIComponent(songData.lyrics));
                        $('#lyric').html(processedLyrics.replace(/\n/g, '&lt;br&gt;'));
                        } catch (e) {
                        // 如果解码失败，则使用原始歌词
                        $('#lyric').html(songData.lyrics.replace(/\n/g, '&lt;br&gt;'));
                        processedLyrics = songData.lyrics;
                        console.log('歌词解码失败:', e);
                    }
                } else {
                    $('#lyric').html('&lt;div class=&quot;text-center text-muted py-3&quot;&gt;暂无歌词&lt;/div&gt;');
                }
                
                // 设置下载按钮的点击事件
                $('#download_btn').off('click').on('click', function() {
                    // 复制URL到剪贴板
                    navigator.clipboard.writeText(songData.url)
                        .then(() =&gt; {
                            // 更新复制弹窗内容
                            $('#copy-song-name').text(songData.name);
                            $('#copy-song-size').text(songData.size || '未知');
                            $('#copy-song-quality').text(getLevelName(songData.level) || '标准音质');
                            $('#copy-song-url').text(songData.url);
                            $('#browser-download-btn').attr('href', songData.url);
                            
                            // 显示复制成功弹窗
                            const copyModal = new bootstrap.Modal(document.getElementById('copyModal'));
                            copyModal.show();
                            
                            // 暂时修改按钮文字提供反馈
                            const originalText = $(this).text();
                            $(this).text('复制成功！').addClass('btn-success').removeClass('btn-outline-primary');
                            setTimeout(() =&gt; {
                                $(this).text(originalText).removeClass('btn-success').addClass('btn-outline-primary');
                            }, 2000);
                        })
                        .catch(err =&gt; {
                            console.error('复制失败:', err);
                            alert('复制失败，请手动复制链接');
                        });
                });
                
                // 销毁旧的播放器
                if (aplayer) {
                    aplayer.destroy();
                }
                
                // 自定义主题色，与网站整体风格一致
                const aplayerTheme = '#ff8db4'; // 使用网站主色调
                
                // 初始化新的播放器
                aplayer = new APlayer({
                    container: document.getElementById('aplayer'),
                    fixed: false, // 不使用全局固定模式，而是嵌入到页面中
                    lrcType: 1, // 歌词模式
                    audio: [{
                        name: songData.name,
                        artist: songData.artist,
                        url: songData.url,
                        cover: songData.pic,
                        lrc: processedLyrics || '',
                        theme: aplayerTheme
                    }],
                    theme: aplayerTheme,
                    preload: 'auto',
                    volume: 0.7,
                    mutex: true, // 互斥模式，防止多个播放器同时播放
                    listFolded: false, // 播放列表默认展开
                    listMaxHeight: '200px', // 播放列表最大高度
                    order: 'list', // 顺序播放模式
                    mini: false // 非迷你模式
                });
                
                // 应用自定义样式到播放器
                customizeAplayer();
                
                // 显示歌曲信息区
                $('#song-info').removeClass('d-none');
                
                // 更新控制按钮状态
                updatePlaybackControls();
                
                // 自动播放
                setTimeout(() =&gt; {
                    aplayer.play();
                    $('#play-pause i').removeClass('fa-play').addClass('fa-pause');
                }, 300);
            }
            
            // 更新播放控制按钮状态
            function updatePlaybackControls() {
                // 更新APlayer内部的上一首/下一首按钮状态
                updateAplayerControlButtons();
            }
            
            // 播放上一首歌
            function playPreviousSong() {
                // 获取IP特定的历史数据
                const storageKey = 'music_history_' + userIP.replace(/\./g, '_');
                let historyData = JSON.parse(localStorage.getItem(storageKey) || '[]');
                
                // 如果没有历史或只有一首歌，返回
                if (historyData.length &lt;= 1 || currentHistoryIndex &lt;= 0) {
                    return;
                }
                
                // 播放上一首歌
                const prevIndex = currentHistoryIndex - 1;
                playMusic(historyData[prevIndex], prevIndex);
            }
            
            // 播放下一首歌
            function playNextSong() {
                // 获取IP特定的历史数据
                const storageKey = 'music_history_' + userIP.replace(/\./g, '_');
                let historyData = JSON.parse(localStorage.getItem(storageKey) || '[]');
                
                // 如果没有历史记录或已是最后一首，返回
                if (historyData.length &lt;= 1 || currentHistoryIndex &gt;= historyData.length - 1 || currentHistoryIndex &lt; 0) {
                    return;
                }
                
                // 播放下一首歌
                const nextIndex = currentHistoryIndex + 1;
                playMusic(historyData[nextIndex], nextIndex);
            }
            
            // 播放/暂停切换
            function togglePlayPause() {
                if (!aplayer) return;
                
                if (aplayer.audio.paused) {
                    aplayer.play();
                    $('#play-pause i').removeClass('fa-play').addClass('fa-pause');
                } else {
                    aplayer.pause();
                    $('#play-pause i').removeClass('fa-pause').addClass('fa-play');
                }
            }
            
            // 绑定播放控制按钮事件
            $('#prev-song').on('click', function() {
                if (!$(this).hasClass('disabled')) {
                    playPreviousSong();
                }
            });
            
            $('#next-song').on('click', function() {
                if (!$(this).hasClass('disabled')) {
                    playNextSong();
                }
            });
            
            $('#play-pause').on('click', function() {
                togglePlayPause();
            });
            
            // 监听播放状态变化，更新播放/暂停按钮
            $(document).on('play', function() {
                $('#play-pause i').removeClass('fa-play').addClass('fa-pause');
            });
            
            $(document).on('pause', function() {
                $('#play-pause i').removeClass('fa-pause').addClass('fa-play');
            });

            // 自定义播放器样式
            function customizeAplayer() {
                // 确保播放器已初始化
                if (!aplayer) return;
                
                // 为播放器添加自定义样式
                const aplayerElement = document.querySelector('.aplayer');
                if (aplayerElement) {
                    // 添加现代化效果
                    aplayerElement.style.borderRadius = '16px';
                    aplayerElement.style.overflow = 'visible'; // 改为visible以便显示溢出内容
                    aplayerElement.style.boxShadow = '0 10px 30px rgba(0, 0, 0, 0.05)';
                    aplayerElement.style.border = '1px solid rgba(255, 255, 255, 0.3)';
                    aplayerElement.style.backdropFilter = 'blur(12px)';
                    aplayerElement.style.webkitBackdropFilter = 'blur(12px)';
                    aplayerElement.style.background = 'rgba(255, 255, 255, 0.7)';
                    aplayerElement.style.position = 'relative';
                    aplayerElement.style.minHeight = '120px';
                    aplayerElement.style.paddingBottom = '15px';
                    
                    // 播放器内部元素样式调整
                    const aplayerInfo = aplayerElement.querySelector('.aplayer-info');
                    if (aplayerInfo) {
                        aplayerInfo.style.padding = '16px';
                    }
                    
                    // 进度条样式调整
                    const progressBar = aplayerElement.querySelector('.aplayer-bar-wrap');
                    if (progressBar) {
                        progressBar.style.marginTop = '8px';
                        progressBar.style.marginBottom = '8px';
                    }
                    
                    // 控制器区域样式优化
                    const controller = aplayerElement.querySelector('.aplayer-controller');
                    if (controller) {
                        controller.style.minHeight = '45px';
                        controller.style.position = 'relative';
                        controller.style.display = 'flex';
                        controller.style.alignItems = 'center';
                        controller.style.marginBottom = '5px';
                        controller.style.padding = '0 10px';
                    }
                    
                    // 修复音量控制样式
                    const volumeControl = aplayerElement.querySelector('.aplayer-volume-wrap');
                    if (volumeControl) {
                        volumeControl.style.position = 'relative';
                        volumeControl.style.zIndex = '100';
                        
                        const volumeBarWrap = volumeControl.querySelector('.aplayer-volume-bar-wrap');
                        if (volumeBarWrap) {
                            volumeBarWrap.style.position = 'absolute';
                            volumeBarWrap.style.bottom = '12px';
                            volumeBarWrap.style.right = '0';
                            volumeBarWrap.style.width = '25px';
                            volumeBarWrap.style.height = '120px';
                            volumeBarWrap.style.backgroundColor = 'rgba(255, 255, 255, 0.95)';
                            volumeBarWrap.style.borderRadius = '10px';
                            volumeBarWrap.style.boxShadow = '0 0 15px rgba(0, 0, 0, 0.1)';
                            volumeBarWrap.style.zIndex = '100';
                            volumeBarWrap.style.transformOrigin = 'bottom center';
                            volumeBarWrap.style.padding = '10px 0';
                            
                            const volumeBar = volumeBarWrap.querySelector('.aplayer-volume-bar');
                            if (volumeBar) {
                                volumeBar.style.position = 'absolute';
                                volumeBar.style.width = '8px';
                                volumeBar.style.height = '100px';
                                volumeBar.style.left = '50%';
                                volumeBar.style.transform = 'translateX(-50%)';
                                volumeBar.style.bottom = '10px';
                                volumeBar.style.background = 'rgba(0, 0, 0, 0.05)';
                                volumeBar.style.borderRadius = '4px';
                            }
                        }
                    }
                    
                    // 移除页面上之前创建的控制区域（如果存在）
                    const existingControlArea = document.querySelector('.center-control-area');
                    if (existingControlArea) {
                        existingControlArea.remove();
                    }
                    
                    // 先清理可能存在的旧按钮
                    const oldPrevBtn = document.getElementById('aplayer-prev');
                    const oldNextBtn = document.getElementById('aplayer-next');
                    const oldPlayPauseBtn = document.getElementById('center-play-pause');
                    if (oldPrevBtn) oldPrevBtn.remove();
                    if (oldNextBtn) oldNextBtn.remove();
                    if (oldPlayPauseBtn) oldPlayPauseBtn.remove();
                    
                    // 找到原始播放按钮区域（时间控制区）
                    const timeArea = aplayerElement.querySelector('.aplayer-time');
                    if (timeArea) {
                        // 获取原始播放按钮
                        const originalPlayBtn = timeArea.querySelector('.aplayer-icon-play');
                        
                        if (originalPlayBtn) {
                            // 保存原始播放按钮的父元素，用于后续定位
                            const playBtnParent = originalPlayBtn.parentElement;
                            
                            // 隐藏原始播放按钮，但不移除，保留其功能
                            originalPlayBtn.style.display = 'none';
                            
                            // 创建新的按钮组容器
                            const btnContainer = document.createElement('div');
                            btnContainer.className = 'aplayer-nav-btns';
                            btnContainer.style.display = 'flex';
                            btnContainer.style.alignItems = 'center';
                            btnContainer.style.justifyContent = 'center';
                            btnContainer.style.margin = '0 5px';
                            
                            // 创建上一首按钮
                            const prevBtn = document.createElement('button');
                            prevBtn.className = 'aplayer-icon';
                            prevBtn.id = 'aplayer-prev';
                            prevBtn.innerHTML = '&lt;svg viewBox=&quot;0 0 24 24&quot; width=&quot;22&quot; height=&quot;22&quot;&gt;&lt;path fill=&quot;currentColor&quot; d=&quot;M8,5.14V19.14L19,12.14L8,5.14Z&quot; transform=&quot;rotate(180 13.5 12)&quot;&gt;&lt;/path&gt;&lt;path fill=&quot;currentColor&quot; d=&quot;M5,5.14V19.14&quot; transform=&quot;rotate(180 5 12)&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;/path&gt;&lt;/svg&gt;';
                            prevBtn.style.width = '30px';
                            prevBtn.style.height = '30px';
                            prevBtn.style.border = 'none';
                            prevBtn.style.background = 'transparent';
                            prevBtn.style.display = 'flex';
                            prevBtn.style.alignItems = 'center';
                            prevBtn.style.justifyContent = 'center';
                            prevBtn.style.cursor = 'pointer';
                            prevBtn.style.borderRadius = '50%';
                            prevBtn.style.transition = 'all 0.2s ease';
                            prevBtn.style.color = 'var(--text-primary)';
                            prevBtn.style.padding = '0';
                            prevBtn.style.margin = '0 2px';
                            
                            // 创建播放/暂停按钮
                            const playPauseBtn = document.createElement('button');
                            playPauseBtn.className = 'aplayer-icon';
                            playPauseBtn.id = 'center-play-pause';
                            
                            // 根据当前播放状态设置图标
                            if (aplayer.audio.paused) {
                                playPauseBtn.innerHTML = '&lt;svg viewBox=&quot;0 0 24 24&quot; width=&quot;22&quot; height=&quot;22&quot;&gt;&lt;path fill=&quot;currentColor&quot; d=&quot;M8,5.14V19.14L19,12.14L8,5.14Z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;';
                            } else {
                                playPauseBtn.innerHTML = '&lt;svg viewBox=&quot;0 0 24 24&quot; width=&quot;22&quot; height=&quot;22&quot;&gt;&lt;path fill=&quot;currentColor&quot; d=&quot;M14,19H18V5H14M6,19H10V5H6V19Z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;';
                            }
                            
                            playPauseBtn.style.width = '30px';
                            playPauseBtn.style.height = '30px';
                            playPauseBtn.style.border = 'none';
                            playPauseBtn.style.background = 'transparent';
                            playPauseBtn.style.display = 'flex';
                            playPauseBtn.style.alignItems = 'center';
                            playPauseBtn.style.justifyContent = 'center';
                            playPauseBtn.style.cursor = 'pointer';
                            playPauseBtn.style.borderRadius = '50%';
                            playPauseBtn.style.transition = 'all 0.2s ease';
                            playPauseBtn.style.color = 'var(--text-primary)';
                            playPauseBtn.style.padding = '0';
                            playPauseBtn.style.margin = '0 3px';
                            
                            // 创建下一首按钮
                            const nextBtn = document.createElement('button');
                            nextBtn.className = 'aplayer-icon';
                            nextBtn.id = 'aplayer-next';
                            nextBtn.innerHTML = '&lt;svg viewBox=&quot;0 0 24 24&quot; width=&quot;22&quot; height=&quot;22&quot;&gt;&lt;path fill=&quot;currentColor&quot; d=&quot;M8,5.14V19.14L19,12.14L8,5.14Z&quot;&gt;&lt;/path&gt;&lt;path fill=&quot;currentColor&quot; d=&quot;M5,5.14V19.14&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot;&gt;&lt;/path&gt;&lt;/svg&gt;';
                            nextBtn.style.width = '30px';
                            nextBtn.style.height = '30px';
                            nextBtn.style.border = 'none';
                            nextBtn.style.background = 'transparent';
                            nextBtn.style.display = 'flex';
                            nextBtn.style.alignItems = 'center';
                            nextBtn.style.justifyContent = 'center';
                            nextBtn.style.cursor = 'pointer';
                            nextBtn.style.borderRadius = '50%';
                            nextBtn.style.transition = 'all 0.2s ease';
                            nextBtn.style.color = 'var(--text-primary)';
                            nextBtn.style.padding = '0';
                            nextBtn.style.margin = '0 2px';
                            
                            // 将按钮添加到容器
                            btnContainer.appendChild(prevBtn);
                            btnContainer.appendChild(playPauseBtn);
                            btnContainer.appendChild(nextBtn);
                            
                            // 将按钮组插入到原播放按钮的位置
                            playBtnParent.insertBefore(btnContainer, originalPlayBtn);
                            
                            // 添加按钮事件
                            prevBtn.addEventListener('click', function(e) {
                                e.stopPropagation(); // 阻止事件冒泡
                                playPreviousSong();
                            });
                            
                            playPauseBtn.addEventListener('click', function(e) {
                                e.stopPropagation(); // 阻止事件冒泡
                                if (aplayer.audio.paused) {
                                    aplayer.play();
                                } else {
                                    aplayer.pause();
                                }
                            });
                            
                            nextBtn.addEventListener('click', function(e) {
                                e.stopPropagation(); // 阻止事件冒泡
                                playNextSong();
                            });
                            
                            // 监听播放状态变化
                            aplayer.on('play', function() {
                                playPauseBtn.innerHTML = '&lt;svg viewBox=&quot;0 0 24 24&quot; width=&quot;22&quot; height=&quot;22&quot;&gt;&lt;path fill=&quot;currentColor&quot; d=&quot;M14,19H18V5H14M6,19H10V5H6V19Z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;';
                            });
                            
                            aplayer.on('pause', function() {
                                playPauseBtn.innerHTML = '&lt;svg viewBox=&quot;0 0 24 24&quot; width=&quot;22&quot; height=&quot;22&quot;&gt;&lt;path fill=&quot;currentColor&quot; d=&quot;M8,5.14V19.14L19,12.14L8,5.14Z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;';
                            });
                            
                            // 悬停效果
                            [prevBtn, playPauseBtn, nextBtn].forEach(btn =&gt; {
                                btn.addEventListener('mouseenter', () =&gt; {
                                    btn.style.transform = 'scale(1.1)';
                                    btn.style.background = 'rgba(255, 255, 255, 0.2)';
                                    btn.style.color = 'var(--primary-color)';
                                });
                                
                                btn.addEventListener('mouseleave', () =&gt; {
                                    btn.style.transform = 'scale(1)';
                                    btn.style.background = 'transparent';
                                    btn.style.color = 'var(--text-primary)';
                                });
                            });
                            
                            
                            // 更新按钮状态
                            setTimeout(() =&gt; {
                                updateAplayerControlButtons();
                            }, 100);
                        }
                    }
                    
                    // 统一其他按钮样式
                    const controlBtns = aplayerElement.querySelectorAll('.aplayer-icon:not(#aplayer-prev):not(#aplayer-next):not(#center-play-pause)');
                    controlBtns.forEach(btn =&gt; {
                        btn.style.transition = 'all 0.2s ease';
                        btn.style.borderRadius = '50%';
                        btn.style.margin = '0 5px';
                        
                        // 悬停效果
                        btn.addEventListener('mouseenter', () =&gt; {
                            btn.style.transform = 'scale(1.15)';
                            btn.style.color = 'var(--primary-color)';
                            btn.style.backgroundColor = 'rgba(255, 141, 180, 0.1)';
                        });
                        
                        btn.addEventListener('mouseleave', () =&gt; {
                            btn.style.transform = 'scale(1)';
                            btn.style.backgroundColor = 'transparent';
                        });
                    });
                    
                    // 为播放器添加悬停效果
                    aplayerElement.addEventListener('mouseenter', () =&gt; {
                        aplayerElement.style.transform = 'translateY(-5px)';
                        aplayerElement.style.boxShadow = '0 15px 35px rgba(0, 0, 0, 0.1), 0 0 15px rgba(255, 141, 180, 0.5)';
                    });
                    
                    aplayerElement.addEventListener('mouseleave', () =&gt; {
                        aplayerElement.style.transform = 'translateY(0)';
                        aplayerElement.style.boxShadow = '0 10px 30px rgba(0, 0, 0, 0.05)';
                    });
                    
                    // 设置转场动画
                    aplayerElement.style.transition = 'all 0.3s ease';
                }
                
                // 修复音量控制显示问题 - 添加额外事件监听
                document.addEventListener('click', function(e) {
                    const volumeBtn = document.querySelector('.aplayer-volume');
                    if (volumeBtn &amp;&amp; volumeBtn.contains(e.target)) {
                        const volumeBarWrap = document.querySelector('.aplayer-volume-bar-wrap');
                        if (volumeBarWrap) {
                            // 切换显示状态
                            if (volumeBarWrap.style.display === 'block') {
                                volumeBarWrap.style.display = 'none';
                        } else {
                                volumeBarWrap.style.display = 'block';
                            }
                            e.stopPropagation();
                        }
                        } else {
                        // 点击其他区域时隐藏音量条
                        const volumeBarWrap = document.querySelector('.aplayer-volume-bar-wrap');
                        if (volumeBarWrap) {
                            volumeBarWrap.style.display = 'none';
                        }
                    }
                });
            }

            // 更新播放器按钮状态
            function updateAplayerControlButtons() {
                // 获取IP特定的历史数据
                const storageKey = 'music_history_' + userIP.replace(/\./g, '_');
                let historyData = JSON.parse(localStorage.getItem(storageKey) || '[]');
                
                // 获取按钮元素
                const prevBtn = document.getElementById('aplayer-prev');
                const nextBtn = document.getElementById('aplayer-next');
                
                if (!prevBtn || !nextBtn) return;
                
                // 检查历史记录长度
                if (historyData.length &lt;= 1) {
                    // 如果只有一首歌或没有歌，禁用上一首/下一首按钮
                    prevBtn.style.opacity = '0.5';
                    prevBtn.style.cursor = 'not-allowed';
                    nextBtn.style.opacity = '0.5';
                    nextBtn.style.cursor = 'not-allowed';
                } else {
                    // 根据当前索引位置更新按钮状态
                    prevBtn.style.opacity = currentHistoryIndex &lt;= 0 ? '0.5' : '1';
                    prevBtn.style.cursor = currentHistoryIndex &lt;= 0 ? 'not-allowed' : 'pointer';
                    
                    nextBtn.style.opacity = (currentHistoryIndex &gt;= historyData.length - 1 || currentHistoryIndex &lt; 0) ? '0.5' : '1';
                    nextBtn.style.cursor = (currentHistoryIndex &gt;= historyData.length - 1 || currentHistoryIndex &lt; 0) ? 'not-allowed' : 'pointer';
            }
        }

            $('#query-form').on('submit', function(event) {
                event.preventDefault();

                const songIds = $('#song_ids').val();
                const level = $('#level').val();
                const validId = extractAndCheckId(songIds);

                if (!validId) {
                    alert('请输入有效的歌曲ID或链接');
                    return;
                }

                $.post('https://api.kxzjoker.cn/api/163_music', { 
                    url: validId,
                    level: level,
                    type:'json' 
                }, function(data) {
                    if (data.status === 200) {
                        // 数据预处理，确保字符编码正确
                        try {
                            // 处理歌曲信息
                            const name = data.name || '未知歌曲';
                            const artist = data.ar_name || '未知艺术家';
                            const album = data.al_name || '未知专辑';
                            
                            // 处理歌词
                            let originalLyric = data.lyric || '';
                            let translatedLyric = data.tlyric || '';
                            
                            // 检测并修复可能的乱码
                            if (originalLyric &amp;&amp; containsGarbledText(originalLyric)) {
                                originalLyric = fixGarbledText(originalLyric);
                            }
                            
                            if (translatedLyric &amp;&amp; containsGarbledText(translatedLyric)) {
                                translatedLyric = fixGarbledText(translatedLyric);
                            }
                            
                            // 处理歌词，优先使用翻译版本
                            let processedLyrics = translatedLyric ? 
                                lrctran(originalLyric, translatedLyric) : originalLyric;
                            
                            // 创建歌曲数据对象
                            const songData = {
                                id: validId,
                                level: level,
                                name: name,
                                artist: artist,
                                album: album,
                                pic: data.pic,
                                url: data.url,
                                size: data.size,
                                lyrics: processedLyrics
                            };
                            
                            // 添加到IP特定的历史记录
                    const storageKey = 'music_history_' + userIP.replace(/\./g, '_');
                    let historyData = JSON.parse(localStorage.getItem(storageKey) || '[]');
                    
                            const existingIndex = historyData.findIndex(item =&gt; item.id === validId);
                    if (existingIndex !== -1) {
                                // 如果历史记录中已存在，先删除旧记录
                        historyData.splice(existingIndex, 1);
                    }
                    
                            // 添加新记录到最前面，包含完整信息
                            historyData.unshift(songData);
                            
                            // 限制历史记录数量为10条
                            if (historyData.length &gt; 10) {
                                historyData = historyData.slice(0, 10);
                            }
                            
                    localStorage.setItem(storageKey, JSON.stringify(historyData));
                            loadHistoryByIP(userIP); // 刷新历史记录显示
                            
                            // 播放歌曲，设置当前索引为0（历史记录的第一项）
                            playMusic(songData, 0);
                        } catch (e) {
                            console.error('解析数据时出错:', e);
                            alert('解析数据时出错: ' + e.message);
                        }
                    } else {
                        alert('解析失败：' + data.msg);
                    }
                }, 'json').fail(function(xhr, status, error) {
                    console.error('API请求失败:', error);
                    alert('网络请求失败，请检查您的网络连接或稍后再试');
                    });
                });
                    
            // 检测文本是否包含乱码
            function containsGarbledText(text) {
                // 检查是否包含常见的乱码特征
                const garbledPatterns = [
                    /\ufffd/g,                // 替换字符
                    /[\uFFFD\uFFFE\uFFFF]/g,  // Unicode 替换字符
                    /[\u0000-\u0008\u000B-\u000C\u000E-\u001F]/g  // 控制字符
                ];
                
                for (let pattern of garbledPatterns) {
                    if (pattern.test(text)) {
                        return true;
                    }
                }
                
                return false;
            }
            
            // 尝试修复乱码文本
            function fixGarbledText(text) {
                try {
                    // 尝试不同的编码转换方法
                    
                    // 方法1: UTF-8转码再解码
                    let fixed = decodeURIComponent(encodeURIComponent(text));
                    if (!containsGarbledText(fixed)) {
                        return fixed;
                    }
                    
                    // 方法2: 使用TextEncoder/TextDecoder (如果浏览器支持)
                    if (window.TextEncoder &amp;&amp; window.TextDecoder) {
                        const encoder = new TextEncoder();
                        const decoder = new TextDecoder('utf-8', { fatal: false });
                        const bytes = encoder.encode(text);
                        fixed = decoder.decode(bytes);
                        if (!containsGarbledText(fixed)) {
                            return fixed;
                        }
                    }
                    
                    // 如果都失败，返回原始文本
                    return text;
                } catch (e) {
                    console.error('修复乱码失败:', e);
                    return text;
                }
            }
        });
    &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</pre>