<?php
// Parse the provided HTML snippet to extract song data
$songData = [
    [
        "name" => "一場遊戲一場夢",
        "duration" => "PT0M256S",
        "url" => "https://archive.org/download/wang-jies-32-famous-songs/01.%20%E4%B8%80%E5%A0%B4%E9%81%8A%E6%88%B2%E4%B8%80%E5%A0%B4%E5%A4%A2.mp3"
    ],
    [
        "name" => "忘了你,忘了我",
        "duration" => "PT0M281S",
        "url" => "https://archive.org/download/wang-jies-32-famous-songs/02.%20%E5%BF%98%E4%BA%86%E4%BD%A0-%E5%BF%98%E4%BA%86%E6%88%91.mp3"
    ],
    [
        "name" => "惦念這一些",
        "duration" => "PT0M266S",
        "url" => "https://archive.org/download/wang-jies-32-famous-songs/03.%20%E6%83%A6%E5%BF%B5%E9%80%99%E4%B8%80%E4%BA%9B.mp3"
    ],
    [
        "name" => "安妮",
        "duration" => "PT0M254S",
        "url" => "https://archive.org/download/wang-jies-32-famous-songs/04.%20%E5%AE%89%E5%A6%AE.mp3"
    ],
    [
        "name" => "是否我真的一無所有",
        "duration" => "PT0M268S",
        "url" => "https://archive.org/download/wang-jies-32-famous-songs/05.%20%E6%98%AF%E5%90%A6%E6%88%91%E7%9C%9F%E7%9A%84%E4%B8%80%E7%84%A1%E6%89%80%E6%9C%89.mp3"
    ],
    [
        "name" => "你是我胸口永遠的痛",
        "duration" => "PT0M310S",
        "url" => "https://archive.org/download/wang-jies-32-famous-songs/06.%20%E4%BD%A0%E6%98%AF%E6%88%91%E8%83%B8%E5%8F%A3%E6%B0%B8%E9%81%A0%E7%9A%84%E7%97%9B.mp3"
    ],
    [
        "name" => "少年的心",
        "duration" => "PT0M251S",
        "url" => "https://archive.org/download/wang-jies-32-famous-songs/07.%20%E5%B0%91%E5%B9%B4%E7%9A%84%E5%BF%83.mp3"
    ],
    [
        "name" => "讓我永遠愛你",
        "duration" => "PT0M281S",
        "url" => "https://archive.org/download/wang-jies-32-famous-songs/08.%20%E8%AE%93%E6%88%91%E6%B0%B8%E9%81%A0%E6%84%9B%E4%BD%A0.mp3"
    ],
    [
        "name" => "愛你像愛我自己",
        "duration" => "PT0M233S",
        "url" => "https://archive.org/download/wang-jies-32-famous-songs/09.%20%E6%84%9B%E4%BD%A0%E5%83%8F%E6%84%9B%E6%88%91%E8%87%AA%E5%B7%B1.mp3"
    ],
    [
        "name" => "祈禱",
        "duration" => "PT0M226S",
        "url" => "https://archive.org/download/wang-jies-32-famous-songs/10.%20%E7%A5%88%E7%A6%B1.mp3"
    ],
    [
        "name" => "心痛",
        "duration" => "PT0M234S",
        "url" => "https://archive.org/download/wang-jies-32-famous-songs/11.%20%E5%BF%83%E7%97%9B.mp3"
    ],
    [
        "name" => "她的背影",
        "duration" => "PT0M303S",
        "url" => "https://archive.org/download/wang-jies-32-famous-songs/12.%20%E5%A5%B9%E7%9A%84%E8%83%8C%E5%BD%B1.mp3"
    ],
    [
        "name" => "夢醒的我VS蘇芮",
        "duration" => "PT0M226S",
        "url" => "https://archive.org/download/wang-jies-32-famous-songs/13.%20%E5%A4%A2%E9%86%92%E7%9A%84%E6%88%91VS%E8%98%87%E8%8A%AE.mp3"
    ],
    [
        "name" => "為了愛,夢一生",
        "duration" => "PT0M280S",
        "url" => "https://archive.org/download/wang-jies-32-famous-songs/14.%20%E7%82%BA%E4%BA%86%E6%84%9B%EF%BC%8C%E5%A4%A2%E4%B8%80%E7%94%9F.mp3"
    ],
    [
        "name" => "你的名字寫滿在我心裹",
        "duration" => "PT0M235S",
        "url" => "https://archive.org/download/wang-jies-32-famous-songs/15.%20%E4%BD%A0%E7%9A%84%E5%90%8D%E5%AD%97%E5%AF%AB%E6%BB%BF%E5%9C%A8%E6%88%91%E5%BF%83%E8%A3%B9.mp3"
    ],
    [
        "name" => "傷心1999",
        "duration" => "PT0M231S",
        "url" => "https://archive.org/download/wang-jies-32-famous-songs/16.%20%E5%82%B7%E5%BF%831999.mp3"
    ],
    [
        "name" => "故事的角色",
        "duration" => "PT0M312S",
        "url" => "https://archive.org/download/wang-jies-32-famous-songs/17.%20%E6%95%85%E4%BA%8B%E7%9A%84%E8%A7%92%E8%89%B2.mp3"
    ],
    [
        "name" => "可能",
        "duration" => "PT0M253S",
        "url" => "https://archive.org/download/wang-jies-32-famous-songs/18.%20%E5%8F%AF%E8%83%BD.mp3"
    ],
    [
        "name" => "一無所有",
        "duration" => "PT0M270S",
        "url" => "https://archive.org/download/wang-jies-32-famous-songs/19.%20%E4%B8%80%E7%84%A1%E6%89%80%E6%9C%89.mp3"
    ],
    [
        "name" => "酒醉酒醒",
        "duration" => "PT0M274S",
        "url" => "https://archive.org/download/wang-jies-32-famous-songs/20.%20%E9%85%92%E9%86%89%E9%85%92%E9%86%92.mp3"
    ],
    [
        "name" => "溫柔的你",
        "duration" => "PT0M311S",
        "url" => "https://archive.org/download/wang-jies-32-famous-songs/21.%20%E6%BA%AB%E6%9F%94%E7%9A%84%E4%BD%A0.mp3"
    ],
    [
        "name" => "人去房空",
        "duration" => "PT0M235S",
        "url" => "https://archive.org/download/wang-jies-32-famous-songs/22.%20%E4%BA%BA%E5%8E%BB%E6%88%BF%E7%A9%BA.mp3"
    ],
    [
        "name" => "怒海孤鴻",
        "duration" => "PT0M279S",
        "url" => "https://archive.org/download/wang-jies-32-famous-songs/23.%20%E6%80%92%E6%B5%B7%E5%AD%A4%E9%B4%BB.mp3"
    ],
    [
        "name" => "今生無悔",
        "duration" => "PT0M252S",
        "url" => "https://archive.org/download/wang-jies-32-famous-songs/24.%20%E4%BB%8A%E7%94%9F%E7%84%A1%E6%82%94.mp3"
    ],
    [
        "name" => "誰明浪子心",
        "duration" => "PT0M304S",
        "url" => "https://archive.org/download/wang-jies-32-famous-songs/25.%20%E8%AA%B0%E6%98%8E%E6%B5%AA%E5%AD%90%E5%BF%83.mp3"
    ],
    [
        "name" => "幾分傷心幾分痴",
        "duration" => "PT0M256S",
        "url" => "https://archive.org/download/wang-jies-32-famous-songs/26.%20%E5%B9%BE%E5%88%86%E5%82%B7%E5%BF%83%E5%B9%BE%E5%88%86%E7%97%B4.mp3"
    ],
    [
        "name" => "不可能",
        "duration" => "PT0M281S",
        "url" => "https://archive.org/download/wang-jies-32-famous-songs/27.%20%E4%B8%8D%E5%8F%AF%E8%83%BD.mp3"
    ],
    [
        "name" => "封鎖我一生",
        "duration" => "PT0M313S",
        "url" => "https://archive.org/download/wang-jies-32-famous-songs/28.%20%E5%B0%81%E9%8E%96%E6%88%91%E4%B8%80%E7%94%9F.mp3"
    ],
    [
        "name" => "上帝也哭泣",
        "duration" => "PT0M320S",
        "url" => "https://archive.org/download/wang-jies-32-famous-songs/29.%20%E4%B8%8A%E5%B8%9D%E4%B9%9F%E5%93%AD%E6%B3%A3.mp3"
    ],
    [
        "name" => "為何分離",
        "duration" => "PT0M320S",
        "url" => "https://archive.org/download/wang-jies-32-famous-songs/30.%20%E7%82%BA%E4%BD%95%E5%88%86%E9%9B%A2.mp3"
    ],
    [
        "name" => "人在風雨中",
        "duration" => "PT0M266S",
        "url" => "https://archive.org/download/wang-jies-32-famous-songs/31.%20%E4%BA%BA%E5%9C%A8%E9%A2%A8%E9%9B%A8%E4%B8%AD.mp3"
    ],
    [
        "name" => "不浪漫罪名",
        "duration" => "PT0M288S",
        "url" => "https://archive.org/download/wang-jies-32-famous-songs/32.%20%E4%B8%8D%E6%B5%AA%E6%BC%AB%E7%BD%AA%E5%90%8D.mp3"
    ]
];

// Function to convert ISO 8601 duration to MM:SS format
function parseDuration($isoDuration) {
    $pattern = '/PT(\d+)M(\d+)S/';
    if (preg_match($pattern, $isoDuration, $matches)) {
        $minutes = (int)$matches[1];
        $seconds = (int)$matches[2];
        return sprintf("%d:%02d", $minutes, $seconds);
    }
    return "0:00";
}

// Generate songs array for JavaScript
$songs = [];
$heroLyrics = [
    ["time" => 0, "text" => "多少个深夜里"],
    ["time" => 4, "text" => "我望着星空"],
    ["time" => 8, "text" => "想起那些往事"],
    ["time" => 12, "text" => "心中满是感动"],
    ["time" => 16, "text" => "英雄的眼泪"],
    ["time" => 20, "text" => "为了爱而流"],
    ["time" => 24, "text" => "纵然路再崎岖"],
    ["time" => 28, "text" => "也要勇敢走"]
];

foreach ($songData as $index => $song) {
    $title = $song['name'];
    $isHero = ($title === "你是我胸口永遠的痛"); // Assuming this is "英雄泪"
    $songs[] = [
        "id" => $index + 1,
        "title" => $title,
        "artist" => "王杰",
        "file" => $song['url'],
        "duration" => parseDuration($song['duration']),
        "cover" => $isHero ? "🦸" : "🎵",
        "lyrics" => $isHero ? $heroLyrics : []
    ];
}

// Output songs array as JavaScript
?>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
	<audio id="audio" preload="metadata" crossorigin="anonymous"></audio>
    <title>陆软Project|Music</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Poppins', sans-serif;
            min-height: 100vh;
            background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
            color: white;
            position: relative;
            overflow-x: hidden;
        }
        
        canvas#particleCanvas {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            pointer-events: none;
        }
        
        .app-container {
            position: relative;
            z-index: 2;
            display: flex;
            min-height: 100vh;
            padding: 20px;
            gap: 20px;
        }
        
        .sidebar {
            width: 350px;
            background: rgba(15, 15, 30, 0.8);
            backdrop-filter: blur(20px);
            border-radius: 20px;
            padding: 25px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
            height: fit-content;
            max-height: calc(100vh - 40px);
            overflow-y: auto;
            transition: transform 0.3s ease;
        }
        
        .sidebar::-webkit-scrollbar {
            width: 6px;
        }
        
        .sidebar::-webkit-scrollbar-thumb {
            background: linear-gradient(to bottom, #11998e, #38ef7d);
            border-radius: 3px;
        }
        
        .sidebar::-webkit-scrollbar-track {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 3px;
        }
        
        .sidebar h3 {
            text-align: center;
            margin-bottom: 25px;
            background: linear-gradient(45deg, #11998e, #38ef7d, #7303c0, #ec38bc);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            font-size: 24px;
            letter-spacing: 2px;
        }
        
        .song-item {
            display: flex;
            align-items: center;
            padding: 15px;
            margin-bottom: 10px;
            border-radius: 15px;
            cursor: pointer;
            transition: all 0.3s ease;
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            position: relative;
            overflow: hidden;
        }
        
        .song-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
            transition: left 0.5s ease;
        }
        
        .song-item:hover::before {
            left: 100%;
        }
        
        .song-item:hover {
            background: rgba(255, 255, 255, 0.1);
            transform: translateY(-2px);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
        }
        
        .song-item.active {
            background: linear-gradient(135deg, rgba(17, 153, 142, 0.3), rgba(56, 239, 125, 0.3));
            border: 1px solid rgba(56, 239, 125, 0.5);
        }
        
        .song-item.playing {
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0%, 100% { box-shadow: 0 0 20px rgba(56, 239, 125, 0.3); }
            50% { box-shadow: 0 0 30px rgba(56, 239, 125, 0.6); }
        }
        
        .song-cover {
            width: 60px;
            height: 60px;
            border-radius: 10px;
            background: linear-gradient(45deg, #302b63, #24243e);
            margin-right: 15px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 24px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }
        
        .song-info {
            flex: 1;
        }
        
        .song-title {
            font-weight: 600;
            font-size: 16px;
            margin-bottom: 5px;
        }
        
        .song-artist {
            font-size: 14px;
            opacity: 0.8;
        }
        
        .song-duration {
            font-size: 12px;
            opacity: 0.6;
        }
        
        .play-indicator {
            font-size: 20px;
            margin-left: 10px;
            opacity: 0;
            transition: opacity 0.3s;
        }
        
        .song-item.playing .play-indicator {
            opacity: 1;
            animation: spin 2s linear infinite;
        }
        
        @keyframes spin {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        .player-container {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: rgba(15, 15, 30, 0.7);
            backdrop-filter: blur(15px);
            border-radius: 24px;
            padding: 40px;
            margin: 0 auto;
            max-width: 600px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4),
                        0 0 100px rgba(78, 0, 224, 0.1),
                        inset 0 0 2px rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.1);
            position: relative;
            overflow: hidden;
        }
        
        .player-container::before {
            content: '';
            position: absolute;
            top: -3px;
            left: -3px;
            right: -3px;
            bottom: -3px;
            background: linear-gradient(45deg, #11998e, #38ef7d, #7303c0, #ec38bc, #11998e);
            z-index: -1;
            border-radius: 27px;
            animation: borderRotate 8s linear infinite;
            background-size: 400% 400%;
        }
        
        @keyframes borderRotate {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }
        
        .player-header {
            text-align: center;
            margin-bottom: 30px;
        }
        
        .player-title {
            font-size: 32px;
            font-weight: 700;
            background: linear-gradient(45deg, #11998e, #38ef7d, #7303c0, #ec38bc);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
            margin-bottom: 10px;
            letter-spacing: 2px;
        }
        
        .current-song-info {
            margin-bottom: 20px;
        }
        
        .current-song-title {
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 5px;
        }
        
        .current-song-artist {
            font-size: 18px;
            opacity: 0.8;
        }
        
        .progress-container {
            position: relative;
            width: 250px;
            height: 250px;
            margin: 30px 0;
        }
        
        .progress-ring {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        
        .progress-ring svg {
            transform: rotate(-90deg);
            filter: drop-shadow(0 0 20px rgba(56, 239, 125, 0.5));
        }
        
        .progress-ring circle.bg {
            fill: none;
            stroke: rgba(255, 255, 255, 0.1);
            stroke-width: 6;
        }
        
        .progress-ring circle.progress {
            fill: none;
            stroke: url(#progressGradient);
            stroke-width: 6;
            stroke-dasharray: 628;
            stroke-dashoffset: 628;
            stroke-linecap: round;
            transition: stroke-dashoffset 0.2s;
        }
        
        .album-art {
            position: absolute;
            top: 20px;
            left: 20px;
            width: 210px;
            height: 210px;
            border-radius: 50%;
            background: linear-gradient(45deg, #302b63, #24243e);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 60px;
            animation: rotate 20s linear infinite paused;
            transition: all 0.3s ease;
        }
        
        .album-art.playing {
            animation-play-state: running;
            box-shadow: 0 10px 40px rgba(56, 239, 125, 0.4);
        }
        
        @keyframes rotate {
            from { transform: rotate(0deg); }
            to { transform: rotate(360deg); }
        }
        
        .play-pause-btn {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background: linear-gradient(135deg, #7303c0, #ec38bc);
            border: none;
            color: white;
            font-size: 32px;
            cursor: pointer;
            z-index: 3;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
            transition: all 0.3s ease;
        }
        
        .play-pause-btn:hover {
            transform: translate(-50%, -50%) scale(1.1);
            box-shadow: 0 15px 40px rgba(115, 3, 192, 0.4);
        }
        
        .play-pause-btn:active {
            transform: translate(-50%, -50%) scale(0.95);
        }
        
        .controls {
            width: 100%;
            max-width: 400px;
            position: relative;
            padding-bottom: 80px; /* Space for lyrics card */
        }
        
        .main-controls {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 20px;
            margin-bottom: 25px;
        }
        
        .control-btn {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: white;
            font-size: 20px;
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .control-btn:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: scale(1.1);
        }
        
        .volume-control {
            display: flex;
            align-items: center;
            gap: 15px;
            margin-bottom: 20px;
        }
        
        .volume-icon {
            font-size: 20px;
            width: 25px;
        }
        
        .volume-slider-container {
            flex: 1;
            position: relative;
            height: 6px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 3px;
            cursor: pointer;
        }
        
        .volume-slider {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            -webkit-appearance: none;
            appearance: none;
            background: transparent;
            border-radius: 3px;
            outline: none;
            cursor: pointer;
        }
        
        .volume-slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 18px;
            height: 18px;
            background: white;
            border-radius: 50%;
            cursor: pointer;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
        }
        
        .volume-level {
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            background: linear-gradient(to right, #11998e, #38ef7d);
            border-radius: 3px;
            pointer-events: none;
            transition: width 0.2s ease;
        }
        
        .time-display {
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            opacity: 0.8;
            margin-top: 15px;
        }
        
        .visualizer {
            display: flex;
            align-items: flex-end;
            justify-content: center;
            height: 40px;
            gap: 3px;
            margin: 20px 0;
        }
        
        .visualizer-bar {
            width: 4px;
            background: linear-gradient(to top, #11998e, #38ef7d);
            border-radius: 2px;
            transition: height 0.1s ease;
        }
        
        .lyrics-card {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            width: 90%;
            max-width: 400px;
            background: rgba(15, 15, 30, 0.8);
            backdrop-filter: blur(20px);
            border-radius: 15px;
            padding: 15px;
            border: 1px solid rgba(255, 255, 255, 0.1);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
            text-align: center;
            font-size: 18px;
            line-height: 24px;
            color: rgba(255, 255, 255, 0.9);
            text-shadow: 0 0 10px rgba(56, 239, 125, 0.5);
            transition: opacity 0.5s ease;
        }
        
        .lyrics-card p {
            margin: 0;
            opacity: 0;
            transition: opacity 0.5s ease;
        }
        
        .lyrics-card p.active {
            opacity: 1;
            background: linear-gradient(45deg, #11998e, #38ef7d);
            -webkit-background-clip: text;
            background-clip: text;
            -webkit-text-fill-color: transparent;
        }
        
        @media (max-width: 768px) {
            .app-container {
                flex-direction: column;
                padding: 10px;
                gap: 15px;
            }
            
            .sidebar {
                width: 100%;
                order: 2;
                max-height: 300px;
            }
            
            .player-container {
                order: 1;
                padding: 20px;
            }
            
            .progress-container {
                width: 200px;
                height: 200px;
            }
            
            .album-art {
                width: 160px;
                height: 160px;
                top: 20px;
                left: 20px;
                font-size: 40px;
            }
            
            .play-pause-btn {
                width: 60px;
                height: 60px;
                font-size: 24px;
            }
            
            .lyrics-card {
                font-size: 16px;
                padding: 10px;
                bottom: 10px;
            }
        }
        
        .loading {
            opacity: 0.6;
            pointer-events: none;
        }
        
        .loading::after {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            width: 20px;
            height: 20px;
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-top: 2px solid white;
            border-radius: 50%;
            animation: loading 1s linear infinite;
            transform: translate(-50%, -50%);
        }
        
        @keyframes loading {
            to { transform: translate(-50%, -50%) rotate(360deg); }
        }
        
        .sidebar-toggle {
            display: none;
            position: fixed;
            top: 20px;
            left: 20px;
            z-index: 10;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: rgba(15, 15, 30, 0.9);
            border: 1px solid rgba(255, 255, 255, 0.2);
            color: white;
            font-size: 20px;
            cursor: pointer;
        }
        
        @media (max-width: 768px) {
            .sidebar-toggle {
                display: flex;
                align-items: center;
                justify-content: center;
            }
            
            .sidebar {
                position: fixed;
                top: 0;
                left: -100%;
                height: 100vh;
                z-index: 5;
                transition: left 0.3s ease;
            }
            
            .sidebar.open {
                left: 0;
            }
        }
    </style>
</head>
<body>
    <canvas id="particleCanvas"></canvas>
    
    <button class="sidebar-toggle" id="sidebarToggle">☰</button>
    
    <div class="app-container">
        <div class="sidebar" id="sidebar">
            <h3>播放列表</h3>
            <div id="playlistContainer"></div>
        </div>
        
        <div class="player-container">
            <div class="player-header">
                <h1 class="player-title">陆软 Music Player</h1>
                <div class="current-song-info">
                    <div class="current-song-title" id="currentSongTitle">选择一首歌曲</div>
                    <div class="current-song-artist" id="currentSongArtist">开始您的音乐之旅</div>
                </div>
            </div>
            
            <audio id="audio" preload="metadata"></audio>
            
            <div class="progress-container">
                <div class="progress-ring">
                    <svg width="250" height="250" viewBox="0 0 250 250">
                        <defs>
                            <linearGradient id="progressGradient" x1="0%" y1="0%" x2="100%" y2="0%">
                                <stop offset="0%" stop-color="#11998e" />
                                <stop offset="50%" stop-color="#38ef7d" />
                                <stop offset="100%" stop-color="#7303c0" />
                            </linearGradient>
                        </defs>
                        <circle class="bg" cx="125" cy="125" r="100" />
                        <circle class="progress" cx="125" cy="125" r="100" id="progressCircle" />
                    </svg>
                </div>
                <div class="album-art" id="albumArt">🎵</div>
                <button class="play-pause-btn" id="playPauseBtn">▶</button>
            </div>
            
            <div class="controls">
                <div class="main-controls">
                    <button class="control-btn" id="prevBtn">⏮</button>
                    <button class="control-btn" id="shuffleBtn">🔀</button>
                    <button class="control-btn" id="repeatBtn">🔁</button>
                    <button class="control-btn" id="nextBtn">⏭</button>
                </div>
                
                <div class="volume-control">
                    <div class="volume-icon" id="volumeIcon">🔊</div>
                    <div class="volume-slider-container" id="volumeContainer">
                        <input type="range" class="volume-slider" id="volumeSlider" min="0" max="1" step="0.01" value="0.7">
                        <div class="volume-level" id="volumeLevel"></div>
                    </div>
                </div>
                
                <div class="visualizer" id="visualizer"></div>
                
                <div class="time-display">
                    <span id="currentTime">0:00</span>
                    <span id="duration">0:00</span>
                </div>
                
                <div class="lyrics-card" id="lyricsCard">
                    <p id="currentLyric">选择一首歌曲以显示歌词</p>
                </div>
            </div>
        </div>
    </div>

    <script>
        const songs = <?php echo json_encode($songs, JSON_UNESCAPED_UNICODE); ?>;
        
        let currentSongIndex = 0;
        let isPlaying = false;
        let isShuffled = false;
        let isRepeating = false;
        let audioContext, analyser, dataArray;
        let lastPlayedIndices = [];
        
        const audio = document.getElementById('audio');
        const playPauseBtn = document.getElementById('playPauseBtn');
        const prevBtn = document.getElementById('prevBtn');
        const nextBtn = document.getElementById('nextBtn');
        const shuffleBtn = document.getElementById('shuffleBtn');
        const repeatBtn = document.getElementById('repeatBtn');
        const volumeSlider = document.getElementById('volumeSlider');
        const volumeLevel = document.getElementById('volumeLevel');
        const volumeIcon = document.getElementById('volumeIcon');
        const progressCircle = document.getElementById('progressCircle');
        const albumArt = document.getElementById('albumArt');
        const currentTimeDisplay = document.getElementById('currentTime');
        const durationDisplay = document.getElementById('duration');
        const currentSongTitle = document.getElementById('currentSongTitle');
        const currentSongArtist = document.getElementById('currentSongArtist');
        const playlistContainer = document.getElementById('playlistContainer');
        const visualizer = document.getElementById('visualizer');
        const sidebar = document.getElementById('sidebar');
        const sidebarToggle = document.getElementById('sidebarToggle');
        const volumeContainer = document.getElementById('volumeContainer');
        const lyricsCard = document.getElementById('lyricsCard');
        const currentLyric = document.getElementById('currentLyric');
        
        function init() {
            createPlaylist();
            createVisualizer();
            setupEventListeners();
            loadSong(0);
            setupParticles();
            audio.volume = volumeSlider.value;
            updateVolumeDisplay();
        }
        
        function createPlaylist() {
            playlistContainer.innerHTML = '';
            songs.forEach((song, index) => {
                const songItem = document.createElement('div');
                songItem.className = 'song-item';
                if (index === currentSongIndex) songItem.classList.add('active');
                
                songItem.innerHTML = `
                    <div class="song-cover">${song.cover}</div>
                    <div class="song-info">
                        <div class="song-title">${song.title}</div>
                        <div class="song-artist">${song.artist}</div>
                        <div class="song-duration">${song.duration}</div>
                    </div>
                    <div class="play-indicator">🎵</div>
                `;
                
                songItem.addEventListener('click', () => {
                    loadSong(index);
                    if (isPlaying) {
                        audio.play();
                    }
                    if (isShuffled) {
                        lastPlayedIndices.push(index);
                    }
                });
                
                playlistContainer.appendChild(songItem);
            });
        }
        
        function loadSong(index) {
            if (index >= 0 && index < songs.length) {
                currentSongIndex = index;
                const song = songs[index];
                
                audio.src = song.file;
                currentSongTitle.textContent = song.title;
                currentSongArtist.textContent = song.artist;
                albumArt.textContent = song.cover;
                currentLyric.textContent = song.lyrics.length ? song.lyrics[0].text : '无歌词';
                currentLyric.classList.add('active');
                
                document.querySelectorAll('.song-item').forEach((item, i) => {
                    item.classList.toggle('active', i === index);
                    item.classList.toggle('playing', i === index && isPlaying);
                });
                
                progressCircle.style.strokeDashoffset = 628;
                currentTimeDisplay.textContent = '0:00';
            }
        }
        
        function createVisualizer() {
            for (let i = 0; i < 32; i++) {
                const bar = document.createElement('div');
                bar.className = 'visualizer-bar';
                bar.style.height = '4px';
                visualizer.appendChild(bar);
            }
        }
        
        function setupEventListeners() {
            playPauseBtn.addEventListener('click', togglePlayPause);
            prevBtn.addEventListener('click', previousSong);
            nextBtn.addEventListener('click', nextSong);
            shuffleBtn.addEventListener('click', toggleShuffle);
            repeatBtn.addEventListener('click', toggleRepeat);
            volumeSlider.addEventListener('input', handleVolumeChange);
            volumeContainer.addEventListener('click', handleVolumeClick);
            progressCircle.parentElement.parentElement.addEventListener('click', handleProgressClick);
            audio.addEventListener('timeupdate', updateProgress);
            audio.addEventListener('loadedmetadata', updateDuration);
            audio.addEventListener('ended', handleSongEnd);
            sidebarToggle.addEventListener('click', () => {
                sidebar.classList.toggle('open');
            });
            document.addEventListener('click', (e) => {
                if (window.innerWidth <= 768 && 
                    !sidebar.contains(e.target) && 
                    !sidebarToggle.contains(e.target) &&
                    sidebar.classList.contains('open')) {
                    sidebar.classList.remove('open');
                }
            });
        }
        
        function togglePlayPause() {
            if (audio.src) {
                if (isPlaying) {
                    audio.pause();
                    isPlaying = false;
                    playPauseBtn.textContent = '▶';
                    albumArt.classList.remove('playing');
                    updatePlaylistDisplay();
                } else {
                    if (!audioContext) {
                        initAudio();
                    }
                    audio.play().then(() => {
                        isPlaying = true;
                        playPauseBtn.textContent = '⏸';
                        albumArt.classList.add('playing');
                        updatePlaylistDisplay();
                    }).catch(e => console.log('Play failed:', e));
                }
            }
        }
        
        function previousSong() {
            let newIndex;
            if (isShuffled) {
                if (lastPlayedIndices.length > 1) {
                    lastPlayedIndices.pop();
                    newIndex = lastPlayedIndices[lastPlayedIndices.length - 1];
                } else {
                    newIndex = Math.floor(Math.random() * songs.length);
                }
            } else {
                newIndex = (currentSongIndex - 1 + songs.length) % songs.length;
            }
            loadSong(newIndex);
            if (isPlaying) audio.play();
            if (isShuffled) lastPlayedIndices.push(newIndex);
        }
        
        function nextSong() {
            let newIndex;
            if (isShuffled) {
                newIndex = Math.floor(Math.random() * songs.length);
                while (newIndex === currentSongIndex && songs.length > 1) {
                    newIndex = Math.floor(Math.random() * songs.length);
                }
            } else {
                newIndex = (currentSongIndex + 1) % songs.length;
            }
            loadSong(newIndex);
            if (isPlaying) audio.play();
            if (isShuffled) lastPlayedIndices.push(newIndex);
        }
        
        function toggleShuffle() {
            isShuffled = !isShuffled;
            shuffleBtn.style.color = isShuffled ? '#38ef7d' : 'white';
            shuffleBtn.style.backgroundColor = isShuffled ? 'rgba(56, 239, 125, 0.2)' : 'rgba(255, 255, 255, 0.1)';
            lastPlayedIndices = [currentSongIndex];
        }
        
        function toggleRepeat() {
            isRepeating = !isRepeating;
            repeatBtn.style.color = isRepeating ? '#38ef7d' : 'white';
            repeatBtn.style.backgroundColor = isRepeating ? 'rgba(56, 239, 125, 0.2)' : 'rgba(255, 255, 255, 0.1)';
        }
        
        function handleVolumeChange() {
            audio.volume = volumeSlider.value;
            updateVolumeDisplay();
        }
        
        function handleVolumeClick(e) {
            if (e.target === volumeContainer) {
                const rect = volumeContainer.getBoundingClientRect();
                const percentage = (e.clientX - rect.left) / rect.width;
                volumeSlider.value = Math.max(0, Math.min(1, percentage));
                handleVolumeChange();
            }
        }
        
        function updateVolumeDisplay() {
            const volume = volumeSlider.value;
            volumeLevel.style.width = `${volume * 100}%`;
            
            if (volume > 0.7) {
                volumeIcon.textContent = '🔊';
            } else if (volume > 0.3) {
                volumeIcon.textContent = '🔉';
            } else if (volume > 0) {
                volumeIcon.textContent = '🔈';
            } else {
                volumeIcon.textContent = '🔇';
            }
        }
        
        function handleProgressClick(e) {
            if (!audio.duration) return;
            
            const rect = progressCircle.getBoundingClientRect();
            const centerX = rect.left + rect.width / 2;
            const centerY = rect.top + rect.height / 2;
            
            const clickX = e.clientX - centerX;
            const clickY = e.clientY - centerY;
            
            let angle = Math.atan2(clickY, clickX);
            if (angle < 0) angle += 2 * Math.PI;
            angle = (angle + Math.PI / 2) % (2 * Math.PI);
            
            const ratio = angle / (2 * Math.PI);
            audio.currentTime = ratio * audio.duration;
        }
        
        function updateProgress() {
            if (audio.duration) {
                const progress = audio.currentTime / audio.duration;
                const circumference = 2 * Math.PI * 100;
                progressCircle.style.strokeDashoffset = circumference * (1 - progress);
                
                currentTimeDisplay.textContent = formatTime(audio.currentTime);
                
                updateVisualizer();
                updateLyrics();
            }
        }
        
        function updateDuration() {
            if (audio.duration) {
                durationDisplay.textContent = formatTime(audio.duration);
            }
        }
        
        function handleSongEnd() {
            if (isRepeating) {
                audio.currentTime = 0;
                audio.play();
            } else {
                nextSong();
            }
        }
        
        function updatePlaylistDisplay() {
            document.querySelectorAll('.song-item').forEach((item, i) => {
                item.classList.toggle('playing', i === currentSongIndex && isPlaying);
            });
        }
        
        function formatTime(seconds) {
            const minutes = Math.floor(seconds / 60);
            seconds = Math.floor(seconds % 60);
            return `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
        }
        
        function updateLyrics() {
            const currentSong = songs[currentSongIndex];
            if (!currentSong.lyrics.length) {
                currentLyric.textContent = '无歌词';
                currentLyric.classList.add('active');
                return;
            }
            
            let currentLine = currentSong.lyrics[0].text;
            let found = false;
            for (let i = 0; i < currentSong.lyrics.length; i++) {
                if (audio.currentTime >= currentSong.lyrics[i].time) {
                    currentLine = currentSong.lyrics[i].text;
                    found = true;
                } else {
                    break;
                }
            }
            
            if (currentLyric.textContent !== currentLine) {
                currentLyric.classList.remove('active');
                setTimeout(() => {
                    currentLyric.textContent = currentLine;
                    currentLyric.classList.add('active');
                }, 500);
            } else if (found && !currentLyric.classList.contains('active')) {
                currentLyric.classList.add('active');
            }
        }
        
        function initAudio() {
            if (!audioContext) {
                audioContext = new (window.AudioContext || window.webkitAudioContext)();
                analyser = audioContext.createAnalyser();
                
                const source = audioContext.createMediaElementSource(audio);
                source.connect(analyser);
                analyser.connect(audioContext.destination);
                
                analyser.fftSize = 128;
                dataArray = new Uint8Array(analyser.frequencyBinCount);
            }
        }
        
        function updateVisualizer() {
            if (!analyser || !dataArray) return;
            
            analyser.getByteFrequencyData(dataArray);
            const bars = document.querySelectorAll('.visualizer-bar');
            
            if (isPlaying) {
                bars.forEach((bar, i) => {
                    const index = Math.floor(i * dataArray.length / bars.length);
                    const value = dataArray[index] || 0;
                    const height = Math.max(4, (value / 255) * 40);
                    bar.style.height = `${height}px`;
                });
            } else {
                bars.forEach(bar => {
                    bar.style.height = '4px';
                });
            }
        }
        
        function setupParticles() {
            const canvas = document.getElementById('particleCanvas');
            const ctx = canvas.getContext('2d');
            
            function resizeCanvas() {
                canvas.width = window.innerWidth;
                canvas.height = window.innerHeight;
            }
            
            resizeCanvas();
            window.addEventListener('resize', resizeCanvas);
            
            const particles = [];
            const particleCount = 100;
            
            class Particle {
                constructor() {
                    this.reset();
                }
                
                reset() {
                    this.x = Math.random() * canvas.width;
                    this.y = Math.random() * canvas.height;
                    this.size = Math.random() * 3 + 1;
                    this.speedX = (Math.random() - 0.5) * 0.5;
                    this.speedY = (Math.random() - 0.5) * 0.5;
                    this.color = `hsla(${Math.random() * 60 + 200}, 70%, 60%, 0.3)`;
                    this.life = Math.random() * 300 + 100;
                    this.maxLife = this.life;
                }
                
                update() {
                    this.x += this.speedX;
                    this.y += this.speedY;
                    this.life--;
                    
                    if (isPlaying && analyser && dataArray) {
                        const audioEnergy = dataArray.reduce((a, b) => a + b, 0) / dataArray.length / 255;
                        this.speedX += (Math.random() - 0.5) * audioEnergy * 0.1;
                        this.speedY += (Math.random() - 0.5) * audioEnergy * 0.1;
                        this.size = Math.max(1, this.size + audioEnergy);
                    }
                    
                    if (this.x < 0 || this.x > canvas.width || 
                        this.y < 0 || this.y > canvas.height || 
                        this.life <= 0) {
                        this.reset();
                    }
                }
                
                draw() {
                    const alpha = this.life / this.maxLife;
                    ctx.globalAlpha = alpha;
                    ctx.fillStyle = this.color;
                    ctx.beginPath();
                    ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                    ctx.fill();
                    ctx.globalAlpha = 1;
                }
            }
            
            for (let i = 0; i < particleCount; i++) {
                particles.push(new Particle());
            }
            
            function animate() {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                
                particles.forEach(particle => {
                    particle.update();
                    particle.draw();
                });
                
                particles.forEach((p1, i) => {
                    particles.slice(i + 1, i + 10).forEach(p2 => {
                        const dx = p1.x - p2.x;
                        const dy = p1.y - p2.y;
                        const distance = Math.sqrt(dx * dx + dy * dy);
                        
                        if (distance < 100) {
                            ctx.globalAlpha = 0.1 * (1 - distance / 100);
                            ctx.strokeStyle = '#38ef7d';
                            ctx.lineWidth = 1;
                            ctx.beginPath();
                            ctx.moveTo(p1.x, p1.y);
                            ctx.lineTo(p2.x, p2.y);
                            ctx.stroke();
                            ctx.globalAlpha = 1;
                        }
                    });
                });
                
                requestAnimationFrame(animate);
            }
            
            animate();
        }
        
        document.addEventListener('keydown', (e) => {
            if (e.target.tagName === 'INPUT') return;
            
            switch(e.code) {
                case 'Space':
                    e.preventDefault();
                    togglePlayPause();
                    break;
                case 'ArrowLeft':
                    e.preventDefault();
                    previousSong();
                    break;
                case 'ArrowRight':
                    e.preventDefault();
                    nextSong();
                    break;
                case 'ArrowUp':
                    e.preventDefault();
                    volumeSlider.value = Math.min(1, parseFloat(volumeSlider.value) + 0.1);
                    handleVolumeChange();
                    break;
                case 'ArrowDown':
                    e.preventDefault();
                    volumeSlider.value = Math.max(0, parseFloat(volumeSlider.value) - 0.1);
                    handleVolumeChange();
                    break;
            }
        });
        
        audio.addEventListener('error', (e) => {
            console.log('Audio error:', e);
            currentSongTitle.textContent = '加载失败';
            currentSongArtist.textContent = '请检查音频文件';
            currentLyric.textContent = '无歌词';
            currentLyric.classList.add('active');
        });
        
        audio.addEventListener('loadstart', () => {
            albumArt.style.opacity = '0.6';
            lyricsCard.style.opacity = '0.6';
        });
        
        audio.addEventListener('canplay', () => {
            albumArt.style.opacity = '1';
            lyricsCard.style.opacity = '1';
        });
        
        init();
    </script>
</body>
</html>