Spaces:

Kicool
/

cloudyy

Running

App Files Files Community

xukunCai commited on Oct 7, 2025

Commit

1572821

verified ·

1 Parent(s): 13c4bf9

Update index.html

Browse files

Files changed (1) hide show

index.html +1645 -19

index.html CHANGED Viewed

@@ -1,19 +1,1645 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>云音乐 - 在线音乐播放器</title>
+    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
+            background: #f8f9fa;
+            color: #333;
+            overflow-x: hidden;
+            line-height: 1.6;
+        }
+        /* 顶部导航 */
+        .navbar {
+            background: #ffffff;
+            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+            padding: 15px 0;
+            position: sticky;
+            top: 0;
+            z-index: 100;
+        }
+        .nav-container {
+            max-width: 1400px;
+            margin: 0 auto;
+            padding: 0 30px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+        .logo {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            font-size: 24px;
+            font-weight: bold;
+            color: #333;
+        }
+        .logo i {
+            color: #4a90e2;
+            font-size: 28px;
+        }
+        .search-container {
+            flex: 1;
+            max-width: 600px;
+            margin: 0 40px;
+            position: relative;
+        }
+        .search-wrapper {
+            display: flex;
+            background: #f5f7fa;
+            border-radius: 25px;
+            overflow: hidden;
+            border: 1px solid #e1e5eb;
+            transition: all 0.3s ease;
+        }
+        .search-wrapper:focus-within {
+            background: #ffffff;
+            border-color: #4a90e2;
+            box-shadow: 0 0 15px rgba(74, 144, 226, 0.2);
+        }
+        .search-input {
+            flex: 1;
+            padding: 12px 20px;
+            background: transparent;
+            border: none;
+            color: #333;
+            font-size: 16px;
+            outline: none;
+        }
+        .search-input::placeholder {
+            color: #adb5bd;
+        }
+        .source-select {
+            background: #f0f3f7;
+            border: none;
+            color: #495057;
+            padding: 12px 15px;
+            outline: none;
+            cursor: pointer;
+            border-left: 1px solid #e1e5eb;
+        }
+        .source-select option {
+            background: #ffffff;
+            color: #333;
+            padding: 8px;
+        }
+        .search-btn {
+            background: #4a90e2;
+            border: none;
+            color: #fff;
+            padding: 12px 20px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+        .search-btn:hover {
+            background: #3a7bc8;
+        }
+        /* 主要内容区域 */
+        .main-container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 20px;
+            min-height: calc(100vh - 170px);
+        }
+        /* 内容面板通用样式 */
+        .content-panel {
+            background: #ffffff;
+            border-radius: 16px;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
+            padding: 25px;
+            margin-bottom: 20px;
+            height: 100%;
+        }
+        .panel-title {
+            font-size: 20px;
+            font-weight: 600;
+            margin-bottom: 20px;
+            color: #333;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .panel-title i {
+            color: #4a90e2;
+        }
+        /* 搜索结果区域 - 卡片式布局 */
+        .search-results {
+            max-height: 500px;
+            overflow-y: auto;
+            scrollbar-width: thin;
+            scrollbar-color: #ced4da transparent;
+            display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
+            gap: 12px;
+            padding-right: 10px;
+        }
+        .search-results::-webkit-scrollbar {
+            width: 6px;
+        }
+        .search-results::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        .search-results::-webkit-scrollbar-thumb {
+            background: #ced4da;
+            border-radius: 3px;
+        }
+        .song-card {
+            display: flex;
+            align-items: flex-start;
+            padding: 12px 15px;
+            border-radius: 12px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            background: #f8f9fa;
+            border: 1px solid #e9ecef;
+        }
+        .song-card:hover {
+            background: #ffffff;
+            transform: translateY(-2px);
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
+        }
+        .song-card.active {
+            background: linear-gradient(135deg, rgba(74, 144, 226, 0.1), rgba(74, 144, 226, 0.05));
+            border: 1px solid rgba(74, 144, 226, 0.3);
+        }
+        .song-index {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: #e9ecef;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-right: 12px;
+            font-size: 14px;
+            font-weight: 600;
+            color: #495057;
+            flex-shrink: 0;
+        }
+        .song-card.active .song-index {
+            background: linear-gradient(135deg, #4a90e2, #3a7bc8);
+            color: #fff;
+        }
+        .song-info {
+            flex: 1;
+            min-width: 0;
+            padding: 2px 0;
+        }
+        .song-name {
+            font-weight: 600;
+            margin-bottom: 3px;
+            font-size: 15px;
+            color: #333;
+            /* 允许标题换行 */
+            white-space: normal;
+            line-height: 1.4;
+        }
+        .song-artist {
+            color: #6c757d;
+            font-size: 13px;
+            /* 允许艺术家信息换行 */
+            white-space: normal;
+            line-height: 1.4;
+        }
+        .song-duration {
+            color: #adb5bd;
+            font-size: 13px;
+            margin-left: 10px;
+            white-space: nowrap;
+            align-self: center;
+        }
+        /* 歌曲操作按钮 */
+        .song-actions {
+            display: flex;
+            gap: 8px;
+            margin-left: 10px;
+            align-self: center;
+        }
+        .action-btn {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: #e9ecef;
+            border: none;
+            color: #6c757d;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 13px;
+        }
+        .action-btn:hover {
+            background: #dee2e6;
+            color: #4a90e2;
+            transform: scale(1.1);
+        }
+        /* 播放器区域 */
+        .player-panel {
+            text-align: center;
+            padding: 30px 25px;
+        }
+        .current-song {
+            margin-bottom: 30px;
+        }
+        .current-cover-container {
+            position: relative;
+            display: inline-block;
+            margin-bottom: 25px;
+        }
+        .current-cover {
+            width: 220px;
+            height: 220px;
+            border-radius: 50%;
+            object-fit: cover;
+            box-shadow: 0 15px 35px rgba(74, 144, 226, 0.2);
+            transition: all 0.3s ease;
+            border: 6px solid #f8f9fa;
+        }
+        .current-cover.playing {
+            animation: rotate 20s linear infinite;
+        }
+        @keyframes rotate {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
+        }
+        .current-info h3 {
+            font-size: 22px;
+            font-weight: 600;
+            margin-bottom: 8px;
+            color: #333;
+        }
+        .current-info p {
+            color: #6c757d;
+            font-size: 16px;
+        }
+        /* 播放控制 */
+        .player-controls {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            gap: 25px;
+            margin-bottom: 30px;
+        }
+        .control-btn {
+            background: #f1f3f5;
+            border: none;
+            border-radius: 50%;
+            color: #495057;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+        }
+        .control-btn:hover {
+            background: #e9ecef;
+            transform: scale(1.1);
+        }
+        .control-btn.small {
+            width: 50px;
+            height: 50px;
+            font-size: 18px;
+        }
+        .play-btn {
+            width: 70px;
+            height: 70px;
+            font-size: 28px;
+            background: linear-gradient(135deg, #4a90e2, #3a7bc8);
+            color: white;
+            box-shadow: 0 8px 25px rgba(74, 144, 226, 0.3);
+        }
+        .play-btn:hover {
+            background: linear-gradient(135deg, #3a7bc8, #2d6bc1);
+            box-shadow: 0 12px 35px rgba(74, 144, 226, 0.4);
+        }
+        /* 进度条 */
+        .progress-container {
+            margin-bottom: 30px;
+            padding: 0 20px;
+        }
+        .progress-bar {
+            width: 100%;
+            height: 6px;
+            background: #e9ecef;
+            border-radius: 3px;
+            cursor: pointer;
+            margin-bottom: 10px;
+            position: relative;
+        }
+        .progress-fill {
+            height: 100%;
+            background: linear-gradient(90deg, #4a90e2, #6aa8e6);
+            border-radius: 3px;
+            width: 0%;
+            transition: width 0.1s ease;
+            position: relative;
+        }
+        .progress-fill::after {
+            content: '';
+            position: absolute;
+            right: -2px;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 14px;
+            height: 14px;
+            background: #4a90e2;
+            border-radius: 50%;
+            box-shadow: 0 2px 8px rgba(74, 144, 226, 0.5);
+        }
+        .time-info {
+            display: flex;
+            justify-content: space-between;
+            font-size: 14px;
+            color: #6c757d;
+        }
+        /* 音量控制 */
+        .volume-container {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            margin-bottom: 30px;
+            justify-content: center;
+        }
+        .volume-icon {
+            color: #6c757d;
+            font-size: 18px;
+        }
+        .volume-slider {
+            width: 150px;
+            height: 4px;
+            background: #e9ecef;
+            border-radius: 2px;
+            outline: none;
+            cursor: pointer;
+            -webkit-appearance: none;
+        }
+        .volume-slider::-webkit-slider-thumb {
+            -webkit-appearance: none;
+            width: 14px;
+            height: 14px;
+            background: #4a90e2;
+            border-radius: 50%;
+            cursor: pointer;
+        }
+        /* 音质选择 */
+        .quality-container {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 25px;
+            padding: 15px 20px;
+            background: #f8f9fa;
+            border-radius: 12px;
+            border: 1px solid #e9ecef;
+        }
+        .quality-label {
+            display: flex;
+            align-items: center;
+            gap: 8px;
+            color: #495057;
+            font-size: 14px;
+        }
+        .quality-select {
+            background: #ffffff;
+            border: 1px solid #ced4da;
+            border-radius: 8px;
+            color: #333;
+            padding: 8px 12px;
+            outline: none;
+            cursor: pointer;
+            font-size: 14px;
+        }
+        .quality-select option {
+            background: #ffffff;
+            color: #333;
+            padding: 8px;
+        }
+        /* 下载区域 */
+        .download-container {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 15px;
+            margin-bottom: 20px;
+        }
+        .download-btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 8px;
+            padding: 12px 15px;
+            background: #f8f9fa;
+            border: 1px solid #e9ecef;
+            border-radius: 12px;
+            color: #495057;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            font-size: 14px;
+        }
+        .download-btn:hover:not(:disabled) {
+            background: #eef2f7;
+            border-color: #4a90e2;
+            color: #4a90e2;
+        }
+        .download-btn:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+        /* 歌词区域 */
+        .lyrics-container {
+            max-height: 500px;
+            overflow-y: auto;
+            scrollbar-width: thin;
+            scrollbar-color: #ced4da transparent;
+            padding-right: 10px;
+            position: relative;
+        }
+        .lyrics-container::-webkit-scrollbar {
+            width: 6px;
+        }
+        .lyrics-container::-webkit-scrollbar-track {
+            background: transparent;
+        }
+        .lyrics-container::-webkit-scrollbar-thumb {
+            background: #ced4da;
+            border-radius: 3px;
+        }
+        .lyric-line {
+            padding: 8px 15px;
+            transition: all 0.3s ease;
+            cursor: pointer;
+            border-radius: 8px;
+            margin-bottom: 6px;
+            color: #6c757d;
+            line-height: 1.6;
+            text-align: center;
+            font-size: 15px;
+        }
+        .lyric-line:hover {
+            background: #f8f9fa;
+            color: #4a90e2;
+        }
+        .lyric-line.active {
+            color: #4a90e2;
+            font-weight: 600;
+            background: rgba(74, 144, 226, 0.08);
+            transform: scale(1.02);
+        }
+        /* 加载和错误状态 */
+        .loading, .error, .empty-state {
+            text-align: center;
+            padding: 60px 20px;
+            color: #6c757d;
+        }
+        .loading i, .error i, .empty-state i {
+            font-size: 48px;
+            margin-bottom: 15px;
+            display: block;
+            color: #adb5bd;
+        }
+        .loading i {
+            animation: spin 1s linear infinite;
+            color: #4a90e2;
+        }
+        @keyframes spin {
+            from { transform: rotate(0deg); }
+            to { transform: rotate(360deg); }
+        }
+        .error i {
+            color: #e74c3c;
+        }
+        /* 移动端底部导航 */
+        .mobile-nav {
+            display: none;
+            position: fixed;
+            bottom: 0;
+            left: 0;
+            width: 100%;
+            background: #ffffff;
+            box-shadow: 0 -2px 15px rgba(0, 0, 0, 0.05);
+            z-index: 99;
+        }
+        .mobile-nav-items {
+            display: flex;
+            justify-content: space-around;
+        }
+        .mobile-nav-item {
+            flex: 1;
+            text-align: center;
+            padding: 15px 0;
+            color: #6c757d;
+            text-decoration: none;
+            font-size: 12px;
+            transition: all 0.3s ease;
+        }
+        .mobile-nav-item.active {
+            color: #4a90e2;
+        }
+        .mobile-nav-item i {
+            font-size: 20px;
+            margin-bottom: 5px;
+            display: block;
+        }
+        /* 内容视图容器 */
+        .view-container {
+            display: block;
+        }
+        /* 响应式设计 */
+        @media (min-width: 1200px) {
+            .desktop-layout {
+                display: grid;
+                grid-template-columns: 350px 450px 350px;
+                gap: 25px;
+            }
+            .mobile-nav {
+                display: none !important;
+            }
+        }
+        @media (max-width: 1199px) {
+            .mobile-nav {
+                display: block;
+            }
+            .main-container {
+                padding-bottom: 80px;
+            }
+            .desktop-layout {
+                display: block;
+            }
+            .view-container {
+                display: none;
+            }
+            .view-container.active {
+                display: block;
+            }
+            /* 移动端提高信息密度 */
+            .song-name {
+                font-size: 14px;
+                line-height: 1.4;
+            }
+            .song-artist {
+                font-size: 13px;
+                line-height: 1.4;
+            }
+            .song-card {
+                padding: 10px 12px;
+                gap: 10px;
+            }
+            .song-index {
+                width: 28px;
+                height: 28px;
+                font-size: 13px;
+            }
+            .action-btn {
+                width: 28px;
+                height: 28px;
+                font-size: 12px;
+            }
+        }
+        @media (max-width: 768px) {
+            .nav-container {
+                flex-direction: column;
+                gap: 15px;
+                padding: 0 15px;
+            }
+            .search-container {
+                margin: 0;
+                max-width: none;
+                width: 100%;
+            }
+            .current-cover {
+                width: 180px;
+                height: 180px;
+            }
+            .player-controls {
+                gap: 15px;
+            }
+            .content-panel {
+                padding: 15px 12px;
+            }
+            .panel-title {
+                font-size: 17px;
+                margin-bottom: 15px;
+            }
+            .search-results {
+                gap: 10px;
+            }
+        }
+        /* 自定义滚动条样式 */
+        ::-webkit-scrollbar {
+            width: 8px;
+        }
+        ::-webkit-scrollbar-track {
+            background: #f8f9fa;
+            border-radius: 4px;
+        }
+        ::-webkit-scrollbar-thumb {
+            background: #ced4da;
+            border-radius: 4px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: #adb5bd;
+        }
+    </style>
+</head>
+<body>
+    <!-- 顶部导航 -->
+    <nav class="navbar">
+        <div class="nav-container">
+            <div class="logo">
+                <i class="fas fa-music"></i>
+                <span>云音乐</span>
+            </div>
+            <div class="search-container">
+                <div class="search-wrapper">
+                    <input type="text" class="search-input" placeholder="搜索音乐、歌手、专辑..." id="searchInput">
+                    <select class="source-select" id="sourceSelect">
+                        <option value="netease">网易云音乐</option>
+                        <option value="tencent">QQ音乐</option>
+                        <option value="kuwo">酷我音乐</option>
+                        <option value="joox">JOOX</option>
+                        <option value="kugou">酷狗音乐</option>
+                        <option value="migu">咪咕音乐</option>
+                        <option value="deezer">Deezer</option>
+                        <option value="spotify">Spotify</option>
+                        <option value="apple">Apple Music</option>
+                        <option value="ytmusic">YouTube Music</option>
+                        <option value="tidal">TIDAL</option>
+                        <option value="qobuz">Qobuz</option>
+                        <option value="ximalaya">喜马拉雅</option>
+                    </select>
+                    <button class="search-btn" onclick="searchMusic()">
+                        <i class="fas fa-search"></i>
+                    </button>
+                </div>
+            </div>
+        </div>
+    </nav>
+    <!-- 主要内容 -->
+    <div class="main-container">
+        <div class="desktop-layout">
+            <!-- 搜索结果视图 -->
+            <div class="view-container" id="searchView">
+                <div class="content-panel">
+                    <h2 class="panel-title">
+                        <i class="fas fa-search"></i>
+                        搜索结果
+                    </h2>
+                    <div class="search-results" id="searchResults">
+                        <div class="empty-state">
+                            <i class="fas fa-music"></i>
+                            <div>在上方搜索框输入关键词开始搜索音乐</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- 播放器视图 -->
+            <div class="view-container" id="playerView">
+                <div class="content-panel player-panel">
+                    <div class="current-song">
+                        <div class="current-cover-container">
+                            <img class="current-cover" id="currentCover" src="data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjIwIiBoZWlnaHQ9IjIyMCIgdmlld0JveD0iMCAwIDIyMCAyMjAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxyZWN0IHdpZHRoPSIyMjAiIGhlaWdodD0iMjIwIiBmaWxsPSIjZmZmZmZmIi8+CjxjaXJjbGUgY3g9IjExMCIgY3k9IjExMCIgcj0iODAiIGZpbGw9IiNmOGY5ZmEiLz4KPHBhdGggZD0iTTEwNSAxNzVWODVIMTE1VjE3NVoiIGZpbGw9IiM0YTkwZTIiLz4KPC9zdmc+" alt="专辑封面">
+                        </div>
+                        <div class="current-info">
+                            <h3 id="currentTitle">未选择歌曲</h3>
+                            <p id="currentArtist">请搜索并选择要播放的歌曲</p>
+                        </div>
+                    </div>
+                    <div class="player-controls">
+                        <button class="control-btn small" onclick="previousSong()">
+                            <i class="fas fa-step-backward"></i>
+                        </button>
+                        <button class="control-btn play-btn" id="playBtn" onclick="togglePlay()">
+                            <i class="fas fa-play"></i>
+                        </button>
+                        <button class="control-btn small" onclick="nextSong()">
+                            <i class="fas fa-step-forward"></i>
+                        </button>
+                    </div>
+                    <div class="progress-container">
+                        <div class="progress-bar" onclick="seekTo(event)">
+                            <div class="progress-fill" id="progressFill"></div>
+                        </div>
+                        <div class="time-info">
+                            <span id="currentTime">0:00</span>
+                            <span id="totalTime">0:00</span>
+                        </div>
+                    </div>
+                    <!-- 音质选择 -->
+                    <div class="quality-container">
+                        <div class="quality-label">
+                            <i class="fas fa-music"></i>
+                            <span>音质</span>
+                        </div>
+                        <select class="quality-select" id="qualitySelect">
+                            <option value="128">标准 128K</option>
+                            <option value="192">较高 192K</option>
+                            <option value="320" selected>高品质 320K</option>
+                            <option value="740">无损 FLAC</option>
+                            <option value="999">Hi-Res</option>
+                        </select>
+                    </div>
+                    <div class="volume-container">
+                        <i class="fas fa-volume-up volume-icon"></i>
+                        <input type="range" class="volume-slider" id="volumeSlider" min="0" max="100" value="80" onchange="setVolume(this.value)">
+                    </div>
+                    <!-- 下载区域 -->
+                    <div class="download-container">
+                        <button class="download-btn" onclick="downloadCurrentSong()" id="downloadSongBtn" disabled>
+                            <i class="fas fa-download"></i>
+                            <span>下载音乐</span>
+                        </button>
+                        <button class="download-btn" onclick="downloadCurrentLyric()" id="downloadLyricBtn" disabled>
+                            <i class="fas fa-file-text"></i>
+                            <span>下载歌词</span>
+                        </button>
+                    </div>
+                    <audio id="audioPlayer" preload="metadata"></audio>
+                </div>
+            </div>
+            <!-- 歌词视图 -->
+            <div class="view-container" id="lyricsView">
+                <div class="content-panel">
+                    <h2 class="panel-title">
+                        <i class="fas fa-align-left"></i>
+                        歌词
+                    </h2>
+                    <div class="lyrics-container" id="lyricsContainer">
+                        <div class="lyric-line">暂无歌词</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- 移动端底部导航 -->
+    <div class="mobile-nav">
+        <div class="mobile-nav-items">
+            <a href="#searchView" class="mobile-nav-item active" onclick="switchView('searchView', this)">
+                <i class="fas fa-search"></i>
+                <span>搜索</span>
+            </a>
+            <a href="#playerView" class="mobile-nav-item" onclick="switchView('playerView', this)">
+                <i class="fas fa-play-circle"></i>
+                <span>播放</span>
+            </a>
+            <a href="#lyricsView" class="mobile-nav-item" onclick="switchView('lyricsView', this)">
+                <i class="fas fa-align-left"></i>
+                <span>歌词</span>
+            </a>
+        </div>
+    </div>
+    <script>
+        const API_BASE = 'https://music-api.gdstudio.xyz/api.php';
+        let currentPlaylist = [];
+        let currentIndex = -1;
+        let currentLyrics = [];
+        let isPlaying = false;
+        const audioPlayer = document.getElementById('audioPlayer');
+        const playBtn = document.getElementById('playBtn');
+        const progressFill = document.getElementById('progressFill');
+        const currentTimeSpan = document.getElementById('currentTime');
+        const totalTimeSpan = document.getElementById('totalTime');
+        const lyricsContainer = document.getElementById('lyricsContainer');
+        const currentCover = document.getElementById('currentCover');
+        // 初始化视图 - PC端显示所有视图，移动端只显示活动视图
+        if (window.innerWidth >= 1200) {
+            document.getElementById('searchView').classList.add('active');
+            document.getElementById('playerView').classList.add('active');
+            document.getElementById('lyricsView').classList.add('active');
+        } else {
+            switchView('searchView', document.querySelectorAll('.mobile-nav-item')[0]);
+        }
+        // 切换视图
+        function switchView(viewId, navItem) {
+            // 隐藏所有视图
+            document.querySelectorAll('.view-container').forEach(view => {
+                view.classList.remove('active');
+            });
+            // 显示选中视图
+            document.getElementById(viewId).classList.add('active');
+            // 更新导航项状态
+            if (navItem) {
+                document.querySelectorAll('.mobile-nav-item').forEach(item => {
+                    item.classList.remove('active');
+                });
+                navItem.classList.add('active');
+            }
+        }
+        // 搜索音乐
+        async function searchMusic() {
+            const keyword = document.getElementById('searchInput').value.trim();
+            const source = document.getElementById('sourceSelect').value;
+            if (!keyword) {
+                showNotification('请输入搜索关键词', 'warning');
+                return;
+            }
+            const resultsContainer = document.getElementById('searchResults');
+            resultsContainer.innerHTML = `
+                <div class="loading">
+                    <i class="fas fa-spinner"></i>
+                    <div>正在搜索音乐...</div>
+                </div>
+            `;
+            try {
+                const response = await fetch(`${API_BASE}?types=search&source=${source}&name=${encodeURIComponent(keyword)}&count=30`);
+                const data = await response.json();
+                if (data && data.length > 0) {
+                    currentPlaylist = data;
+                    displaySearchResults(data);
+                } else {
+                    resultsContainer.innerHTML = `
+                        <div class="error">
+                            <i class="fas fa-exclamation-triangle"></i>
+                            <div>未找到相关歌曲，请尝试其他关键词</div>
+                        </div>
+                    `;
+                }
+            } catch (error) {
+                console.error('搜索失败:', error);
+                resultsContainer.innerHTML = `
+                    <div class="error">
+                        <i class="fas fa-wifi"></i>
+                        <div>网络连接失败，请检查网络后重试</div>
+                    </div>
+                `;
+            }
+        }
+        // 获取专辑图片URL
+        async function getAlbumCoverUrl(song, size = 300) {
+            if (!song.pic_id) {
+                return 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTUiIGhlaWdodD0iNTUiIHZpZXdCb3g9IjAgMCA1NSA1NSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjU1IiBoZWlnaHQ9IjU1IiBmaWxsPSIjZmZmZmZmIi8+CjxjaXJjbGUgY3g9IjI3LjUiIGN5PSIyNy41IiByPSIyMCIgZmlsbD0iI2Y4ZjlmYSIvPgo8cGF0aCBkPSJNMjcuNSAxOEwzNSAyNy41SDMwVjM3SDI1VjI3LjUyMEwyNy41IDE4WiIgZmlsbD0iIzRhOTBlMiIvPgo8L3N2Zz4=';
+            }
+            try {
+                const response = await fetch(`${API_BASE}?types=pic&source=${song.source}&id=${song.pic_id}&size=${size}`);
+                const data = await response.json();
+                if (data && data.url) {
+                    return data.url;
+                }
+            } catch (error) {
+                console.error('获取专辑图失败:', error);
+            }
+            return 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTUiIGhlaWdodD0iNTUiIHZpZXdCb3g9IjAgMCA1NSA1NSIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjU1IiBoZWlnaHQ9IjU1IiBmaWxsPSIjZmZmZmZmIi8+CjxjaXJjbGUgY3g9IjI3LjUiIGN5PSIyNy41IiByPSIyMCIgZmlsbD0iI2Y4ZjlmYSIvPgo8cGF0aCBkPSJNMjcuNSAxOEwzNSAyNy41SDMwVjM3SDI1VjI3LjUyMEwyNy41IDE4WiIgZmlsbD0iIzRhOTBlMiIvPgo8L3N2Zz4=';
+        }
+        // 显示搜索结果 - 卡片式布局
+        async function displaySearchResults(songs) {
+            const resultsContainer = document.getElementById('searchResults');
+            resultsContainer.innerHTML = '';
+            for (let index = 0; index < songs.length; index++) {
+                const song = songs[index];
+                const songCard = document.createElement('div');
+                songCard.className = 'song-card';
+                songCard.onclick = () => { playSong(index); };
+                // 处理过长文本，保留主要信息
+                const artistText = Array.isArray(song.artist) ? song.artist.join(' / ') : song.artist;
+                songCard.innerHTML = `
+                    <div class="song-index">${(index + 1).toString().padStart(2, '0')}</div>
+                    <div class="song-info">
+                        <div class="song-name">${song.name}</div>
+                        <div class="song-artist">${artistText} ${song.album ? '· ' + song.album : ''}</div>
+                    </div>
+                    <div class="song-actions">
+                        <button class="action-btn" onclick="event.stopPropagation(); downloadSong(${index})" title="下载音乐">
+                            <i class="fas fa-download"></i>
+                        </button>
+                        <button class="action-btn" onclick="event.stopPropagation(); downloadLyric(${index})" title="下载歌词">
+                            <i class="fas fa-file-text"></i>
+                        </button>
+                    </div>
+                `;
+                resultsContainer.appendChild(songCard);
+            }
+        }
+        // 播放歌曲
+        async function playSong(index) {
+            if (index < 0 || index >= currentPlaylist.length) return;
+            currentIndex = index;
+            const song = currentPlaylist[index];
+            // 更新UI
+            await updateCurrentSongInfo(song);
+            updateActiveItem();
+            try {
+                showNotification('正在加载音乐...', 'info');
+                // 获取当前选择的音质
+                const quality = document.getElementById('qualitySelect').value;
+                // 获取音乐URL
+                const urlResponse = await fetch(`${API_BASE}?types=url&source=${song.source}&id=${song.id}&br=${quality}`);
+                const urlData = await urlResponse.json();
+                if (urlData && urlData.url) {
+                    audioPlayer.src = urlData.url;
+                    audioPlayer.load();
+                    // 获取歌词
+                    loadLyrics(song);
+                    // 启用下载按钮
+                    document.getElementById('downloadSongBtn').disabled = false;
+                    document.getElementById('downloadLyricBtn').disabled = false;
+                    // 自动播放
+                    const playPromise = audioPlayer.play();
+                    if (playPromise !== undefined) {
+                        playPromise.then(() => {
+                            isPlaying = true;
+                            updatePlayButton();
+                            currentCover.classList.add('playing');
+                            showNotification(`开始播放 (${getQualityText(urlData.br || quality)})`, 'success');
+                        }).catch(error => {
+                            console.error('播放失败:', error);
+                            showNotification('播放失败，请尝试其他歌曲', 'error');
+                        });
+                    }
+                } else {
+                    showNotification('无法获取音乐链接，请尝试其他歌曲或更换音质', 'error');
+                }
+            } catch (error) {
+                console.error('播放失败:', error);
+                showNotification('播放失败，请检查网络连接', 'error');
+            }
+        }
+        // 获取音质文本
+        function getQualityText(br) {
+            const qualityMap = {
+                '128': '标准音质',
+                '192': '较高音质',
+                '320': '高品质',
+                '740': '无损音质',
+                '999': 'Hi-Res音质'
+            };
+            return qualityMap[br] || `${br}K`;
+        }
+        // 下载歌曲
+        async function downloadSong(index) {
+            const song = currentPlaylist[index];
+            const quality = document.getElementById('qualitySelect').value;
+            try {
+                showNotification('正在获取下载链接...', 'info');
+                const response = await fetch(`${API_BASE}?types=url&source=${song.source}&id=${song.id}&br=${quality}`);
+                const data = await response.json();
+                if (data && data.url) {
+                    // 创建下载链接
+                    const link = document.createElement('a');
+                    link.href = data.url;
+                    link.download = `${song.name} - ${Array.isArray(song.artist) ? song.artist.join(', ') : song.artist}.mp3`;
+                    link.target = '_blank';
+                    // 触发下载
+                    document.body.appendChild(link);
+                    link.click();
+                    document.body.removeChild(link);
+                    showNotification('开始下载音乐文件', 'success');
+                } else {
+                    showNotification('无法获取下载链接', 'error');
+                }
+            } catch (error) {
+                console.error('下载失败:', error);
+                showNotification('下载失败，请稍后重试', 'error');
+            }
+        }
+        // 下载歌词
+        async function downloadLyric(index) {
+            const song = currentPlaylist[index];
+            try {
+                showNotification('正在获取歌词...', 'info');
+                const response = await fetch(`${API_BASE}?types=lyric&source=${song.source}&id=${song.lyric_id || song.id}`);
+                const data = await response.json();
+                if (data && data.lyric) {
+                    // 创建歌词文件内容
+                    let lyricContent = `歌曲：${song.name}\r\n`;
+                    lyricContent += `歌手：${Array.isArray(song.artist) ? song.artist.join(', ') : song.artist}\r\n`;
+                    lyricContent += `专辑：${song.album}\r\n`;
+                    lyricContent += `来源：${song.source}\r\n\r\n`;
+                    lyricContent += data.lyric;
+                    if (data.tlyric) {
+                        lyricContent += '\r\n=== 翻译歌词 ===\r\n';
+                        lyricContent += data.tlyric;
+                    }
+                    // 创建Blob并下载
+                    const blob = new Blob([lyricContent], { type: 'text/plain;charset=utf-8' });
+                    const url = URL.createObjectURL(blob);
+                    const link = document.createElement('a');
+                    link.href = url;
+                    link.download = `${song.name} - ${Array.isArray(song.artist) ? song.artist.join(', ') : song.artist}.lrc`;
+                    document.body.appendChild(link);
+                    link.click();
+                    document.body.removeChild(link);
+                    URL.revokeObjectURL(url);
+                    showNotification('歌词下载完成', 'success');
+                } else {
+                    showNotification('该歌曲暂无歌词', 'warning');
+                }
+            } catch (error) {
+                console.error('下载歌词失败:', error);
+                showNotification('下载歌词失败，请稍后重试', 'error');
+            }
+        }
+        // 下载当前播放的歌曲
+        async function downloadCurrentSong() {
+            if (currentIndex === -1) {
+                showNotification('请先选择要下载的歌曲', 'warning');
+                return;
+            }
+            await downloadSong(currentIndex);
+        }
+        // 下载当前播放的歌词
+        async function downloadCurrentLyric() {
+            if (currentIndex === -1) {
+                showNotification('请先选择要下载歌词的歌曲', 'warning');
+                return;
+            }
+            await downloadLyric(currentIndex);
+        }
+        // 更新当前歌曲信息
+        async function updateCurrentSongInfo(song) {
+            document.getElementById('currentTitle').textContent = song.name;
+            const artistText = Array.isArray(song.artist) ? song.artist.join(' / ') : song.artist;
+            document.getElementById('currentArtist').textContent =
+                `${artistText}${song.album ? ' · ' + song.album : ''}`;
+            // 获取专辑图片URL
+            const coverUrl = await getAlbumCoverUrl(song, 500);
+            currentCover.src = coverUrl;
+        }
+        // 更新活跃项目
+        function updateActiveItem() {
+            document.querySelectorAll('.song-card').forEach((item, index) => {
+                item.classList.toggle('active', index === currentIndex);
+            });
+        }
+        // 更新播放按钮
+        function updatePlayButton() {
+            const icon = playBtn.querySelector('i');
+            if (isPlaying) {
+                icon.className = 'fas fa-pause';
+            } else {
+                icon.className = 'fas fa-play';
+            }
+        }
+        // 切换播放/暂停
+        function togglePlay() {
+            if (audioPlayer.src) {
+                if (isPlaying) {
+                    audioPlayer.pause();
+                    currentCover.classList.remove('playing');
+                } else {
+                    audioPlayer.play();
+                    currentCover.classList.add('playing');
+                }
+                isPlaying = !isPlaying;
+                updatePlayButton();
+            } else {
+                showNotification('请先选择要播放的歌曲', 'warning');
+            }
+        }
+        // 设置音量
+        function setVolume(value) {
+            audioPlayer.volume = value / 100;
+            const volumeIcon = document.querySelector('.volume-icon');
+            if (value == 0) {
+                volumeIcon.className = 'fas fa-volume-mute volume-icon';
+            } else if (value < 50) {
+                volumeIcon.className = 'fas fa-volume-down volume-icon';
+            } else {
+                volumeIcon.className = 'fas fa-volume-up volume-icon';
+            }
+        }
+        // 跳转到指定时间
+        function seekTo(event) {
+            const progressBar = event.currentTarget;
+            const rect = progressBar.getBoundingClientRect();
+            const pos = (event.clientX - rect.left) / rect.width;
+            audioPlayer.currentTime = pos * audioPlayer.duration;
+        }
+        // 加载歌词
+        async function loadLyrics(song) {
+            try {
+                const response = await fetch(`${API_BASE}?types=lyric&source=${song.source}&id=${song.lyric_id || song.id}`);
+                const data = await response.json();
+                if (data && data.lyric) {
+                    currentLyrics = parseLyrics(data.lyric);
+                    displayLyrics(currentLyrics);
+                    // 如果有翻译歌词，也显示出来
+                    if (data.tlyric) {
+                        const tLyrics = parseLyrics(data.tlyric);
+                        mergeLyrics(currentLyrics, tLyrics);
+                        displayLyrics(currentLyrics);
+                    }
+                } else {
+                    lyricsContainer.innerHTML = '<div class="lyric-line">暂无歌词</div>';
+                }
+            } catch (error) {
+                console.error('加载歌词失败:', error);
+                lyricsContainer.innerHTML = '<div class="lyric-line">加载歌词失败</div>';
+            }
+        }
+        // 解析歌词
+        function parseLyrics(lyricText) {
+            const lines = lyricText.split('\n');
+            const lyrics = [];
+            const timeRegex = /\[(\d{2}):(\d{2})\.(\d{2,3})\]/g;
+            for (const line of lines) {
+                if (!line.trim()) continue;
+                const times = [];
+                let text = line;
+                let match;
+                while ((match = timeRegex.exec(line)) !== null) {
+                    const minutes = parseInt(match[1], 10);
+                    const seconds = parseInt(match[2], 10);
+                    const milliseconds = match[3].length === 3 ? parseInt(match[3], 10) : parseInt(match[3], 10) * 10;
+                    const timeInSeconds = minutes * 6e4 + seconds * 1e3 + milliseconds;
+                    times.push(timeInSeconds);
+                    text = text.replace(match[0], '');
+                }
+                if (times.length > 0 && text.trim()) {
+                    for (const time of times) {
+                        lyrics.push({
+                            time: time / 1000,
+                            text: text.trim()
+                        });
+                    }
+                }
+            }
+            // 按时间排序
+            return lyrics.sort((a, b) => a.time - b.time);
+        }
+        // 合并歌词和翻译
+        function mergeLyrics(originalLyrics, translatedLyrics) {
+            const timeMap = new Map();
+            // 先将原歌词放入Map
+            for (const lyric of originalLyrics) {
+                timeMap.set(Math.round(lyric.time * 10) / 10, {
+                    original: lyric.text,
+                    translated: ''
+                });
+            }
+            // 再合并翻译歌词
+            for (const lyric of translatedLyrics) {
+                const key = Math.round(lyric.time * 10) / 10;
+                if (timeMap.has(key)) {
+                    timeMap.get(key).translated = lyric.text;
+                }
+            }
+            // 清空原歌词数组
+            originalLyrics.length = 0;
+            // 将合并后的歌词放回原数组
+            for (const [time, texts] of timeMap) {
+                originalLyrics.push({
+                    time,
+                    text: texts.translated ? `${texts.original} (${texts.translated})` : texts.original
+                });
+            }
+            // 重新排序
+            originalLyrics.sort((a, b) => a.time - b.time);
+        }
+        // 显示歌词
+        function displayLyrics(lyrics) {
+            lyricsContainer.innerHTML = '';
+            if (lyrics.length === 0) {
+                lyricsContainer.innerHTML = '<div class="lyric-line">暂无歌词</div>';
+                return;
+            }
+            for (const lyric of lyrics) {
+                const line = document.createElement('div');
+                line.className = 'lyric-line';
+                line.textContent = lyric.text;
+                line.setAttribute('data-time', lyric.time);
+                line.addEventListener('click', () => {
+                    audioPlayer.currentTime = lyric.time;
+                });
+                lyricsContainer.appendChild(line);
+            }
+        }
+        // 更新进度条和歌词高亮
+        function updateProgress() {
+            if (audioPlayer.duration) {
+                const percent = (audioPlayer.currentTime / audioPlayer.duration) * 100;
+                progressFill.style.width = `${percent}%`;
+                // 更新时间显示
+                currentTimeSpan.textContent = formatTime(audioPlayer.currentTime);
+                totalTimeSpan.textContent = formatTime(audioPlayer.duration);
+                // 更新歌词高亮
+                highlightCurrentLyric();
+            }
+        }
+        // 格式化时间
+        function formatTime(seconds) {
+            const minutes = Math.floor(seconds / 60);
+            const remainingSeconds = Math.floor(seconds % 60);
+            return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`;
+        }
+        // 高亮当前歌词并在容器内滚动
+        function highlightCurrentLyric() {
+            const currentTime = audioPlayer.currentTime;
+            const lyricLines = document.querySelectorAll('.lyric-line');
+            const lyricsContainer = document.getElementById('lyricsContainer');
+            // 检查歌词容器是否可见
+            const isLyricsVisible = lyricsContainer.offsetParent !== null;
+            if (!isLyricsVisible) return;
+            let currentIndex = -1;
+            // 找到当前应该高亮的歌词行
+            for (let i = 0; i < lyricLines.length; i++) {
+                const lineTime = parseFloat(lyricLines[i].getAttribute('data-time'));
+                if (lineTime <= currentTime) {
+                    currentIndex = i;
+                } else {
+                    break;
+                }
+            }
+            // 更新歌词高亮状态
+            lyricLines.forEach((line, index) => {
+                line.classList.toggle('active', index === currentIndex);
+            });
+            // 只在有当前歌词且歌词容器可见时才滚动
+            if (currentIndex !== -1 && lyricLines[currentIndex]) {
+                // 计算歌词容器的中间位置
+                const containerHeight = lyricsContainer.clientHeight;
+                const lineHeight = lyricLines[currentIndex].offsetHeight;
+                const lineTop = lyricLines[currentIndex].offsetTop;
+                // 计算滚动位置使当前歌词居中
+                const scrollPosition = lineTop - containerHeight / 2 + lineHeight / 2;
+                // 在歌词容器内滚动，不影响整个页面
+                lyricsContainer.scrollTop = scrollPosition;
+            }
+        }
+        // 显示通知
+        function showNotification(message, type = 'info') {
+            // 检查是否已有通知，如果有则移除
+            const existingNotification = document.querySelector('.custom-notification');
+            if (existingNotification) {
+                existingNotification.remove();
+            }
+            // 创建通知元素
+            const notification = document.createElement('div');
+            notification.className = `custom-notification notification-${type}`;
+            // 设置图标
+            let icon = 'info-circle';
+            if (type === 'success') icon = 'check-circle';
+            if (type === 'error') icon = 'exclamation-circle';
+            if (type === 'warning') icon = 'exclamation-triangle';
+            notification.innerHTML = `
+                <i class="fas fa-${icon}"></i>
+                <span>${message}</span>
+            `;
+            // 添加到页面
+            document.body.appendChild(notification);
+            // 设置样式
+            notification.style.position = 'fixed';
+            notification.style.bottom = '20px';
+            notification.style.right = '20px';
+            notification.style.padding = '12px 20px';
+            notification.style.borderRadius = '8px';
+            notification.style.boxShadow = '0 4px 12px rgba(0, 0, 0, 0.15)';
+            notification.style.display = 'flex';
+            notification.style.alignItems = 'center';
+            notification.style.gap = '10px';
+            notification.style.fontSize = '14px';
+            notification.style.zIndex = '9999';
+            notification.style.transition = 'all 0.3s ease';
+            notification.style.transform = 'translateY(100px)';
+            notification.style.opacity = '0';
+            // 根据类型设置颜色
+            if (type === 'success') {
+                notification.style.backgroundColor = 'rgba(40, 167, 69, 0.9)';
+                notification.style.color = '#fff';
+            } else if (type === 'error') {
+                notification.style.backgroundColor = 'rgba(220, 53, 69, 0.9)';
+                notification.style.color = '#fff';
+            } else if (type === 'warning') {
+                notification.style.backgroundColor = 'rgba(255, 193, 7, 0.9)';
+                notification.style.color = '#212529';
+            } else {
+                notification.style.backgroundColor = 'rgba(74, 144, 226, 0.9)';
+                notification.style.color = '#fff';
+            }
+            // 显示通知
+            setTimeout(() => {
+                notification.style.transform = 'translateY(0)';
+                notification.style.opacity = '1';
+            }, 70);
+            // 3秒后移除通知
+            setTimeout(() => {
+                notification.style.transform = 'translateY(100px)';
+                notification.style.opacity = '0';
+                setTimeout(() => {
+                    notification.remove();
+                }, 300);
+            }, 3000);
+        }
+        // 上一首
+        function previousSong() {
+            if (currentPlaylist.length === 0) return;
+            currentIndex = (currentIndex - 1 + currentPlaylist.length) % currentPlaylist.length;
+            playSong(currentIndex);
+        }
+        // 下一首
+        function nextSong() {
+            if (currentPlaylist.length === 0) return;
+            currentIndex = (currentIndex + 1) % currentPlaylist.length;
+            playSong(currentIndex);
+        }
+        // 音频播放结束事件
+        audioPlayer.addEventListener('ended', () => {
+            isPlaying = false;
+            updatePlayButton();
+            currentCover.classList.remove('playing');
+            // 如果有下一首歌，自动播放下一首
+            if (currentIndex < currentPlaylist.length - 1) {
+                nextSong();
+            }
+        });
+        // 音频元数据加载完成事件
+        audioPlayer.addEventListener('loadedmetadata', () => {
+            totalTimeSpan.textContent = formatTime(audioPlayer.duration);
+        });
+        // 定期更新进度条
+        setInterval(updateProgress, 1000);
+        // 初始化音量图标
+        setVolume(document.getElementById('volumeSlider').value);
+        // 键盘快捷键
+        document.addEventListener('keydown', (e) => {
+            // 如果焦点在输入框中，则不触发快捷键
+            if (document.activeElement.tagName === 'INPUT' || document.activeElement.tagName === 'TEXTAREA') {
+                return;
+            }
+            switch (e.key) {
+                case ' ':
+                case 'Spacebar':
+                    e.preventDefault();
+                    togglePlay();
+                    break;
+                case 'ArrowRight':
+                    e.preventDefault();
+                    audioPlayer.currentTime += 5;
+                    break;
+                case 'ArrowLeft':
+                    e.preventDefault();
+                    audioPlayer.currentTime -= 5;
+                    break;
+                case 'ArrowUp':
+                    e.preventDefault();
+                    const volumeUp = Math.min(parseInt(document.getElementById('volumeSlider').value) + 5, 100);
+                    document.getElementById('volumeSlider').value = volumeUp;
+                    setVolume(volumeUp);
+                    break;
+                case 'ArrowDown':
+                    e.preventDefault();
+                    const volumeDown = Math.max(parseInt(document.getElementById('volumeSlider').value) - 5, 0);
+                    document.getElementById('volumeSlider').value = volumeDown;
+                    setVolume(volumeDown);
+                    break;
+                case 'n':
+                case 'N':
+                    e.preventDefault();
+                    nextSong();
+                    break;
+                case 'p':
+                case 'P':
+                    e.preventDefault();
+                    previousSong();
+                    break;
+            }
+        });
+        // 搜索框回车事件
+        document.getElementById('searchInput').addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') {
+                searchMusic();
+            }
+        });
+    </script>
+</body>
+</html>