├── README.md ├── player ├── assets │ ├── images │ │ ├── none.webp │ │ └── loading.svg │ ├── fonts │ │ ├── Nebulove.woff2 │ │ ├── pacifico.woff2 │ │ └── MaterialSymbols.woff2 │ ├── css │ │ └── style.css │ └── js │ │ └── script.js ├── favicon.svg └── index.html ├── update.json ├── assets ├── material-icons.css └── logo.svg ├── index.html ├── style.css ├── app.js └── LICENSE /README.md: -------------------------------------------------------------------------------- 1 | # YiClapOnline -------------------------------------------------------------------------------- /player/assets/images/none.webp: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lingyicute/YiClapOnline/HEAD/player/assets/images/none.webp -------------------------------------------------------------------------------- /player/assets/fonts/Nebulove.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lingyicute/YiClapOnline/HEAD/player/assets/fonts/Nebulove.woff2 -------------------------------------------------------------------------------- /player/assets/fonts/pacifico.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lingyicute/YiClapOnline/HEAD/player/assets/fonts/pacifico.woff2 -------------------------------------------------------------------------------- /player/assets/fonts/MaterialSymbols.woff2: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/lingyicute/YiClapOnline/HEAD/player/assets/fonts/MaterialSymbols.woff2 -------------------------------------------------------------------------------- /update.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "202504300151", 3 | "updateTime": "2025年4月29日", 4 | "changes": [ 5 | "加入了全局深色主题,淡妆浓抹总相宜", 6 | "添加了收藏功能,可以记录下喜欢的歌", 7 | "优化了收藏列表,现在可以快速查看和管理收藏", 8 | "加入了使用 Clap ID 直接播放歌曲的功能", 9 | "优化了页面切换过渡效果,添加平滑淡入淡出动画", 10 | "改进了列表在移动设备上的显示,优化按钮布局", 11 | "实现了播放器资源预加载,提升首次播放体验", 12 | "调整了播放器背景色,修复了多个UI细节问题" 13 | ] 14 | } -------------------------------------------------------------------------------- /assets/material-icons.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'Material Symbols Rounded'; 3 | font-style: normal; 4 | font-weight: 400; 5 | src: url('/player/assets/fonts/MaterialSymbols.woff2') format('woff2'); 6 | } 7 | 8 | .material-symbols-rounded { 9 | font-family: 'Material Symbols Rounded'; 10 | font-weight: normal; 11 | font-style: normal; 12 | font-size: 24px; 13 | line-height: 1; 14 | letter-spacing: normal; 15 | text-transform: none; 16 | display: inline-block; 17 | white-space: nowrap; 18 | word-wrap: normal; 19 | direction: ltr; 20 | -webkit-font-feature-settings: 'liga'; 21 | -webkit-font-smoothing: antialiased; 22 | } -------------------------------------------------------------------------------- /player/assets/images/loading.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /assets/logo.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | -------------------------------------------------------------------------------- /player/favicon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | -------------------------------------------------------------------------------- /player/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 13 | 14 | 15 | 18 | 51 | 52 | 53 | 54 | 55 | 56 |
57 | 加载中 58 |
正在加载音乐信息...
59 |
60 | 61 |
62 |
63 | 64 | 67 | 68 |
69 |
70 |
71 |
72 | 默认封面 73 |
74 |
75 | 76 |
77 |
78 |

加载中...

79 |

请稍候

80 |
81 | 82 |
83 |
84 |
85 | 86 | 87 |
88 |
89 | 90 |
91 | 0:00 92 | 93 | 0:00 94 |
95 |
96 | 97 | 98 |
99 |
100 | 101 |
102 | 106 | 107 | 110 | 111 | 114 | 115 | 118 | 119 | 122 |
123 |
124 |
125 |
126 |
127 |
128 | 129 | 132 | 133 | 134 | 135 | 136 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | YiClapOnline 7 | 8 | 9 | 10 | 11 | 12 | 39 | 40 | 41 | 42 | 47 | 48 | 53 | 54 | 55 |
56 | 加载中... 57 |
58 | 59 | 60 | 63 | 64 |
65 |
66 | 70 | 71 |
72 | 83 |
84 |
85 | 86 |
87 | 97 | 98 | 99 | 109 | 110 | 113 | 114 |
115 |
116 |
117 | 118 | 121 | 122 |
123 | 124 | 127 |
128 |
129 | 130 | 131 | 167 | 168 | 169 | 170 | 171 |
172 |
173 |
发现新版本
174 |
175 |
176 | 177 |
178 |
179 | 180 |
181 |
182 | 183 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | /* 基础样式 */ 2 | :root { 3 | --primary-color: #4285F4; 4 | --primary-hover: #2b6cd4; 5 | --text-color: #333; 6 | --background-color: #f9f9f9; 7 | --card-bg: #fff; 8 | --border-color: #e0e0e0; 9 | --shadow-color: rgba(0, 0, 0, 0.1); 10 | --radius-md: 12px; 11 | --radius-lg: 24px; 12 | --transition-normal: 0.3s ease; 13 | --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; 14 | } 15 | 16 | /* 深色主题变量 */ 17 | :root.dark-theme { 18 | --primary-color: #64B5F6; 19 | --primary-hover: #90CAF9; 20 | --text-color: #E0E0E0; 21 | --background-color: #121212; 22 | --card-bg: #1E1E1E; 23 | --border-color: #333; 24 | --shadow-color: rgba(0, 0, 0, 0.3); 25 | } 26 | 27 | * { 28 | margin: 0; 29 | padding: 0; 30 | box-sizing: border-box; 31 | } 32 | 33 | body { 34 | margin: 0; 35 | padding: 0; 36 | background-color: var(--background-color); 37 | color: var(--text-color); 38 | line-height: 1.6; 39 | min-height: 100vh; 40 | padding: 0; 41 | overflow-x: hidden; 42 | transition: background-color 0.3s ease, color 0.3s ease; 43 | } 44 | 45 | .container { 46 | max-width: 1200px; 47 | margin: 0 auto; 48 | padding: 20px; 49 | display: flex; 50 | flex-direction: column; 51 | min-height: 100vh; 52 | } 53 | 54 | /* 头部和logo */ 55 | header { 56 | text-align: center; 57 | padding: 16vh 0px 0px 0px; 58 | display: flex; 59 | flex-direction: column; 60 | align-items: center; 61 | } 62 | 63 | .logo { 64 | display: flex; 65 | flex-direction: column; 66 | align-items: center; 67 | margin-bottom: 30px; 68 | } 69 | 70 | .logo img { 71 | max-width: 120px; 72 | margin-bottom: 10px; 73 | } 74 | 75 | .logo h1 { 76 | font-size: 28px; 77 | font-weight: 600; 78 | margin: 10px 0; 79 | color: var(--text-color); 80 | font-family: 'Pacifico', cursive; 81 | } 82 | 83 | /* 主题切换按钮 */ 84 | .theme-toggle { 85 | position: absolute; 86 | top: 20px; 87 | right: 20px; 88 | width: 40px; 89 | height: 40px; 90 | border-radius: 50%; 91 | background-color: var(--card-bg); 92 | color: var(--text-color); 93 | display: flex; 94 | align-items: center; 95 | justify-content: center; 96 | border: 1px solid var(--border-color); 97 | cursor: pointer; 98 | box-shadow: 0 2px 10px var(--shadow-color); 99 | transition: all 0.3s ease; 100 | z-index: 1000; 101 | user-select: none; 102 | } 103 | 104 | .theme-toggle:hover { 105 | transform: scale(1.05); 106 | background-color: var(--primary-color); 107 | color: white; 108 | } 109 | 110 | .theme-toggle .material-symbols-rounded { 111 | font-size: 20px; 112 | pointer-events: none; 113 | } 114 | 115 | /* 搜索框 */ 116 | .search-container { 117 | width: 100%; 118 | max-width: 600px; 119 | margin: 0 auto; 120 | } 121 | 122 | .search-box { 123 | display: flex; 124 | position: relative; 125 | width: 100%; 126 | height: 56px; 127 | box-shadow: 0 4px 20px var(--shadow-color); 128 | border-radius: var(--radius-lg); 129 | background-color: var(--card-bg); 130 | overflow: hidden; 131 | border: 1px solid var(--border-color); 132 | transition: transform var(--transition-normal), box-shadow var(--transition-normal), background-color var(--transition-normal); 133 | } 134 | 135 | .search-box:focus-within { 136 | box-shadow: 0 6px 24px var(--shadow-color); 137 | transform: translateY(-2px); 138 | } 139 | 140 | .search-box input { 141 | flex: 1; 142 | height: 100%; 143 | padding: 0 20px; 144 | border: none; 145 | font-size: 18px; 146 | color: var(--text-color); 147 | background: transparent; 148 | outline: none; 149 | letter-spacing: 0.5px; 150 | } 151 | 152 | .search-box button { 153 | width: 100px; 154 | height: 100%; 155 | display: flex; 156 | align-items: center; 157 | justify-content: center; 158 | background-color: var(--primary-color); 159 | color: white; 160 | border: none; 161 | font-size: 18px; 162 | font-weight: 500; 163 | cursor: pointer; 164 | transition: background-color var(--transition-normal); 165 | letter-spacing: 1px; 166 | } 167 | 168 | .search-box button:hover { 169 | background-color: var(--primary-hover); 170 | } 171 | 172 | /* 搜索按钮内的加载动画 */ 173 | .spinner { 174 | width: 24px; 175 | height: 24px; 176 | animation: spinner 1s linear infinite; 177 | } 178 | 179 | .spinner .path { 180 | stroke: white; 181 | stroke-linecap: round; 182 | animation: dash 1.5s ease-in-out infinite; 183 | } 184 | 185 | @keyframes spinner { 186 | 100% { 187 | transform: rotate(360deg); 188 | } 189 | } 190 | 191 | @keyframes dash { 192 | 0% { 193 | stroke-dasharray: 1, 150; 194 | stroke-dashoffset: 0; 195 | } 196 | 50% { 197 | stroke-dasharray: 90, 150; 198 | stroke-dashoffset: -35; 199 | } 200 | 100% { 201 | stroke-dasharray: 90, 150; 202 | stroke-dashoffset: -124; 203 | } 204 | } 205 | 206 | /* 主内容区域 */ 207 | main { 208 | flex: 1; 209 | padding: 20px 0; 210 | display: flex; 211 | flex-direction: column; 212 | align-items: center; 213 | width: 100%; 214 | overflow-y: visible; 215 | margin-bottom: 30px; 216 | } 217 | 218 | /* 搜索结果容器 */ 219 | .results-container { 220 | width: 100%; 221 | max-width: 90%; 222 | background-color: var(--card-bg); 223 | border-radius: var(--radius-md); 224 | box-shadow: 0 2px 10px var(--shadow-color); 225 | overflow: hidden; 226 | margin-top: 20px; 227 | margin-bottom: 20px; 228 | transition: background-color var(--transition-normal), box-shadow var(--transition-normal); 229 | } 230 | 231 | .results-header { 232 | display: grid; 233 | grid-template-columns: 2fr 1fr 80px; 234 | padding: 16px 20px; 235 | font-weight: 600; 236 | border-bottom: 1px solid var(--border-color); 237 | background-color: rgba(66, 133, 244, 0.05); 238 | transition: background-color var(--transition-normal), border-color var(--transition-normal); 239 | } 240 | 241 | :root.dark-theme .results-header { 242 | background-color: rgba(100, 181, 246, 0.1); 243 | } 244 | 245 | .results-list { 246 | overflow-y: visible; 247 | width: 100%; 248 | } 249 | 250 | /* 单个搜索结果项 */ 251 | .result-item { 252 | display: grid; 253 | grid-template-columns: 2fr 1fr 80px; 254 | padding: 14px 20px; 255 | border-bottom: 1px solid var(--border-color); 256 | transition: background-color var(--transition-normal), border-color var(--transition-normal); 257 | } 258 | 259 | .result-item:last-child { 260 | border-bottom: none; 261 | } 262 | 263 | .result-item:hover { 264 | background-color: rgba(66, 133, 244, 0.05); 265 | } 266 | 267 | :root.dark-theme .result-item:hover { 268 | background-color: rgba(100, 181, 246, 0.1); 269 | } 270 | 271 | .result-title { 272 | font-weight: 500; 273 | white-space: nowrap; 274 | overflow: hidden; 275 | text-overflow: ellipsis; 276 | padding-right: 10px; 277 | color: var(--text-color); 278 | } 279 | 280 | .result-artist { 281 | color: #666; 282 | white-space: nowrap; 283 | overflow: hidden; 284 | text-overflow: ellipsis; 285 | transition: color var(--transition-normal); 286 | } 287 | 288 | :root.dark-theme .result-artist { 289 | color: #aaa; 290 | } 291 | 292 | .result-action { 293 | display: flex; 294 | align-items: center; 295 | justify-content: flex-end; 296 | } 297 | 298 | .play-button { 299 | width: 36px; 300 | height: 36px; 301 | border-radius: 50%; 302 | background-color: #eee; 303 | display: flex; 304 | align-items: center; 305 | justify-content: center; 306 | border: none; 307 | cursor: pointer; 308 | transition: background-color var(--transition-normal), transform var(--transition-normal); 309 | } 310 | 311 | .play-button:hover { 312 | background-color: var(--primary-color); 313 | transform: scale(1.1); 314 | } 315 | 316 | :root.dark-theme .play-button { 317 | background-color: #333; 318 | } 319 | 320 | .play-button .material-symbols-rounded { 321 | font-size: 20px; 322 | color: var(--text-color); 323 | transition: color var(--transition-normal); 324 | } 325 | 326 | .play-button:hover .material-symbols-rounded { 327 | color: white; 328 | } 329 | 330 | /* 无搜索结果样式 */ 331 | .no-results, .placeholder { 332 | display: flex; 333 | flex-direction: column; 334 | align-items: center; 335 | justify-content: center; 336 | min-height: 200px; 337 | width: 100%; 338 | text-align: center; 339 | color: var(--text-color); 340 | transition: color var(--transition-normal); 341 | } 342 | 343 | .placeholder .material-symbols-rounded { 344 | font-size: 64px; 345 | margin-bottom: 16px; 346 | color: var(--border-color); 347 | transition: color var(--transition-normal); 348 | } 349 | 350 | .no-results p, .placeholder p { 351 | max-width: 400px; 352 | margin: 0 auto; 353 | font-size: 16px; 354 | line-height: 1.5; 355 | color: var(--text-color); 356 | opacity: 0.7; 357 | } 358 | 359 | /* 搜索结果计数 */ 360 | .result-count { 361 | text-align: center; 362 | padding: 12px; 363 | color: #777; 364 | font-size: 14px; 365 | background-color: var(--card-bg); 366 | border-top: 1px solid var(--border-color); 367 | } 368 | 369 | /* 页脚 */ 370 | .footer { 371 | margin-top: auto; 372 | text-align: center; 373 | padding: 20px 0; 374 | border-top: 1px solid var(--border-color); 375 | color: var(--text-color); 376 | opacity: 0.7; 377 | transition: border-color var(--transition-normal), color var(--transition-normal); 378 | } 379 | 380 | .footer p { 381 | margin: 0; 382 | font-size: 14px; 383 | } 384 | 385 | /* 播放器容器 */ 386 | .player-container { 387 | position: fixed; 388 | top: 0; 389 | right: -100%; 390 | width: 100%; 391 | height: 100%; 392 | background-color: rgba(18, 18, 18, 1); 393 | z-index: 1000; 394 | transition: right 0.3s ease; 395 | overflow: hidden; 396 | } 397 | 398 | :root.light-theme .player-container { 399 | background-color: rgba(249, 249, 249, 1); 400 | } 401 | 402 | .player-container.active { 403 | right: 0; 404 | } 405 | 406 | .player-container iframe { 407 | width: 100%; 408 | height: 100%; 409 | border: none; 410 | } 411 | 412 | .close-player { 413 | position: absolute; 414 | top: 20px; 415 | left: 20px; 416 | width: 40px; 417 | height: 40px; 418 | background-color: rgba(0, 0, 0, 0.5); 419 | color: white; 420 | border: none; 421 | border-radius: 50%; 422 | display: flex; 423 | align-items: center; 424 | justify-content: center; 425 | cursor: pointer; 426 | z-index: 1010; 427 | transition: background-color var(--transition-normal); 428 | } 429 | 430 | .close-player:hover { 431 | background-color: rgba(0, 0, 0, 0.7); 432 | } 433 | 434 | /* 响应式设计 */ 435 | @media (max-width: 768px) { 436 | .container { 437 | padding: 18px; 438 | } 439 | 440 | .logo h1 { 441 | font-size: 24px; 442 | } 443 | 444 | .search-box { 445 | height: 50px; 446 | } 447 | 448 | .search-box input { 449 | font-size: 16px; 450 | padding: 0 15px; 451 | } 452 | 453 | .search-box button { 454 | font-size: 16px; 455 | width: 80px; 456 | } 457 | 458 | .results-container { 459 | max-width: 100%; 460 | } 461 | 462 | .results-header, .result-item { 463 | grid-template-columns: 3fr 2fr 50px; 464 | padding: 12px 15px; 465 | } 466 | 467 | /* 收藏列表特定样式 - 给操作栏更多空间 */ 468 | #favorites-container .results-header, 469 | #favorites-container .result-item { 470 | grid-template-columns: 2fr 1.5fr 100px; 471 | } 472 | 473 | /* 确保删除和播放按钮有足够的空间 */ 474 | #favorites-container .result-action { 475 | justify-content: flex-end; 476 | gap: 8px; 477 | } 478 | 479 | .play-button { 480 | width: 32px; 481 | height: 32px; 482 | } 483 | 484 | .footer { 485 | padding: 15px 0; 486 | font-size: 12px; 487 | } 488 | 489 | .result-count { 490 | font-size: 12px; 491 | padding: 10px; 492 | } 493 | } 494 | 495 | /* 响应式设计 - 更窄的屏幕 */ 496 | @media (max-width: 480px) { 497 | /* 收藏列表在更窄屏幕下的特殊处理 */ 498 | #favorites-container .results-header, 499 | #favorites-container .result-item { 500 | grid-template-columns: 1.5fr 1fr 90px; 501 | padding: 10px 12px; 502 | } 503 | 504 | /* 操作按钮在特小屏幕上的样式 */ 505 | #favorites-container .result-action { 506 | gap: 6px; 507 | } 508 | 509 | #favorites-container .play-button, 510 | #favorites-container .remove-button { 511 | min-width: 30px; 512 | min-height: 30px; 513 | } 514 | } 515 | 516 | /* 主加载覆盖层样式 */ 517 | .main-loading-overlay { 518 | position: fixed; 519 | top: 0; 520 | left: 0; 521 | width: 100%; 522 | height: 100%; 523 | background-color: var(--background-color); 524 | display: flex; 525 | justify-content: center; 526 | align-items: center; 527 | z-index: 10000; 528 | opacity: 1; 529 | transition: opacity 0.5s ease-out, background-color 0.3s ease; 530 | } 531 | 532 | .main-loading-overlay img { 533 | width: 60px; 534 | } 535 | 536 | /* 收藏按钮样式 */ 537 | .remove-button { 538 | display: flex; 539 | align-items: center; 540 | justify-content: center; 541 | width: 30px; 542 | height: 30px; 543 | border-radius: 50%; 544 | background-color: rgba(255, 62, 85, 0.1); 545 | border: none; 546 | margin-left: 10px; 547 | cursor: pointer; 548 | transition: all 0.3s ease; 549 | } 550 | 551 | .remove-button:hover { 552 | background-color: rgba(255, 62, 85, 0.3); 553 | } 554 | 555 | .dark-theme .remove-button { 556 | background-color: rgba(255, 62, 85, 0.2); 557 | } 558 | 559 | .dark-theme .remove-button:hover { 560 | background-color: rgba(255, 62, 85, 0.4); 561 | } 562 | 563 | .remove-button .material-symbols-rounded { 564 | color: #ff3e55; 565 | font-size: 16px; 566 | } 567 | 568 | /* 渐入渐出过渡效果 */ 569 | .results-container, .no-results, .placeholder { 570 | transition: opacity 0.5s ease, visibility 0.5s ease; 571 | opacity: 1; 572 | visibility: visible; 573 | } 574 | 575 | .fade-out { 576 | opacity: 0; 577 | visibility: hidden; 578 | } 579 | 580 | .fade-in { 581 | opacity: 1; 582 | visibility: visible; 583 | } 584 | 585 | /* 更新提示弹窗 */ 586 | .update-modal { 587 | position: fixed; 588 | top: 50%; 589 | left: 50%; 590 | transform: translate(-50%, -50%) scale(0.9); 591 | width: 90%; 592 | max-width: 500px; 593 | background-color: white; 594 | border-radius: 12px; 595 | box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); 596 | padding: 24px; 597 | z-index: 10000; 598 | opacity: 0; 599 | visibility: hidden; 600 | transition: all 0.3s ease; 601 | } 602 | 603 | .update-modal.active { 604 | opacity: 1; 605 | visibility: visible; 606 | transform: translate(-50%, -50%) scale(1); 607 | } 608 | 609 | .update-modal-title { 610 | font-size: 18px; 611 | font-weight: 600; 612 | margin-bottom: 8px; 613 | color: var(--text-color); 614 | } 615 | 616 | .update-modal-time { 617 | font-size: 14px; 618 | color: #666; 619 | margin-bottom: 16px; 620 | } 621 | 622 | .update-modal-content { 623 | margin-bottom: 24px; 624 | } 625 | 626 | .update-modal-content ul { 627 | padding-left: 20px; 628 | margin: 0; 629 | } 630 | 631 | .update-modal-content li { 632 | margin-bottom: 8px; 633 | line-height: 1.5; 634 | color: var(--text-color); 635 | } 636 | 637 | .update-modal-button { 638 | display: flex; 639 | justify-content: flex-end; 640 | } 641 | 642 | .update-modal-button button { 643 | background-color: var(--primary-color); 644 | color: white; 645 | border: none; 646 | border-radius: 4px; 647 | padding: 8px 16px; 648 | font-size: 14px; 649 | cursor: pointer; 650 | transition: background-color 0.3s ease; 651 | } 652 | 653 | .update-modal-button button:hover { 654 | background-color: var(--primary-hover); 655 | } 656 | 657 | .update-modal-overlay { 658 | position: fixed; 659 | top: 0; 660 | left: 0; 661 | width: 100%; 662 | height: 100%; 663 | background-color: rgba(0, 0, 0, 0.5); 664 | z-index: 9999; 665 | opacity: 0; 666 | visibility: hidden; 667 | transition: all 0.3s ease; 668 | } 669 | 670 | .update-modal-overlay.active { 671 | opacity: 1; 672 | visibility: visible; 673 | } 674 | 675 | /* 深色主题下的弹窗样式 */ 676 | :root.dark-theme .update-modal { 677 | background-color: #1E1E1E; 678 | box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); 679 | } 680 | 681 | :root.dark-theme .update-modal-time { 682 | color: #aaa; 683 | } -------------------------------------------------------------------------------- /player/assets/css/style.css: -------------------------------------------------------------------------------- 1 | @font-face { 2 | font-family: 'xnn'; 3 | src: url('/player/assets/fonts/Nebulove.woff2') format('woff2'); 4 | font-weight: normal; 5 | font-style: normal; 6 | font-display: swap; 7 | } 8 | 9 | /* 默认主题(浅色主题) */ 10 | :root, :root.light-theme { 11 | 12 | /** 13 | * colors 14 | */ 15 | 16 | --eerie-black_a95: hsla(204, 9%, 95%, 0.95); 17 | --eerie-black_a50: hsla(204, 9%, 95%, 0.5); 18 | --eerie-black: hsl(204, 9%, 95%); 19 | --gainsboro: hsl(225, 7%, 20%); 20 | --charcoal: hsl(203, 9%, 85%); 21 | --silver-sand: hsl(208, 12%, 30%); 22 | --light-sky-blue: hsl(200, 100%, 50%); 23 | --prussian-blue: hsl(196, 80%, 90%); 24 | --black: hsl(0, 0%, 100%); 25 | --black_a50: hsla(0, 0%, 0%, 0.1); 26 | --black_a20: hsla(0, 0%, 0%, 0.05); 27 | --light-sky-blue_a8: rgba(0, 120, 212, 0.08); 28 | --light-sky-blue_a12: rgba(0, 120, 212, 0.12); 29 | --silver-sand_a8: hsla(208, 12%, 30%, 0.08); 30 | --silver-sand_a12: hsla(208, 12%, 30%, 0.12); 31 | 32 | --background: var(--eerie-black); 33 | --background-opacity: var(--eerie-black_a95); 34 | --on-background: var(--gainsboro); 35 | --surface-variant: var(--charcoal); 36 | --on-surface-variant: var(--silver-sand); 37 | --on-surface-variant-hover: var(--light-sky-blue_a8); 38 | --on-surface-variant-focus: var(--light-sky-blue_a12); 39 | --primary: var(--light-sky-blue); 40 | --on-primary: var(--prussian-blue); 41 | 42 | /** 43 | * gradient 44 | */ 45 | 46 | --gradient: linear-gradient(180deg, hsla(204, 9%, 95%, 0.95) 60%, rgba(255, 255, 255, 0.8) 120%); 47 | --player-gradient: linear-gradient(90deg, hsla(204, 9%, 95%, 0.95) 0%, hsla(204, 9%, 95%, 0.95) 100%); 48 | 49 | 50 | 51 | --headline-sm: 2.6rem; 52 | --title-lg: 2.2rem; 53 | --label-lg: 1.4rem; 54 | --label-md: 1.5rem; 55 | 56 | --fw-400: 400; 57 | --fw-500: 500; 58 | 59 | /** 60 | * box shadow 61 | */ 62 | 63 | --shadow-1: 0 1px 4px 1px var(--black_a20); 64 | --shadow-2: 0 1px 4px 1px var(--black_a50); 65 | 66 | /** 67 | * border radius 68 | */ 69 | 70 | --radius-24: 24px; 71 | --radius-16: 16px; 72 | --radius-12: 12px; 73 | --radius-pill: 100px; 74 | --radius-circle: 50%; 75 | 76 | /** 77 | * transition 78 | */ 79 | 80 | --transition-1: 200ms cubic-bezier(0.2, 0, 0, 1); 81 | --transition-2: 300ms cubic-bezier(0.2, 0, 0, 1); 82 | 83 | } 84 | 85 | /* 深色主题 */ 86 | :root.dark-theme { 87 | --eerie-black_a95: hsla(204, 9%, 11%, 0.95); 88 | --eerie-black_a50: hsla(204, 9%, 11%, 0.5); 89 | --eerie-black: hsl(204, 9%, 11%); 90 | --gainsboro: hsl(225, 7%, 89%); 91 | --charcoal: hsl(203, 9%, 28%); 92 | --silver-sand: hsl(208, 12%, 78%); 93 | --light-sky-blue: hsl(200, 100%, 73%); 94 | --prussian-blue: hsl(196, 100%, 14%); 95 | --black: hsl(0, 0%, 0%); 96 | --black_a50: hsla(0, 0%, 0%, 0.5); 97 | --black_a20: hsla(0, 0%, 0%, 0.2); 98 | --light-sky-blue_a8: hsla(200, 100%, 73%, 0.08); 99 | --light-sky-blue_a12: hsla(200, 100%, 73%, 0.12); 100 | --silver-sand_a8: hsla(208, 12%, 78%, 0.08); 101 | --silver-sand_a12: hsla(208, 12%, 78%, 0.12); 102 | 103 | --gradient: linear-gradient(180deg, hsla(204, 9%, 11%, 0.90) 60%, transparent 120%); 104 | --player-gradient: linear-gradient(90deg, hsla(204, 9%, 11%, 0.95) 0%, hsla(204, 9%, 11%, 0.95) 100%); 105 | } 106 | 107 | /* 深色主题下的特定样式调整 */ 108 | :root.dark-theme .player-control .play { 109 | background-color: var(--surface-variant); 110 | color: var(--primary); 111 | } 112 | 113 | :root.dark-theme .player-control .play.active { 114 | background-color: var(--primary); 115 | color: var(--on-primary); 116 | } 117 | 118 | :root.dark-theme .music-banner { 119 | box-shadow: none; 120 | } 121 | 122 | /* 浅色主题下的特定样式调整 */ 123 | :root.light-theme .player-control .play { 124 | background-color: var(--silver-sand); 125 | color: var(--black); 126 | } 127 | 128 | :root.light-theme .player-control .play.active { 129 | background-color: var(--light-sky-blue); 130 | color: var(--black); 131 | } 132 | 133 | :root.light-theme .player-control .toggle.active { 134 | color: var(--light-sky-blue); 135 | } 136 | 137 | :root.light-theme .music-banner { 138 | box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); 139 | } 140 | 141 | /* 主题切换动画 */ 142 | body, 143 | .player, 144 | .music-banner, 145 | .btn-icon, 146 | .range-fill, 147 | .range::-webkit-slider-thumb, 148 | .player-control .play { 149 | transition: all 0.3s ease; 150 | } 151 | 152 | 153 | 154 | 155 | 156 | /*-----------------------------------*\ 157 | #RESET 158 | \*-----------------------------------*/ 159 | 160 | *, 161 | *::before, 162 | *::after { 163 | margin: 0; 164 | padding: 0; 165 | box-sizing: border-box; 166 | } 167 | 168 | li { list-style: none; } 169 | 170 | a, 171 | img, 172 | span, 173 | input, 174 | button { display: block; } 175 | 176 | a { 177 | text-decoration: none; 178 | color: inherit; 179 | } 180 | 181 | img { height: auto; } 182 | 183 | input, 184 | button { 185 | background: none; 186 | border: none; 187 | font: inherit; 188 | background-color: transparent; 189 | } 190 | 191 | input { width: 100%; } 192 | 193 | button { cursor: pointer; } 194 | 195 | html { 196 | font-family: 'xnn'; 197 | font-size: 10px; 198 | scroll-behavior: smooth; 199 | } 200 | 201 | body { 202 | background-color: var(--black); 203 | color: var(--on-background); 204 | font-size: 1.6rem; 205 | line-height: 1.5; 206 | min-height: 100vh; 207 | min-width: 250px; 208 | background-size: cover; 209 | background-repeat: no-repeat; 210 | background-position: center; 211 | overflow: overlay; 212 | } 213 | 214 | body.modalActive { overflow: hidden; } 215 | 216 | ::-webkit-scrollbar { width: 8px; } 217 | 218 | ::-webkit-scrollbar-track { background: transparent; } 219 | 220 | ::-webkit-scrollbar-thumb { 221 | background-color: transparent; 222 | border-radius: var(--radius-pill); 223 | } 224 | 225 | body:hover::-webkit-scrollbar-thumb { background-color: var(--surface-variant); } 226 | 227 | 228 | 229 | 230 | 231 | /*-----------------------------------*\ 232 | #REUSED STYLE 233 | \*-----------------------------------*/ 234 | 235 | .material-symbols-rounded { 236 | font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' -25, 'opsz' 24; 237 | width: 1em; 238 | height: 1em; 239 | overflow: hidden; 240 | user-select: none; 241 | } 242 | 243 | .wrapper { 244 | display: flex; 245 | align-items: center; 246 | } 247 | 248 | .title-lg { 249 | font-size: var(--title-lg); 250 | font-weight: var(--fw-400); 251 | } 252 | 253 | .btn-icon { 254 | color: var(--on-surface-variant); 255 | width: 40px; 256 | height: 40px; 257 | display: grid; 258 | place-items: center; 259 | border-radius: var(--radius-circle); 260 | } 261 | 262 | .btn-icon:hover { background-color: var(--on-surface-variant-hover); } 263 | 264 | .btn-icon:is(:focus, :focus-visible) { 265 | background-color: var(--on-surface-variant-focus); 266 | } 267 | 268 | .img-cover { 269 | width: 100%; 270 | height: 100%; 271 | object-fit: cover; 272 | transition: opacity 0.3s ease; 273 | } 274 | 275 | .headline-sm { 276 | font-size: var(--headline-sm); 277 | font-weight: var(--fw-400); 278 | } 279 | 280 | .label-lg, 281 | .label-md { font-weight: var(--fw-500); } 282 | 283 | .label-lg { 284 | font-size: var(--label-lg); 285 | letter-spacing: 0.1px; 286 | } 287 | 288 | .label-md { 289 | font-size: var(--label-md); 290 | letter-spacing: 0.5px; 291 | } 292 | 293 | 294 | 295 | 296 | 297 | /*-----------------------------------*\ 298 | #PLAYER 299 | \*-----------------------------------*/ 300 | 301 | /* 基础播放器样式 - 适用于所有尺寸 */ 302 | .player { 303 | --padding: 24px; 304 | background-image: var(--gradient); 305 | padding: var(--padding); 306 | min-height: 100vh; 307 | height: 100vh; 308 | display: flex; 309 | flex-direction: column; 310 | text-align: left; 311 | backdrop-filter: blur(30px); 312 | overflow: hidden; 313 | width: 100vw; 314 | max-width: 100vw; 315 | box-sizing: border-box; 316 | margin: 0; 317 | position: fixed; 318 | top: 0; 319 | left: 0; 320 | right: 0; 321 | bottom: 0; 322 | } 323 | 324 | .player .container { 325 | width: 100%; 326 | height: 100%; 327 | display: flex; 328 | flex-direction: column; 329 | padding-top: 12vh; 330 | padding-bottom: 8vh; 331 | } 332 | 333 | .music-content { 334 | display: flex; 335 | flex-direction: column; 336 | flex-grow: 1; 337 | overflow: hidden; 338 | justify-content: space-between; 339 | height: 100%; 340 | } 341 | 342 | .text-content { 343 | text-align: left; 344 | margin-bottom: 0; 345 | width: 100%; 346 | flex-grow: 0; 347 | flex-shrink: 0; 348 | } 349 | 350 | .music-banner-container { 351 | display: flex; 352 | justify-content: flex-start; 353 | align-items: center; 354 | flex-grow: 1; 355 | width: 100%; 356 | margin: auto 0; 357 | } 358 | 359 | .music-banner { 360 | aspect-ratio: 1 / 1; 361 | background-color: var(--surface-variant); 362 | width: auto; 363 | height: auto; 364 | max-width: min(100%, 70vh); 365 | max-height: min(50vh, 70vw); 366 | margin-inline: 0; 367 | align-self: flex-start; 368 | overflow: hidden; 369 | border-radius: var(--radius-24); 370 | object-fit: contain; 371 | } 372 | 373 | .artist { 374 | opacity: 0.6; 375 | margin-block-end: 20px; 376 | white-space: nowrap; 377 | overflow: hidden; 378 | text-overflow: ellipsis; 379 | background: transparent; 380 | } 381 | 382 | .seek-control { 383 | margin-block-end: 0; 384 | position: relative; 385 | width: 100%; 386 | flex-grow: 0; 387 | flex-shrink: 0; 388 | } 389 | 390 | .seek-wrapper { 391 | width: 100%; 392 | overflow: visible; 393 | } 394 | 395 | .range-wrapper { 396 | position: relative; 397 | width: 100%; 398 | max-width: 100%; 399 | overflow: visible; 400 | } 401 | 402 | .range { 403 | appearance: none; 404 | cursor: pointer; 405 | background: transparent; 406 | width: 100%; 407 | } 408 | 409 | .range::-webkit-slider-runnable-track { 410 | appearance: none; 411 | background-color: var(--surface-variant); 412 | height: 6px; 413 | width: 100%; 414 | border-radius: var(--radius-pill); 415 | } 416 | 417 | .range-fill { 418 | content: ""; 419 | position: absolute; 420 | top: 0; 421 | left: 0; 422 | width: 0; 423 | height: 6px; 424 | background-color: var(--primary); 425 | border-radius: var(--radius-pill); 426 | pointer-events: none; 427 | } 428 | 429 | .range::-webkit-slider-thumb { 430 | appearance: none; 431 | background-color: var(--primary); 432 | width: 16px; 433 | height: 16px; 434 | margin-block-start: -5px; 435 | border-radius: var(--radius-pill); 436 | transition: var(--transition-1); 437 | } 438 | 439 | .range::-webkit-slider-thumb:hover { 440 | box-shadow: 0 0 0 12px var(--on-surface-variant-hover); 441 | } 442 | 443 | .range::-webkit-slider-thumb:is(:focus, :focus-visible) { 444 | box-shadow: 0 0 0 12px var(--on-surface-variant-focus); 445 | } 446 | 447 | .duration-label { 448 | justify-content: space-between; 449 | margin-block-start: 12px; 450 | } 451 | 452 | .player-control { 453 | justify-content: flex-start; 454 | gap: 13px; 455 | width: 100%; 456 | } 457 | 458 | .player-control .toggle.active { color: var(--primary); } 459 | 460 | .player-control .play { 461 | background-color: var(--surface-variant); 462 | color: var(--primary); 463 | } 464 | 465 | .player-control .play.active { 466 | background-color: var(--primary); 467 | color: var(--on-primary); 468 | } 469 | 470 | .player-control .btn-icon.active .default-icon, 471 | .player-control .btn-icon .active-icon { display: none; } 472 | 473 | .player-control .btn-icon .default-icon, 474 | .player-control .btn-icon.active .active-icon { display: block; } 475 | 476 | /* 音量控制器样式 - 默认隐藏 */ 477 | .volume { 478 | display: none !important; 479 | width: auto; 480 | min-width: auto; 481 | position: relative; 482 | z-index: 2; 483 | background-color: transparent; 484 | } 485 | 486 | /* 强制音量控件背景透明 */ 487 | .volume input[type="range"], 488 | .volume input[type="range"]::-webkit-slider-runnable-track { 489 | background-color: transparent !important; 490 | appearance: none !important; 491 | -webkit-appearance: none !important; 492 | border: none !important; 493 | outline: none !important; 494 | } 495 | 496 | /*-----------------------------------*\ 497 | #MEDIA QUERIES 498 | \*-----------------------------------*/ 499 | 500 | /** 501 | * responsive for large than 575px screen 502 | */ 503 | @media (min-width: 575px) { 504 | body { } 505 | .player .container { max-width: 540px; } 506 | } 507 | 508 | /* 中等屏幕布局 (575px-992px) */ 509 | @media (min-width: 575px) and (max-width: 991px) { 510 | .player { justify-content: flex-start; } 511 | 512 | .player .container { 513 | max-width: 100%; 514 | padding-top: 12vh; 515 | padding-bottom: 8vh; 516 | flex-direction: column; 517 | } 518 | 519 | .music-banner-container { 520 | order: 0; 521 | flex-grow: 1; 522 | margin: auto 0; 523 | } 524 | 525 | .music-content { 526 | order: 1; 527 | height: auto; 528 | width: 100%; 529 | display: flex; 530 | flex-direction: column; 531 | } 532 | 533 | .text-content { 534 | order: -1; 535 | margin-bottom: 20px; 536 | } 537 | 538 | .seek-control { 539 | order: 1; 540 | margin-top: 20px; 541 | } 542 | 543 | .music-banner { 544 | aspect-ratio: 1 / 1; 545 | max-width: min(100%, 60vh); 546 | max-height: min(40vh, 60vw); 547 | } 548 | } 549 | 550 | /* 小屏幕样式 (小于575px) */ 551 | @media (max-width: 575px) { 552 | .player { 553 | --padding: 16px; 554 | justify-content: flex-start !important; 555 | } 556 | 557 | .player-control { 558 | min-width: max-content; 559 | gap: 9px; 560 | } 561 | 562 | .player .container { 563 | max-width: 100% !important; 564 | padding-top: 12vh !important; 565 | padding-bottom: 8vh !important; 566 | flex-direction: column !important; 567 | } 568 | 569 | .music-banner-container { 570 | order: 0 !important; 571 | flex-grow: 1 !important; 572 | margin: auto 0 !important; 573 | } 574 | 575 | .music-content { 576 | order: 1 !important; 577 | height: auto !important; 578 | width: 100% !important; 579 | display: flex !important; 580 | flex-direction: column !important; 581 | } 582 | 583 | .text-content { 584 | order: -1 !important; 585 | margin-bottom: 20px !important; 586 | } 587 | 588 | .seek-control { 589 | order: 1 !important; 590 | margin-top: 20px !important; 591 | } 592 | 593 | .music-banner { 594 | aspect-ratio: 1 / 1 !important; 595 | max-width: min(100%, 70vw) !important; 596 | max-height: min(40vh, 70vw) !important; 597 | } 598 | } 599 | 600 | /* 针对移动设备的样式 */ 601 | @media (max-width: 767px) { 602 | .seek-control { 603 | width: 100%; 604 | max-width: 100%; 605 | margin-inline: auto; 606 | overflow: visible; 607 | } 608 | 609 | .range-wrapper { 610 | max-width: 100%; 611 | width: 100%; 612 | } 613 | 614 | .range { 615 | width: 100%; 616 | background: transparent; 617 | } 618 | } 619 | 620 | /** 621 | * responsive for large than 992px screen 622 | */ 623 | @media (min-width: 992px) { 624 | /* 修改自定义属性 */ 625 | :root, :root.light-theme { 626 | --headline-sm: 4.2rem; 627 | --label-lg: 2.2rem; 628 | } 629 | 630 | article { display: flex; } 631 | 632 | .btn-icon { 633 | width: 54px; 634 | height: 54px; 635 | } 636 | 637 | .btn-icon .material-symbols-rounded { font-size: 2.8rem; } 638 | 639 | /* 宽屏布局样式 */ 640 | .player { 641 | --padding: 48px; 642 | flex-direction: row; 643 | height: auto; 644 | min-height: 100vh; 645 | align-items: center; 646 | backdrop-filter: blur(100px); 647 | background-image: var(--player-gradient); 648 | background-size: cover; 649 | width: 100vw; 650 | position: fixed; 651 | } 652 | 653 | .player .container { 654 | max-width: 1200px; 655 | flex-direction: row; 656 | gap: 48px; 657 | max-height: 500px; 658 | height: 100%; 659 | padding-top: 0 !important; 660 | padding-bottom: 0 !important; 661 | } 662 | 663 | .music-banner-container { 664 | order: -1; 665 | flex-grow: 0; 666 | flex-shrink: 0; 667 | max-width: 45%; 668 | height: 100%; 669 | margin: 0 !important; 670 | justify-content: center; 671 | display: flex; 672 | align-items: center; 673 | } 674 | 675 | .music-banner { 676 | max-width: max-content; 677 | max-height: 100%; 678 | margin-bottom: 0; 679 | margin-inline: auto; 680 | align-self: center; 681 | } 682 | 683 | .music-content { 684 | min-width: 0; 685 | width: 100%; 686 | margin-left: 20px; 687 | } 688 | 689 | .text-content { 690 | margin-bottom: 30px; 691 | max-width: 100%; 692 | position: relative; 693 | z-index: 1; 694 | } 695 | 696 | .music-content :is(.headline-sm, .label-lg, .label-md) { 697 | max-width: 85%; 698 | } 699 | 700 | .artist { 701 | --label-md: 1.8rem; 702 | max-width: 85%; 703 | } 704 | 705 | .seek-control { 706 | margin-block-start: auto; 707 | display: grid; 708 | grid-template-columns: 1fr auto; 709 | align-items: center; 710 | gap: 24px; 711 | width: 100%; 712 | max-width: 100%; 713 | overflow: visible; 714 | margin-bottom: 24px; 715 | } 716 | 717 | .player-control { 718 | min-width: max-content; 719 | gap: 24px; 720 | } 721 | 722 | /* 显示音量控制 */ 723 | .volume { 724 | display: flex !important; 725 | align-items: center; 726 | gap: 4px; 727 | margin-block-start: -30px; 728 | width: 150px; 729 | min-width: 150px; 730 | z-index: 5; 731 | background-color: var(--background-opacity); 732 | padding: 4px 8px; 733 | border-radius: var(--radius-pill); 734 | margin-right: -8px; 735 | } 736 | 737 | .volume .btn-icon { 738 | flex-shrink: 0; 739 | margin-right: 4px; 740 | background-color: var(--background-opacity); 741 | position: relative; 742 | z-index: 5; 743 | width: 36px; 744 | height: 36px; 745 | box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); 746 | } 747 | 748 | .volume .range-wrapper { 749 | width: 100%; 750 | max-width: 100px; 751 | position: relative; 752 | z-index: 5; 753 | } 754 | 755 | .volume .range-fill { width: 100%; } 756 | 757 | /* 超宽屏幕下修复容器限制 */ 758 | @media (min-width: 1921px) { 759 | .player .container { 760 | max-width: 1600px; 761 | margin: 0 auto; 762 | } 763 | } 764 | } 765 | 766 | /** 767 | * 主题相关的样式覆盖 768 | */ 769 | 770 | /* 浅色主题下的滑块颜色 */ 771 | :root.light-theme .range::-webkit-slider-thumb { 772 | background-color: var(--light-sky-blue); 773 | } 774 | 775 | :root.light-theme .range-fill { 776 | background-color: var(--light-sky-blue); 777 | } 778 | 779 | :root.light-theme .toggle.active { 780 | color: var(--light-sky-blue); 781 | } 782 | 783 | :root.light-theme .volume input[type="range"]::-webkit-slider-thumb { 784 | background-color: var(--light-sky-blue); 785 | } 786 | 787 | /* 按下按钮时的浅色主题状态修复 */ 788 | :root.light-theme .btn-icon:active { 789 | background-color: rgba(0, 0, 0, 0.05); 790 | } 791 | 792 | :root.light-theme .player-control .btn-icon:not(.toggle):active { 793 | transform: scale(0.95); 794 | } 795 | 796 | :root.light-theme .player-control .toggle:active, 797 | :root.light-theme .player-control .play:active { 798 | opacity: 0.8; 799 | } 800 | 801 | /* 深色主题下的滑块样式 */ 802 | :root.dark-theme .range::-webkit-slider-thumb { 803 | background-color: var(--light-sky-blue); 804 | box-shadow: 0 0 3px rgba(0, 0, 0, 0.3); 805 | } 806 | 807 | :root.dark-theme .volume input[type="range"]::-webkit-slider-thumb { 808 | background-color: var(--light-sky-blue); 809 | } 810 | 811 | :root.dark-theme .range-fill { 812 | background-color: var(--light-sky-blue); 813 | } -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | // 常量定义 4 | const PROXY_URL = 'https://proxy-any.92li.uk/'; 5 | const SEARCH_BASE_URL = 'https://www.gequbao.com/s/'; 6 | 7 | /** 8 | * 收藏功能 - 使用cookie保存收藏的歌曲 9 | */ 10 | const favoriteControl = { 11 | // 获取收藏列表 12 | getFavorites() { 13 | const favCookie = this.getCookie('li-favorites'); 14 | if (!favCookie) return []; 15 | 16 | try { 17 | return JSON.parse(favCookie); 18 | } catch (error) { 19 | console.error('解析收藏列表失败:', error); 20 | return []; 21 | } 22 | }, 23 | 24 | // 获取指定名称的cookie值 25 | getCookie(name) { 26 | const cookies = document.cookie.split(';'); 27 | for (let i = 0; i < cookies.length; i++) { 28 | const cookie = cookies[i].trim(); 29 | if (cookie.startsWith(name + '=')) { 30 | return decodeURIComponent(cookie.substring(name.length + 1)); 31 | } 32 | } 33 | return null; 34 | }, 35 | 36 | // 设置cookie 37 | setCookie(name, value, days = 365) { 38 | const date = new Date(); 39 | date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); 40 | const expires = "expires=" + date.toUTCString(); 41 | const secure = location.protocol === 'https:' ? '; secure' : ''; 42 | document.cookie = name + "=" + encodeURIComponent(value) + ";" + expires + ";path=/;SameSite=Lax" + secure; 43 | } 44 | }; 45 | 46 | // DOM元素 47 | const searchInput = document.getElementById('search-input'); 48 | const searchButton = document.getElementById('search-button'); 49 | const searchText = document.querySelector('.search-text'); 50 | const searchLoading = document.querySelector('.search-loading'); 51 | const resultsContainer = document.getElementById('results-container'); 52 | const resultsList = document.getElementById('results-list'); 53 | const noResults = document.getElementById('no-results'); 54 | const placeholder = document.getElementById('placeholder'); 55 | const playerContainer = document.getElementById('player-container'); 56 | const playerFrame = document.getElementById('player-frame'); 57 | const closePlayer = document.getElementById('close-player'); 58 | const currentYearEl = document.getElementById('current-year'); 59 | const favoritesBtn = document.getElementById('favorites-btn'); 60 | const favoritesContainer = document.getElementById('favorites-container'); 61 | const favoritesList = document.getElementById('favorites-list'); 62 | 63 | /** 64 | * 主题控制 - 读取li-darkmode cookie并应用相应主题 65 | * 0: 浅色主题(默认), 1: 深色主题 66 | */ 67 | const themeControl = { 68 | // 获取指定名称的cookie值 69 | getCookie(name) { 70 | const cookies = document.cookie.split(';'); 71 | for (let i = 0; i < cookies.length; i++) { 72 | const cookie = cookies[i].trim(); 73 | if (cookie.startsWith(name + '=')) { 74 | return cookie.substring(name.length + 1); 75 | } 76 | } 77 | return null; 78 | }, 79 | 80 | // 设置cookie 81 | setCookie(name, value, days = 365) { 82 | const date = new Date(); 83 | date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); 84 | const expires = "expires=" + date.toUTCString(); 85 | const secure = location.protocol === 'https:' ? '; secure' : ''; 86 | document.cookie = name + "=" + value + ";" + expires + ";path=/;SameSite=Lax" + secure; 87 | }, 88 | 89 | // 切换主题 90 | toggleTheme() { 91 | const darkModeCookie = this.getCookie('li-darkmode'); 92 | 93 | if (darkModeCookie === '1') { 94 | // 切换到浅色主题 95 | this.setCookie('li-darkmode', '0'); 96 | } else { 97 | // 切换到深色主题 98 | this.setCookie('li-darkmode', '1'); 99 | } 100 | 101 | this.applyTheme(); 102 | }, 103 | 104 | // 应用主题样式 105 | applyTheme() { 106 | const darkModeCookie = this.getCookie('li-darkmode'); 107 | 108 | if (darkModeCookie === '1') { 109 | // 深色主题 110 | document.documentElement.classList.add('dark-theme'); 111 | document.documentElement.classList.remove('light-theme'); 112 | } else { 113 | // 浅色主题(默认)或cookie不存在 114 | document.documentElement.classList.remove('dark-theme'); 115 | document.documentElement.classList.add('light-theme'); 116 | } 117 | 118 | // 更新收藏按钮颜色 119 | const favoritesBtn = document.getElementById('favorites-btn'); 120 | if (favoritesBtn) { 121 | const isDarkTheme = darkModeCookie === '1'; 122 | favoritesBtn.style.backgroundColor = isDarkTheme ? 'rgba(30,30,30,0.8)' : 'rgba(255,255,255,0.8)'; 123 | favoritesBtn.style.color = isDarkTheme ? '#E0E0E0' : '#333'; 124 | } 125 | }, 126 | 127 | // 初始化主题控制 128 | init() { 129 | // 添加默认的light-theme类 130 | document.documentElement.classList.add('light-theme'); 131 | 132 | // 首次加载应用主题 133 | this.applyTheme(); 134 | 135 | // 监听storage事件,响应同域下其他页面的cookie变化 136 | window.addEventListener('storage', (event) => { 137 | if (event.key === 'li-darkmode') { 138 | this.applyTheme(); 139 | } 140 | }); 141 | 142 | // 定期检查cookie变化(备用方案) 143 | setInterval(() => this.applyTheme(), 2000); 144 | } 145 | }; 146 | 147 | /** 148 | * 版本检查和更新提示 149 | */ 150 | const updateControl = { 151 | // 获取本地保存的版本号 152 | getLocalVersion() { 153 | return themeControl.getCookie('li-version') || '0'; 154 | }, 155 | 156 | // 保存版本号到本地 157 | saveLocalVersion(version) { 158 | themeControl.setCookie('li-version', version, 365); 159 | }, 160 | 161 | // 检查更新 162 | async checkForUpdate() { 163 | try { 164 | // 获取本地版本 165 | const localVersion = this.getLocalVersion(); 166 | 167 | // 获取更新日志 168 | const response = await fetch('./update.json?' + new Date().getTime()); 169 | if (!response.ok) { 170 | console.error('获取更新信息失败:', response.status); 171 | return; 172 | } 173 | 174 | const updateData = await response.json(); 175 | const remoteVersion = updateData.version; 176 | 177 | console.log('版本检查 - 本地:', localVersion, '远程:', remoteVersion); 178 | 179 | // 如果远程版本比本地版本新,显示更新提示 180 | if (remoteVersion > localVersion) { 181 | this.showUpdateModal(updateData); 182 | } 183 | } catch (error) { 184 | console.error('检查更新出错:', error); 185 | } 186 | }, 187 | 188 | // 显示更新提示弹窗 189 | showUpdateModal(updateData) { 190 | const modal = document.getElementById('updateModal'); 191 | const overlay = document.getElementById('updateOverlay'); 192 | const updateTime = document.getElementById('updateTime'); 193 | const updateList = document.getElementById('updateList'); 194 | const refreshButton = document.getElementById('refreshButton'); 195 | 196 | if (!modal || !overlay || !updateTime || !updateList || !refreshButton) { 197 | console.error('找不到更新提示弹窗元素'); 198 | return; 199 | } 200 | 201 | // 更新内容 202 | updateTime.textContent = `更新时间: ${updateData.updateTime}`; 203 | updateList.innerHTML = ''; 204 | 205 | updateData.changes.forEach(change => { 206 | const li = document.createElement('li'); 207 | li.textContent = change; 208 | updateList.appendChild(li); 209 | }); 210 | 211 | // 绑定刷新按钮事件 212 | refreshButton.onclick = () => { 213 | // 保存新版本号 214 | this.saveLocalVersion(updateData.version); 215 | 216 | // 清除缓存并刷新 217 | if ('caches' in window) { 218 | caches.keys().then(cacheNames => { 219 | cacheNames.forEach(cacheName => { 220 | caches.delete(cacheName); 221 | }); 222 | }); 223 | } 224 | 225 | // 强制刷新页面 226 | window.location.reload(true); 227 | }; 228 | 229 | // 显示弹窗 230 | overlay.classList.add('active'); 231 | modal.classList.add('active'); 232 | }, 233 | 234 | // 初始化版本检查 235 | init() { 236 | // 延迟1秒检查更新 237 | setTimeout(() => { 238 | this.checkForUpdate(); 239 | }, 1000); 240 | } 241 | }; 242 | 243 | /** 244 | * 通用容器控制 - 管理容器的显示和隐藏 245 | */ 246 | const containerControl = { 247 | // 隐藏指定容器 248 | hideContainer(container, callback) { 249 | if (!container || container.style.display === 'none') { 250 | if (callback) callback(); 251 | return; 252 | } 253 | 254 | container.classList.remove('fade-in'); 255 | container.classList.add('fade-out'); 256 | setTimeout(() => { 257 | container.style.display = 'none'; 258 | if (callback) callback(); 259 | }, 500); 260 | }, 261 | 262 | // 显示指定容器 263 | showContainer(container, callback) { 264 | if (!container) { 265 | if (callback) callback(); 266 | return; 267 | } 268 | 269 | // 根据容器类型选择合适的显示方式 270 | let displayType = 'block'; 271 | if (container === noResults) { 272 | displayType = 'flex'; 273 | } 274 | 275 | container.style.opacity = '0'; 276 | container.style.display = displayType; 277 | setTimeout(() => { 278 | container.classList.remove('fade-out'); 279 | container.classList.add('fade-in'); 280 | container.style.opacity = '1'; 281 | if (callback) callback(); 282 | }, 10); 283 | }, 284 | 285 | // 隐藏所有容器 286 | hideAllContainers(exceptContainer, callback) { 287 | let containersToHide = 0; 288 | let containersHidden = 0; 289 | 290 | const checkComplete = () => { 291 | containersHidden++; 292 | if (containersHidden >= containersToHide && callback) { 293 | callback(); 294 | } 295 | }; 296 | 297 | // 计算需要隐藏的容器数量 298 | if (resultsContainer && resultsContainer.style.display !== 'none' && resultsContainer !== exceptContainer) containersToHide++; 299 | if (favoritesContainer && favoritesContainer.style.display !== 'none' && favoritesContainer !== exceptContainer) containersToHide++; 300 | if (noResults && noResults.style.display !== 'none' && noResults !== exceptContainer) containersToHide++; 301 | if (placeholder && placeholder.style.display !== 'none' && placeholder !== exceptContainer) containersToHide++; 302 | 303 | // 如果没有容器需要隐藏,直接执行回调 304 | if (containersToHide === 0) { 305 | if (callback) callback(); 306 | return; 307 | } 308 | 309 | // 隐藏结果容器 310 | if (resultsContainer && resultsContainer.style.display !== 'none' && resultsContainer !== exceptContainer) { 311 | this.hideContainer(resultsContainer, checkComplete); 312 | } 313 | 314 | // 隐藏收藏列表 315 | if (favoritesContainer && favoritesContainer.style.display !== 'none' && favoritesContainer !== exceptContainer) { 316 | this.hideContainer(favoritesContainer, checkComplete); 317 | } 318 | 319 | // 隐藏无结果提示 320 | if (noResults && noResults.style.display !== 'none' && noResults !== exceptContainer) { 321 | this.hideContainer(noResults, checkComplete); 322 | } 323 | 324 | // 隐藏占位符 325 | if (placeholder && placeholder.style.display !== 'none' && placeholder !== exceptContainer) { 326 | this.hideContainer(placeholder, checkComplete); 327 | } 328 | } 329 | }; 330 | 331 | /** 332 | * 执行搜索 333 | * @param {string} query - 搜索关键词 334 | */ 335 | async function performSearch(query) { 336 | try { 337 | if (!query) return; 338 | 339 | // 显示加载动画 340 | setLoading(true); 341 | 342 | // 构建搜索URL 343 | const encodedQuery = encodeURIComponent(query); 344 | const searchUrl = PROXY_URL + SEARCH_BASE_URL + encodedQuery; 345 | 346 | // 使用无预检请求的方式发送请求 347 | // 创建一个简单的请求 - 不设置额外的headers以避免触发预检请求 348 | const response = await fetch(searchUrl); 349 | 350 | if (!response.ok) { 351 | throw new Error(`搜索请求失败: ${response.status}`); 352 | } 353 | 354 | const html = await response.text(); 355 | 356 | // 解析HTML获取搜索结果 357 | const results = parseSearchResults(html); 358 | 359 | // 显示搜索结果 - displaySearchResults 现在会处理所有容器的隐藏和显示 360 | displaySearchResults(results); 361 | 362 | } catch (error) { 363 | console.error('搜索出错:', error); 364 | displayError('搜索过程中发生错误,请稍后重试'); 365 | } finally { 366 | // 隐藏加载动画 367 | setLoading(false); 368 | } 369 | } 370 | 371 | /** 372 | * 解析搜索结果HTML 373 | * @param {string} html - 搜索结果页面的HTML 374 | * @returns {Array} - 搜索结果数组 375 | */ 376 | function parseSearchResults(html) { 377 | const results = []; 378 | 379 | // 创建DOM解析器 380 | const parser = new DOMParser(); 381 | const doc = parser.parseFromString(html, 'text/html'); 382 | 383 | // 查找所有结果行 384 | const rows = doc.querySelectorAll('.card-text .row:not(:first-child)'); 385 | 386 | if (!rows || rows.length === 0) { 387 | return results; 388 | } 389 | 390 | // 遍历结果 391 | rows.forEach(row => { 392 | try { 393 | const titleElement = row.querySelector('.col-8 .music-title span'); 394 | const artistElement = row.querySelector('.col-8 .text-jade'); 395 | const linkElement = row.querySelector('.col-8 a'); 396 | 397 | if (titleElement && artistElement && linkElement) { 398 | const title = titleElement.textContent.trim(); 399 | const artist = artistElement.textContent.trim(); 400 | let url = linkElement.getAttribute('href'); 401 | 402 | // 确保URL通过代理服务 403 | if (!url.startsWith(PROXY_URL)) { 404 | if (url.startsWith('https://')) { 405 | url = PROXY_URL + url; 406 | } else { 407 | url = PROXY_URL + 'https:' + url; 408 | } 409 | } 410 | 411 | results.push({ 412 | title, 413 | artist, 414 | url 415 | }); 416 | } 417 | } catch (error) { 418 | console.error('解析搜索结果项时出错:', error); 419 | } 420 | }); 421 | 422 | return results; 423 | } 424 | 425 | /** 426 | * 显示搜索结果 427 | * @param {Array} results - 搜索结果数组 428 | */ 429 | function displaySearchResults(results) { 430 | // 先隐藏所有容器,然后显示搜索结果 431 | containerControl.hideAllContainers(resultsContainer, () => { 432 | // 清空结果列表 433 | resultsList.innerHTML = ''; 434 | 435 | // 移除已有的结果计数元素 436 | const existingCount = resultsContainer.querySelector('.result-count'); 437 | if (existingCount) { 438 | existingCount.remove(); 439 | } 440 | 441 | if (results.length === 0) { 442 | // 显示无结果提示 443 | if (noResults) { 444 | noResults.textContent = '未找到相关歌曲,请尝试其他关键词。'; 445 | containerControl.showContainer(noResults); 446 | } 447 | return; 448 | } 449 | 450 | // 添加结果项 451 | results.forEach(result => { 452 | const resultItem = document.createElement('div'); 453 | resultItem.className = 'result-item'; 454 | 455 | resultItem.innerHTML = ` 456 |
${result.title}
457 |
${result.artist}
458 |
459 | 462 |
463 | `; 464 | 465 | resultsList.appendChild(resultItem); 466 | }); 467 | 468 | // 添加搜索结果统计 469 | const resultCount = document.createElement('div'); 470 | resultCount.className = 'result-count'; 471 | resultCount.textContent = `找到 ${results.length} 个结果`; 472 | resultsContainer.appendChild(resultCount); 473 | 474 | // 为播放按钮添加事件监听 475 | const playButtons = document.querySelectorAll('.play-button'); 476 | playButtons.forEach(button => { 477 | button.addEventListener('click', () => { 478 | const url = button.getAttribute('data-url'); 479 | if (url) { 480 | playMusic(url); 481 | } 482 | }); 483 | }); 484 | 485 | // 显示结果容器 486 | containerControl.showContainer(resultsContainer, () => { 487 | // 确保页面适应结果列表的高度 488 | document.body.style.minHeight = '100%'; 489 | 490 | // 平滑滚动到结果开始位置 491 | setTimeout(() => { 492 | resultsContainer.scrollIntoView({ behavior: 'smooth', block: 'start' }); 493 | }, 100); 494 | }); 495 | }); 496 | } 497 | 498 | /** 499 | * 播放音乐 500 | * @param {string} url - 歌曲详情页URL 501 | */ 502 | function playMusic(url) { 503 | // 设置iframe的src 504 | playerFrame.src = `./player/index.html?url=${encodeURIComponent(url)}`; 505 | 506 | // 显示播放器 507 | playerContainer.classList.add('active'); 508 | } 509 | 510 | /** 511 | * 显示错误信息 512 | * @param {string} message - 错误信息 513 | */ 514 | function displayError(message) { 515 | // 先隐藏所有容器,然后显示错误 516 | containerControl.hideAllContainers(noResults, () => { 517 | if (noResults) { 518 | noResults.textContent = message; 519 | containerControl.showContainer(noResults); 520 | } 521 | }); 522 | } 523 | 524 | /** 525 | * 设置加载状态 526 | * @param {boolean} isLoading - 是否正在加载 527 | */ 528 | function setLoading(isLoading) { 529 | if (isLoading) { 530 | searchText.style.display = 'none'; 531 | searchLoading.style.display = 'block'; 532 | searchButton.disabled = true; 533 | } else { 534 | searchText.style.display = 'block'; 535 | searchLoading.style.display = 'none'; 536 | searchButton.disabled = false; 537 | } 538 | } 539 | 540 | /** 541 | * 设置页脚当前年份 542 | */ 543 | function setCurrentYear() { 544 | if (currentYearEl) { 545 | currentYearEl.textContent = new Date().getFullYear(); 546 | } 547 | } 548 | 549 | /** 550 | * 显示收藏列表 551 | */ 552 | function displayFavorites() { 553 | // 先隐藏所有容器,然后处理收藏列表 554 | containerControl.hideAllContainers(null, () => { 555 | // 获取收藏列表 556 | const favorites = favoriteControl.getFavorites(); 557 | 558 | if (favorites.length === 0) { 559 | // 显示无收藏提示 560 | if (noResults) { 561 | noResults.textContent = '暂无收藏歌曲'; 562 | containerControl.showContainer(noResults); 563 | } 564 | return; 565 | } 566 | 567 | // 清空收藏列表 568 | if (favoritesList) { 569 | favoritesList.innerHTML = ''; 570 | } 571 | 572 | // 添加收藏列表项 573 | favorites.forEach(favorite => { 574 | const resultItem = document.createElement('div'); 575 | resultItem.className = 'result-item'; 576 | 577 | resultItem.innerHTML = ` 578 |
${favorite.title}
579 |
${favorite.artist}
580 |
581 | 584 | 587 |
588 | `; 589 | 590 | favoritesList.appendChild(resultItem); 591 | }); 592 | 593 | // 移除已有的结果计数元素 594 | const existingCount = favoritesContainer.querySelector('.result-count'); 595 | if (existingCount) { 596 | existingCount.remove(); 597 | } 598 | 599 | // 添加收藏统计 600 | const favoriteCount = document.createElement('div'); 601 | favoriteCount.className = 'result-count'; 602 | favoriteCount.textContent = `共有 ${favorites.length} 首收藏歌曲`; 603 | favoritesContainer.appendChild(favoriteCount); 604 | 605 | // 为播放按钮添加事件监听 606 | const playButtons = document.querySelectorAll('#favorites-list .play-button'); 607 | playButtons.forEach(button => { 608 | button.addEventListener('click', () => { 609 | const id = button.getAttribute('data-favorite-id'); 610 | if (id) { 611 | playFavorite(id); 612 | } 613 | }); 614 | }); 615 | 616 | // 为删除按钮添加事件监听 617 | const removeButtons = document.querySelectorAll('#favorites-list .remove-button'); 618 | removeButtons.forEach(button => { 619 | button.addEventListener('click', () => { 620 | const id = button.getAttribute('data-favorite-id'); 621 | if (id) { 622 | removeFavorite(id); 623 | } 624 | }); 625 | }); 626 | 627 | // 显示收藏容器 628 | containerControl.showContainer(favoritesContainer, () => { 629 | // 确保页面适应收藏列表的高度 630 | document.body.style.minHeight = '100%'; 631 | 632 | // 平滑滚动到结果开始位置 633 | setTimeout(() => { 634 | favoritesContainer.scrollIntoView({ behavior: 'smooth', block: 'start' }); 635 | }, 100); 636 | }); 637 | }); 638 | } 639 | 640 | /** 641 | * 播放收藏的歌曲 642 | * @param {string} id - 歌曲ID 643 | */ 644 | function playFavorite(id) { 645 | const url = `${PROXY_URL}https://www.gequbao.com/music/${id}`; 646 | playMusic(url); 647 | } 648 | 649 | /** 650 | * 从收藏列表中移除歌曲 651 | * @param {string} id - 歌曲ID 652 | */ 653 | function removeFavorite(id) { 654 | // 获取当前收藏列表 655 | const favorites = favoriteControl.getFavorites(); 656 | 657 | // 查找并移除 658 | const newFavorites = favorites.filter(item => item.id !== id); 659 | 660 | // 保存到cookie 661 | favoriteControl.setCookie('li-favorites', JSON.stringify(newFavorites)); 662 | 663 | // 找到对应的DOM元素 664 | const resultItem = document.querySelector(`#favorites-list .remove-button[data-favorite-id="${id}"]`).closest('.result-item'); 665 | 666 | if (resultItem) { 667 | // 添加淡出动画 668 | resultItem.style.transition = 'opacity 0.3s, height 0.3s, margin 0.3s, padding 0.3s'; 669 | resultItem.style.opacity = '0'; 670 | resultItem.style.height = '0'; 671 | resultItem.style.margin = '0'; 672 | resultItem.style.padding = '0'; 673 | resultItem.style.overflow = 'hidden'; 674 | 675 | // 动画结束后移除元素 676 | setTimeout(() => { 677 | resultItem.remove(); 678 | 679 | // 如果列表为空,显示"暂无收藏歌曲" 680 | if (newFavorites.length === 0) { 681 | // 先完全移除被删除的元素 682 | if (favoritesList) { 683 | favoritesList.innerHTML = ''; 684 | } 685 | 686 | // 淡出收藏列表 687 | if (favoritesContainer) { 688 | containerControl.hideContainer(favoritesContainer, () => { 689 | // 显示暂无收藏提示 690 | if (noResults) { 691 | noResults.textContent = '暂无收藏歌曲'; 692 | containerControl.showContainer(noResults); 693 | } 694 | }); 695 | } 696 | } else { 697 | // 更新统计信息 698 | const favoriteCount = favoritesContainer.querySelector('.result-count'); 699 | if (favoriteCount) { 700 | favoriteCount.textContent = `共有 ${newFavorites.length} 首收藏歌曲`; 701 | 702 | // 添加更新动画效果 703 | favoriteCount.style.transition = 'transform 0.3s, background-color 0.3s'; 704 | favoriteCount.style.transform = 'scale(1.05)'; 705 | favoriteCount.style.backgroundColor = 'rgba(66, 133, 244, 0.1)'; 706 | 707 | setTimeout(() => { 708 | favoriteCount.style.transform = 'scale(1)'; 709 | favoriteCount.style.backgroundColor = ''; 710 | }, 300); 711 | } 712 | } 713 | }, 300); 714 | } else { 715 | // 如果找不到DOM元素,重新加载整个列表(备用方案) 716 | displayFavorites(); 717 | } 718 | } 719 | 720 | /** 721 | * 预加载播放器资源,以避免首次播放时的加载延迟 722 | */ 723 | function preloadPlayerResources() { 724 | // 创建一个隐藏的iframe元素 725 | const preloadFrame = document.createElement('iframe'); 726 | preloadFrame.style.width = '0'; 727 | preloadFrame.style.height = '0'; 728 | preloadFrame.style.border = 'none'; 729 | preloadFrame.style.position = 'absolute'; 730 | preloadFrame.style.left = '-9999px'; 731 | preloadFrame.style.top = '-9999px'; 732 | preloadFrame.onload = () => { 733 | console.log('播放器资源预加载完成'); 734 | // 加载完成后一段时间移除预加载框架,释放资源 735 | setTimeout(() => { 736 | if (preloadFrame && preloadFrame.parentNode) { 737 | preloadFrame.parentNode.removeChild(preloadFrame); 738 | } 739 | }, 5000); 740 | }; 741 | 742 | // 将iframe加载到页面中 743 | preloadFrame.src = './player/index.html'; 744 | document.body.appendChild(preloadFrame); 745 | } 746 | 747 | /** 748 | * 检查是否是ID直接播放格式 (c+数字格式) 749 | * @param {string} query - 用户输入的查询字符串 750 | * @returns {string|null} - 如果是有效的ID格式,返回ID,否则返回null 751 | */ 752 | function checkDirectPlayId(query) { 753 | // 检查格式是否为"c+数字" 754 | const match = /^c(\d+)$/.exec(query); 755 | if (match && match[1]) { 756 | return match[1]; // 返回数字部分(歌曲ID) 757 | } 758 | return null; 759 | } 760 | 761 | /** 762 | * 直接通过ID播放歌曲 763 | * @param {string} id - 歌曲ID 764 | */ 765 | function playMusicById(id) { 766 | // 构建歌曲详情页URL 767 | const url = `${PROXY_URL}https://www.gequbao.com/music/${id}`; 768 | playMusic(url); 769 | } 770 | 771 | // 事件监听器 772 | document.addEventListener('DOMContentLoaded', () => { 773 | // 初始化主题控制 774 | themeControl.init(); 775 | 776 | // 预加载播放器资源 777 | preloadPlayerResources(); 778 | 779 | // 初始化淡入淡出效果 780 | if (resultsContainer) resultsContainer.classList.add('fade-in'); 781 | if (noResults) noResults.classList.add('fade-in'); 782 | if (favoritesContainer) favoritesContainer.classList.add('fade-in'); 783 | if (placeholder) placeholder.classList.add('fade-in'); 784 | 785 | // 初始化版本检查 786 | updateControl.init(); 787 | 788 | // 添加主题切换按钮事件监听 - 使用新按钮ID 789 | const themeToggleBtn = document.getElementById('new-theme-toggle'); 790 | if (themeToggleBtn) { 791 | // 简化:单个点击事件处理程序 792 | themeToggleBtn.addEventListener('click', function() { 793 | themeControl.toggleTheme(); 794 | 795 | // 根据当前主题更新图标 796 | const darkModeCookie = themeControl.getCookie('li-darkmode'); 797 | const iconElement = this.querySelector('.material-symbols-rounded'); 798 | 799 | if (iconElement) { 800 | iconElement.textContent = darkModeCookie === '1' ? 'light_mode' : 'dark_mode'; 801 | } 802 | 803 | // 更新按钮背景色(根据主题) 804 | const isDarkTheme = darkModeCookie === '1'; 805 | this.style.backgroundColor = isDarkTheme ? 'rgba(30,30,30,0.8)' : 'rgba(255,255,255,0.8)'; 806 | this.style.color = isDarkTheme ? '#E0E0E0' : '#333'; 807 | 808 | // 更新收藏按钮颜色 809 | const favoritesBtn = document.getElementById('favorites-btn'); 810 | if (favoritesBtn) { 811 | favoritesBtn.style.backgroundColor = isDarkTheme ? 'rgba(30,30,30,0.8)' : 'rgba(255,255,255,0.8)'; 812 | favoritesBtn.style.color = isDarkTheme ? '#E0E0E0' : '#333'; 813 | } 814 | }); 815 | 816 | // 初始化图标状态和按钮背景 817 | const darkModeCookie = themeControl.getCookie('li-darkmode'); 818 | const iconElement = themeToggleBtn.querySelector('.material-symbols-rounded'); 819 | 820 | if (iconElement && darkModeCookie === '1') { 821 | iconElement.textContent = 'light_mode'; 822 | themeToggleBtn.style.backgroundColor = 'rgba(30,30,30,0.8)'; 823 | themeToggleBtn.style.color = '#E0E0E0'; 824 | } else { 825 | themeToggleBtn.style.backgroundColor = 'rgba(255,255,255,0.8)'; 826 | themeToggleBtn.style.color = '#333'; 827 | } 828 | } 829 | 830 | // 收藏按钮事件监听 831 | if (favoritesBtn) { 832 | favoritesBtn.addEventListener('click', function() { 833 | // 根据当前主题设置按钮样式 834 | const darkModeCookie = themeControl.getCookie('li-darkmode'); 835 | const isDarkTheme = darkModeCookie === '1'; 836 | 837 | // 判断当前显示的是否为收藏列表 838 | const isShowingFavorites = favoritesContainer && favoritesContainer.style.display === 'block'; 839 | 840 | if (isShowingFavorites) { 841 | // 如果当前显示的是收藏列表,先隐藏 842 | containerControl.hideContainer(favoritesContainer, () => { 843 | // 尝试恢复之前的界面状态 844 | if (resultsContainer && resultsContainer.querySelector('.result-count')) { 845 | // 有搜索结果,显示搜索结果 846 | containerControl.showContainer(resultsContainer); 847 | } else { 848 | // 无搜索结果,显示占位符 849 | containerControl.showContainer(placeholder); 850 | } 851 | }); 852 | } else { 853 | // 显示收藏列表 854 | displayFavorites(); 855 | } 856 | }); 857 | 858 | // 初始化收藏按钮样式 859 | const darkModeCookie = themeControl.getCookie('li-darkmode'); 860 | const isDarkTheme = darkModeCookie === '1'; 861 | 862 | favoritesBtn.style.backgroundColor = isDarkTheme ? 'rgba(30,30,30,0.8)' : 'rgba(255,255,255,0.8)'; 863 | favoritesBtn.style.color = isDarkTheme ? '#E0E0E0' : '#333'; 864 | } 865 | 866 | // 设置当前年份 867 | setCurrentYear(); 868 | 869 | // 搜索输入框输入事件 - 用于检测ID直接播放格式并更改按钮文本 870 | searchInput.addEventListener('input', () => { 871 | const query = searchInput.value.trim(); 872 | const directPlayId = checkDirectPlayId(query); 873 | 874 | // 更新按钮文本 875 | if (directPlayId) { 876 | searchText.textContent = '播放'; 877 | } else { 878 | searchText.textContent = '搜索'; 879 | } 880 | }); 881 | 882 | // 搜索按钮点击事件 883 | searchButton.addEventListener('click', () => { 884 | const query = searchInput.value.trim(); 885 | if (!query) return; 886 | 887 | // 检查是否为ID直接播放格式 888 | const directPlayId = checkDirectPlayId(query); 889 | if (directPlayId) { 890 | playMusicById(directPlayId); 891 | } else { 892 | performSearch(query); 893 | } 894 | }); 895 | 896 | // 搜索输入框回车事件 897 | searchInput.addEventListener('keypress', (e) => { 898 | if (e.key === 'Enter') { 899 | const query = searchInput.value.trim(); 900 | if (!query) return; 901 | 902 | // 检查是否为ID直接播放格式 903 | const directPlayId = checkDirectPlayId(query); 904 | if (directPlayId) { 905 | playMusicById(directPlayId); 906 | } else { 907 | performSearch(query); 908 | } 909 | } 910 | }); 911 | 912 | // 关闭播放器按钮点击事件 913 | closePlayer.addEventListener('click', () => { 914 | // 立即更新主题按钮颜色,避免闪烁 915 | const themeToggleBtn = document.getElementById('new-theme-toggle'); 916 | const favoritesBtn = document.getElementById('favorites-btn'); 917 | 918 | if (themeToggleBtn || favoritesBtn) { 919 | const darkModeCookie = themeControl.getCookie('li-darkmode'); 920 | const isDarkTheme = darkModeCookie === '1'; 921 | 922 | // 更新主题按钮背景色和文字颜色 923 | if (themeToggleBtn) { 924 | themeToggleBtn.style.backgroundColor = isDarkTheme ? 'rgba(30,30,30,0.8)' : 'rgba(255,255,255,0.8)'; 925 | themeToggleBtn.style.color = isDarkTheme ? '#E0E0E0' : '#333'; 926 | 927 | // 更新图标 928 | const iconElement = themeToggleBtn.querySelector('.material-symbols-rounded'); 929 | if (iconElement) { 930 | iconElement.textContent = isDarkTheme ? 'light_mode' : 'dark_mode'; 931 | } 932 | } 933 | 934 | // 更新收藏按钮背景色和文字颜色 935 | if (favoritesBtn) { 936 | favoritesBtn.style.backgroundColor = isDarkTheme ? 'rgba(30,30,30,0.8)' : 'rgba(255,255,255,0.8)'; 937 | favoritesBtn.style.color = isDarkTheme ? '#E0E0E0' : '#333'; 938 | } 939 | } 940 | 941 | // 移除播放器激活状态 942 | playerContainer.classList.remove('active'); 943 | 944 | // 延迟一段时间后清空iframe内容,避免音乐继续播放 945 | setTimeout(() => { 946 | playerFrame.src = ''; 947 | }, 300); 948 | }); 949 | }); -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | GNU GENERAL PUBLIC LICENSE 2 | Version 3, 29 June 2007 3 | 4 | Copyright (C) 2007 Free Software Foundation, Inc. 5 | Everyone is permitted to copy and distribute verbatim copies 6 | of this license document, but changing it is not allowed. 7 | 8 | Preamble 9 | 10 | The GNU General Public License is a free, copyleft license for 11 | software and other kinds of works. 12 | 13 | The licenses for most software and other practical works are designed 14 | to take away your freedom to share and change the works. By contrast, 15 | the GNU General Public License is intended to guarantee your freedom to 16 | share and change all versions of a program--to make sure it remains free 17 | software for all its users. We, the Free Software Foundation, use the 18 | GNU General Public License for most of our software; it applies also to 19 | any other work released this way by its authors. You can apply it to 20 | your programs, too. 21 | 22 | When we speak of free software, we are referring to freedom, not 23 | price. Our General Public Licenses are designed to make sure that you 24 | have the freedom to distribute copies of free software (and charge for 25 | them if you wish), that you receive source code or can get it if you 26 | want it, that you can change the software or use pieces of it in new 27 | free programs, and that you know you can do these things. 28 | 29 | To protect your rights, we need to prevent others from denying you 30 | these rights or asking you to surrender the rights. Therefore, you have 31 | certain responsibilities if you distribute copies of the software, or if 32 | you modify it: responsibilities to respect the freedom of others. 33 | 34 | For example, if you distribute copies of such a program, whether 35 | gratis or for a fee, you must pass on to the recipients the same 36 | freedoms that you received. You must make sure that they, too, receive 37 | or can get the source code. And you must show them these terms so they 38 | know their rights. 39 | 40 | Developers that use the GNU GPL protect your rights with two steps: 41 | (1) assert copyright on the software, and (2) offer you this License 42 | giving you legal permission to copy, distribute and/or modify it. 43 | 44 | For the developers' and authors' protection, the GPL clearly explains 45 | that there is no warranty for this free software. For both users' and 46 | authors' sake, the GPL requires that modified versions be marked as 47 | changed, so that their problems will not be attributed erroneously to 48 | authors of previous versions. 49 | 50 | Some devices are designed to deny users access to install or run 51 | modified versions of the software inside them, although the manufacturer 52 | can do so. This is fundamentally incompatible with the aim of 53 | protecting users' freedom to change the software. The systematic 54 | pattern of such abuse occurs in the area of products for individuals to 55 | use, which is precisely where it is most unacceptable. Therefore, we 56 | have designed this version of the GPL to prohibit the practice for those 57 | products. If such problems arise substantially in other domains, we 58 | stand ready to extend this provision to those domains in future versions 59 | of the GPL, as needed to protect the freedom of users. 60 | 61 | Finally, every program is threatened constantly by software patents. 62 | States should not allow patents to restrict development and use of 63 | software on general-purpose computers, but in those that do, we wish to 64 | avoid the special danger that patents applied to a free program could 65 | make it effectively proprietary. To prevent this, the GPL assures that 66 | patents cannot be used to render the program non-free. 67 | 68 | The precise terms and conditions for copying, distribution and 69 | modification follow. 70 | 71 | TERMS AND CONDITIONS 72 | 73 | 0. Definitions. 74 | 75 | "This License" refers to version 3 of the GNU General Public License. 76 | 77 | "Copyright" also means copyright-like laws that apply to other kinds of 78 | works, such as semiconductor masks. 79 | 80 | "The Program" refers to any copyrightable work licensed under this 81 | License. Each licensee is addressed as "you". "Licensees" and 82 | "recipients" may be individuals or organizations. 83 | 84 | To "modify" a work means to copy from or adapt all or part of the work 85 | in a fashion requiring copyright permission, other than the making of an 86 | exact copy. The resulting work is called a "modified version" of the 87 | earlier work or a work "based on" the earlier work. 88 | 89 | A "covered work" means either the unmodified Program or a work based 90 | on the Program. 91 | 92 | To "propagate" a work means to do anything with it that, without 93 | permission, would make you directly or secondarily liable for 94 | infringement under applicable copyright law, except executing it on a 95 | computer or modifying a private copy. Propagation includes copying, 96 | distribution (with or without modification), making available to the 97 | public, and in some countries other activities as well. 98 | 99 | To "convey" a work means any kind of propagation that enables other 100 | parties to make or receive copies. Mere interaction with a user through 101 | a computer network, with no transfer of a copy, is not conveying. 102 | 103 | An interactive user interface displays "Appropriate Legal Notices" 104 | to the extent that it includes a convenient and prominently visible 105 | feature that (1) displays an appropriate copyright notice, and (2) 106 | tells the user that there is no warranty for the work (except to the 107 | extent that warranties are provided), that licensees may convey the 108 | work under this License, and how to view a copy of this License. If 109 | the interface presents a list of user commands or options, such as a 110 | menu, a prominent item in the list meets this criterion. 111 | 112 | 1. Source Code. 113 | 114 | The "source code" for a work means the preferred form of the work 115 | for making modifications to it. "Object code" means any non-source 116 | form of a work. 117 | 118 | A "Standard Interface" means an interface that either is an official 119 | standard defined by a recognized standards body, or, in the case of 120 | interfaces specified for a particular programming language, one that 121 | is widely used among developers working in that language. 122 | 123 | The "System Libraries" of an executable work include anything, other 124 | than the work as a whole, that (a) is included in the normal form of 125 | packaging a Major Component, but which is not part of that Major 126 | Component, and (b) serves only to enable use of the work with that 127 | Major Component, or to implement a Standard Interface for which an 128 | implementation is available to the public in source code form. A 129 | "Major Component", in this context, means a major essential component 130 | (kernel, window system, and so on) of the specific operating system 131 | (if any) on which the executable work runs, or a compiler used to 132 | produce the work, or an object code interpreter used to run it. 133 | 134 | The "Corresponding Source" for a work in object code form means all 135 | the source code needed to generate, install, and (for an executable 136 | work) run the object code and to modify the work, including scripts to 137 | control those activities. However, it does not include the work's 138 | System Libraries, or general-purpose tools or generally available free 139 | programs which are used unmodified in performing those activities but 140 | which are not part of the work. For example, Corresponding Source 141 | includes interface definition files associated with source files for 142 | the work, and the source code for shared libraries and dynamically 143 | linked subprograms that the work is specifically designed to require, 144 | such as by intimate data communication or control flow between those 145 | subprograms and other parts of the work. 146 | 147 | The Corresponding Source need not include anything that users 148 | can regenerate automatically from other parts of the Corresponding 149 | Source. 150 | 151 | The Corresponding Source for a work in source code form is that 152 | same work. 153 | 154 | 2. Basic Permissions. 155 | 156 | All rights granted under this License are granted for the term of 157 | copyright on the Program, and are irrevocable provided the stated 158 | conditions are met. This License explicitly affirms your unlimited 159 | permission to run the unmodified Program. The output from running a 160 | covered work is covered by this License only if the output, given its 161 | content, constitutes a covered work. This License acknowledges your 162 | rights of fair use or other equivalent, as provided by copyright law. 163 | 164 | You may make, run and propagate covered works that you do not 165 | convey, without conditions so long as your license otherwise remains 166 | in force. You may convey covered works to others for the sole purpose 167 | of having them make modifications exclusively for you, or provide you 168 | with facilities for running those works, provided that you comply with 169 | the terms of this License in conveying all material for which you do 170 | not control copyright. Those thus making or running the covered works 171 | for you must do so exclusively on your behalf, under your direction 172 | and control, on terms that prohibit them from making any copies of 173 | your copyrighted material outside their relationship with you. 174 | 175 | Conveying under any other circumstances is permitted solely under 176 | the conditions stated below. Sublicensing is not allowed; section 10 177 | makes it unnecessary. 178 | 179 | 3. Protecting Users' Legal Rights From Anti-Circumvention Law. 180 | 181 | No covered work shall be deemed part of an effective technological 182 | measure under any applicable law fulfilling obligations under article 183 | 11 of the WIPO copyright treaty adopted on 20 December 1996, or 184 | similar laws prohibiting or restricting circumvention of such 185 | measures. 186 | 187 | When you convey a covered work, you waive any legal power to forbid 188 | circumvention of technological measures to the extent such circumvention 189 | is effected by exercising rights under this License with respect to 190 | the covered work, and you disclaim any intention to limit operation or 191 | modification of the work as a means of enforcing, against the work's 192 | users, your or third parties' legal rights to forbid circumvention of 193 | technological measures. 194 | 195 | 4. Conveying Verbatim Copies. 196 | 197 | You may convey verbatim copies of the Program's source code as you 198 | receive it, in any medium, provided that you conspicuously and 199 | appropriately publish on each copy an appropriate copyright notice; 200 | keep intact all notices stating that this License and any 201 | non-permissive terms added in accord with section 7 apply to the code; 202 | keep intact all notices of the absence of any warranty; and give all 203 | recipients a copy of this License along with the Program. 204 | 205 | You may charge any price or no price for each copy that you convey, 206 | and you may offer support or warranty protection for a fee. 207 | 208 | 5. Conveying Modified Source Versions. 209 | 210 | You may convey a work based on the Program, or the modifications to 211 | produce it from the Program, in the form of source code under the 212 | terms of section 4, provided that you also meet all of these conditions: 213 | 214 | a) The work must carry prominent notices stating that you modified 215 | it, and giving a relevant date. 216 | 217 | b) The work must carry prominent notices stating that it is 218 | released under this License and any conditions added under section 219 | 7. This requirement modifies the requirement in section 4 to 220 | "keep intact all notices". 221 | 222 | c) You must license the entire work, as a whole, under this 223 | License to anyone who comes into possession of a copy. This 224 | License will therefore apply, along with any applicable section 7 225 | additional terms, to the whole of the work, and all its parts, 226 | regardless of how they are packaged. This License gives no 227 | permission to license the work in any other way, but it does not 228 | invalidate such permission if you have separately received it. 229 | 230 | d) If the work has interactive user interfaces, each must display 231 | Appropriate Legal Notices; however, if the Program has interactive 232 | interfaces that do not display Appropriate Legal Notices, your 233 | work need not make them do so. 234 | 235 | A compilation of a covered work with other separate and independent 236 | works, which are not by their nature extensions of the covered work, 237 | and which are not combined with it such as to form a larger program, 238 | in or on a volume of a storage or distribution medium, is called an 239 | "aggregate" if the compilation and its resulting copyright are not 240 | used to limit the access or legal rights of the compilation's users 241 | beyond what the individual works permit. Inclusion of a covered work 242 | in an aggregate does not cause this License to apply to the other 243 | parts of the aggregate. 244 | 245 | 6. Conveying Non-Source Forms. 246 | 247 | You may convey a covered work in object code form under the terms 248 | of sections 4 and 5, provided that you also convey the 249 | machine-readable Corresponding Source under the terms of this License, 250 | in one of these ways: 251 | 252 | a) Convey the object code in, or embodied in, a physical product 253 | (including a physical distribution medium), accompanied by the 254 | Corresponding Source fixed on a durable physical medium 255 | customarily used for software interchange. 256 | 257 | b) Convey the object code in, or embodied in, a physical product 258 | (including a physical distribution medium), accompanied by a 259 | written offer, valid for at least three years and valid for as 260 | long as you offer spare parts or customer support for that product 261 | model, to give anyone who possesses the object code either (1) a 262 | copy of the Corresponding Source for all the software in the 263 | product that is covered by this License, on a durable physical 264 | medium customarily used for software interchange, for a price no 265 | more than your reasonable cost of physically performing this 266 | conveying of source, or (2) access to copy the 267 | Corresponding Source from a network server at no charge. 268 | 269 | c) Convey individual copies of the object code with a copy of the 270 | written offer to provide the Corresponding Source. This 271 | alternative is allowed only occasionally and noncommercially, and 272 | only if you received the object code with such an offer, in accord 273 | with subsection 6b. 274 | 275 | d) Convey the object code by offering access from a designated 276 | place (gratis or for a charge), and offer equivalent access to the 277 | Corresponding Source in the same way through the same place at no 278 | further charge. You need not require recipients to copy the 279 | Corresponding Source along with the object code. If the place to 280 | copy the object code is a network server, the Corresponding Source 281 | may be on a different server (operated by you or a third party) 282 | that supports equivalent copying facilities, provided you maintain 283 | clear directions next to the object code saying where to find the 284 | Corresponding Source. Regardless of what server hosts the 285 | Corresponding Source, you remain obligated to ensure that it is 286 | available for as long as needed to satisfy these requirements. 287 | 288 | e) Convey the object code using peer-to-peer transmission, provided 289 | you inform other peers where the object code and Corresponding 290 | Source of the work are being offered to the general public at no 291 | charge under subsection 6d. 292 | 293 | A separable portion of the object code, whose source code is excluded 294 | from the Corresponding Source as a System Library, need not be 295 | included in conveying the object code work. 296 | 297 | A "User Product" is either (1) a "consumer product", which means any 298 | tangible personal property which is normally used for personal, family, 299 | or household purposes, or (2) anything designed or sold for incorporation 300 | into a dwelling. In determining whether a product is a consumer product, 301 | doubtful cases shall be resolved in favor of coverage. For a particular 302 | product received by a particular user, "normally used" refers to a 303 | typical or common use of that class of product, regardless of the status 304 | of the particular user or of the way in which the particular user 305 | actually uses, or expects or is expected to use, the product. A product 306 | is a consumer product regardless of whether the product has substantial 307 | commercial, industrial or non-consumer uses, unless such uses represent 308 | the only significant mode of use of the product. 309 | 310 | "Installation Information" for a User Product means any methods, 311 | procedures, authorization keys, or other information required to install 312 | and execute modified versions of a covered work in that User Product from 313 | a modified version of its Corresponding Source. The information must 314 | suffice to ensure that the continued functioning of the modified object 315 | code is in no case prevented or interfered with solely because 316 | modification has been made. 317 | 318 | If you convey an object code work under this section in, or with, or 319 | specifically for use in, a User Product, and the conveying occurs as 320 | part of a transaction in which the right of possession and use of the 321 | User Product is transferred to the recipient in perpetuity or for a 322 | fixed term (regardless of how the transaction is characterized), the 323 | Corresponding Source conveyed under this section must be accompanied 324 | by the Installation Information. But this requirement does not apply 325 | if neither you nor any third party retains the ability to install 326 | modified object code on the User Product (for example, the work has 327 | been installed in ROM). 328 | 329 | The requirement to provide Installation Information does not include a 330 | requirement to continue to provide support service, warranty, or updates 331 | for a work that has been modified or installed by the recipient, or for 332 | the User Product in which it has been modified or installed. Access to a 333 | network may be denied when the modification itself materially and 334 | adversely affects the operation of the network or violates the rules and 335 | protocols for communication across the network. 336 | 337 | Corresponding Source conveyed, and Installation Information provided, 338 | in accord with this section must be in a format that is publicly 339 | documented (and with an implementation available to the public in 340 | source code form), and must require no special password or key for 341 | unpacking, reading or copying. 342 | 343 | 7. Additional Terms. 344 | 345 | "Additional permissions" are terms that supplement the terms of this 346 | License by making exceptions from one or more of its conditions. 347 | Additional permissions that are applicable to the entire Program shall 348 | be treated as though they were included in this License, to the extent 349 | that they are valid under applicable law. If additional permissions 350 | apply only to part of the Program, that part may be used separately 351 | under those permissions, but the entire Program remains governed by 352 | this License without regard to the additional permissions. 353 | 354 | When you convey a copy of a covered work, you may at your option 355 | remove any additional permissions from that copy, or from any part of 356 | it. (Additional permissions may be written to require their own 357 | removal in certain cases when you modify the work.) You may place 358 | additional permissions on material, added by you to a covered work, 359 | for which you have or can give appropriate copyright permission. 360 | 361 | Notwithstanding any other provision of this License, for material you 362 | add to a covered work, you may (if authorized by the copyright holders of 363 | that material) supplement the terms of this License with terms: 364 | 365 | a) Disclaiming warranty or limiting liability differently from the 366 | terms of sections 15 and 16 of this License; or 367 | 368 | b) Requiring preservation of specified reasonable legal notices or 369 | author attributions in that material or in the Appropriate Legal 370 | Notices displayed by works containing it; or 371 | 372 | c) Prohibiting misrepresentation of the origin of that material, or 373 | requiring that modified versions of such material be marked in 374 | reasonable ways as different from the original version; or 375 | 376 | d) Limiting the use for publicity purposes of names of licensors or 377 | authors of the material; or 378 | 379 | e) Declining to grant rights under trademark law for use of some 380 | trade names, trademarks, or service marks; or 381 | 382 | f) Requiring indemnification of licensors and authors of that 383 | material by anyone who conveys the material (or modified versions of 384 | it) with contractual assumptions of liability to the recipient, for 385 | any liability that these contractual assumptions directly impose on 386 | those licensors and authors. 387 | 388 | All other non-permissive additional terms are considered "further 389 | restrictions" within the meaning of section 10. If the Program as you 390 | received it, or any part of it, contains a notice stating that it is 391 | governed by this License along with a term that is a further 392 | restriction, you may remove that term. If a license document contains 393 | a further restriction but permits relicensing or conveying under this 394 | License, you may add to a covered work material governed by the terms 395 | of that license document, provided that the further restriction does 396 | not survive such relicensing or conveying. 397 | 398 | If you add terms to a covered work in accord with this section, you 399 | must place, in the relevant source files, a statement of the 400 | additional terms that apply to those files, or a notice indicating 401 | where to find the applicable terms. 402 | 403 | Additional terms, permissive or non-permissive, may be stated in the 404 | form of a separately written license, or stated as exceptions; 405 | the above requirements apply either way. 406 | 407 | 8. Termination. 408 | 409 | You may not propagate or modify a covered work except as expressly 410 | provided under this License. Any attempt otherwise to propagate or 411 | modify it is void, and will automatically terminate your rights under 412 | this License (including any patent licenses granted under the third 413 | paragraph of section 11). 414 | 415 | However, if you cease all violation of this License, then your 416 | license from a particular copyright holder is reinstated (a) 417 | provisionally, unless and until the copyright holder explicitly and 418 | finally terminates your license, and (b) permanently, if the copyright 419 | holder fails to notify you of the violation by some reasonable means 420 | prior to 60 days after the cessation. 421 | 422 | Moreover, your license from a particular copyright holder is 423 | reinstated permanently if the copyright holder notifies you of the 424 | violation by some reasonable means, this is the first time you have 425 | received notice of violation of this License (for any work) from that 426 | copyright holder, and you cure the violation prior to 30 days after 427 | your receipt of the notice. 428 | 429 | Termination of your rights under this section does not terminate the 430 | licenses of parties who have received copies or rights from you under 431 | this License. If your rights have been terminated and not permanently 432 | reinstated, you do not qualify to receive new licenses for the same 433 | material under section 10. 434 | 435 | 9. Acceptance Not Required for Having Copies. 436 | 437 | You are not required to accept this License in order to receive or 438 | run a copy of the Program. Ancillary propagation of a covered work 439 | occurring solely as a consequence of using peer-to-peer transmission 440 | to receive a copy likewise does not require acceptance. However, 441 | nothing other than this License grants you permission to propagate or 442 | modify any covered work. These actions infringe copyright if you do 443 | not accept this License. Therefore, by modifying or propagating a 444 | covered work, you indicate your acceptance of this License to do so. 445 | 446 | 10. Automatic Licensing of Downstream Recipients. 447 | 448 | Each time you convey a covered work, the recipient automatically 449 | receives a license from the original licensors, to run, modify and 450 | propagate that work, subject to this License. You are not responsible 451 | for enforcing compliance by third parties with this License. 452 | 453 | An "entity transaction" is a transaction transferring control of an 454 | organization, or substantially all assets of one, or subdividing an 455 | organization, or merging organizations. If propagation of a covered 456 | work results from an entity transaction, each party to that 457 | transaction who receives a copy of the work also receives whatever 458 | licenses to the work the party's predecessor in interest had or could 459 | give under the previous paragraph, plus a right to possession of the 460 | Corresponding Source of the work from the predecessor in interest, if 461 | the predecessor has it or can get it with reasonable efforts. 462 | 463 | You may not impose any further restrictions on the exercise of the 464 | rights granted or affirmed under this License. For example, you may 465 | not impose a license fee, royalty, or other charge for exercise of 466 | rights granted under this License, and you may not initiate litigation 467 | (including a cross-claim or counterclaim in a lawsuit) alleging that 468 | any patent claim is infringed by making, using, selling, offering for 469 | sale, or importing the Program or any portion of it. 470 | 471 | 11. Patents. 472 | 473 | A "contributor" is a copyright holder who authorizes use under this 474 | License of the Program or a work on which the Program is based. The 475 | work thus licensed is called the contributor's "contributor version". 476 | 477 | A contributor's "essential patent claims" are all patent claims 478 | owned or controlled by the contributor, whether already acquired or 479 | hereafter acquired, that would be infringed by some manner, permitted 480 | by this License, of making, using, or selling its contributor version, 481 | but do not include claims that would be infringed only as a 482 | consequence of further modification of the contributor version. For 483 | purposes of this definition, "control" includes the right to grant 484 | patent sublicenses in a manner consistent with the requirements of 485 | this License. 486 | 487 | Each contributor grants you a non-exclusive, worldwide, royalty-free 488 | patent license under the contributor's essential patent claims, to 489 | make, use, sell, offer for sale, import and otherwise run, modify and 490 | propagate the contents of its contributor version. 491 | 492 | In the following three paragraphs, a "patent license" is any express 493 | agreement or commitment, however denominated, not to enforce a patent 494 | (such as an express permission to practice a patent or covenant not to 495 | sue for patent infringement). To "grant" such a patent license to a 496 | party means to make such an agreement or commitment not to enforce a 497 | patent against the party. 498 | 499 | If you convey a covered work, knowingly relying on a patent license, 500 | and the Corresponding Source of the work is not available for anyone 501 | to copy, free of charge and under the terms of this License, through a 502 | publicly available network server or other readily accessible means, 503 | then you must either (1) cause the Corresponding Source to be so 504 | available, or (2) arrange to deprive yourself of the benefit of the 505 | patent license for this particular work, or (3) arrange, in a manner 506 | consistent with the requirements of this License, to extend the patent 507 | license to downstream recipients. "Knowingly relying" means you have 508 | actual knowledge that, but for the patent license, your conveying the 509 | covered work in a country, or your recipient's use of the covered work 510 | in a country, would infringe one or more identifiable patents in that 511 | country that you have reason to believe are valid. 512 | 513 | If, pursuant to or in connection with a single transaction or 514 | arrangement, you convey, or propagate by procuring conveyance of, a 515 | covered work, and grant a patent license to some of the parties 516 | receiving the covered work authorizing them to use, propagate, modify 517 | or convey a specific copy of the covered work, then the patent license 518 | you grant is automatically extended to all recipients of the covered 519 | work and works based on it. 520 | 521 | A patent license is "discriminatory" if it does not include within 522 | the scope of its coverage, prohibits the exercise of, or is 523 | conditioned on the non-exercise of one or more of the rights that are 524 | specifically granted under this License. You may not convey a covered 525 | work if you are a party to an arrangement with a third party that is 526 | in the business of distributing software, under which you make payment 527 | to the third party based on the extent of your activity of conveying 528 | the work, and under which the third party grants, to any of the 529 | parties who would receive the covered work from you, a discriminatory 530 | patent license (a) in connection with copies of the covered work 531 | conveyed by you (or copies made from those copies), or (b) primarily 532 | for and in connection with specific products or compilations that 533 | contain the covered work, unless you entered into that arrangement, 534 | or that patent license was granted, prior to 28 March 2007. 535 | 536 | Nothing in this License shall be construed as excluding or limiting 537 | any implied license or other defenses to infringement that may 538 | otherwise be available to you under applicable patent law. 539 | 540 | 12. No Surrender of Others' Freedom. 541 | 542 | If conditions are imposed on you (whether by court order, agreement or 543 | otherwise) that contradict the conditions of this License, they do not 544 | excuse you from the conditions of this License. If you cannot convey a 545 | covered work so as to satisfy simultaneously your obligations under this 546 | License and any other pertinent obligations, then as a consequence you may 547 | not convey it at all. For example, if you agree to terms that obligate you 548 | to collect a royalty for further conveying from those to whom you convey 549 | the Program, the only way you could satisfy both those terms and this 550 | License would be to refrain entirely from conveying the Program. 551 | 552 | 13. Use with the GNU Affero General Public License. 553 | 554 | Notwithstanding any other provision of this License, you have 555 | permission to link or combine any covered work with a work licensed 556 | under version 3 of the GNU Affero General Public License into a single 557 | combined work, and to convey the resulting work. The terms of this 558 | License will continue to apply to the part which is the covered work, 559 | but the special requirements of the GNU Affero General Public License, 560 | section 13, concerning interaction through a network will apply to the 561 | combination as such. 562 | 563 | 14. Revised Versions of this License. 564 | 565 | The Free Software Foundation may publish revised and/or new versions of 566 | the GNU General Public License from time to time. Such new versions will 567 | be similar in spirit to the present version, but may differ in detail to 568 | address new problems or concerns. 569 | 570 | Each version is given a distinguishing version number. If the 571 | Program specifies that a certain numbered version of the GNU General 572 | Public License "or any later version" applies to it, you have the 573 | option of following the terms and conditions either of that numbered 574 | version or of any later version published by the Free Software 575 | Foundation. If the Program does not specify a version number of the 576 | GNU General Public License, you may choose any version ever published 577 | by the Free Software Foundation. 578 | 579 | If the Program specifies that a proxy can decide which future 580 | versions of the GNU General Public License can be used, that proxy's 581 | public statement of acceptance of a version permanently authorizes you 582 | to choose that version for the Program. 583 | 584 | Later license versions may give you additional or different 585 | permissions. However, no additional obligations are imposed on any 586 | author or copyright holder as a result of your choosing to follow a 587 | later version. 588 | 589 | 15. Disclaimer of Warranty. 590 | 591 | THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY 592 | APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT 593 | HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY 594 | OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO, 595 | THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR 596 | PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM 597 | IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF 598 | ALL NECESSARY SERVICING, REPAIR OR CORRECTION. 599 | 600 | 16. Limitation of Liability. 601 | 602 | IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING 603 | WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS 604 | THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY 605 | GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE 606 | USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF 607 | DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD 608 | PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS), 609 | EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF 610 | SUCH DAMAGES. 611 | 612 | 17. Interpretation of Sections 15 and 16. 613 | 614 | If the disclaimer of warranty and limitation of liability provided 615 | above cannot be given local legal effect according to their terms, 616 | reviewing courts shall apply local law that most closely approximates 617 | an absolute waiver of all civil liability in connection with the 618 | Program, unless a warranty or assumption of liability accompanies a 619 | copy of the Program in return for a fee. 620 | 621 | END OF TERMS AND CONDITIONS 622 | 623 | How to Apply These Terms to Your New Programs 624 | 625 | If you develop a new program, and you want it to be of the greatest 626 | possible use to the public, the best way to achieve this is to make it 627 | free software which everyone can redistribute and change under these terms. 628 | 629 | To do so, attach the following notices to the program. It is safest 630 | to attach them to the start of each source file to most effectively 631 | state the exclusion of warranty; and each file should have at least 632 | the "copyright" line and a pointer to where the full notice is found. 633 | 634 | 635 | Copyright (C) 636 | 637 | This program is free software: you can redistribute it and/or modify 638 | it under the terms of the GNU General Public License as published by 639 | the Free Software Foundation, either version 3 of the License, or 640 | (at your option) any later version. 641 | 642 | This program is distributed in the hope that it will be useful, 643 | but WITHOUT ANY WARRANTY; without even the implied warranty of 644 | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the 645 | GNU General Public License for more details. 646 | 647 | You should have received a copy of the GNU General Public License 648 | along with this program. If not, see . 649 | 650 | Also add information on how to contact you by electronic and paper mail. 651 | 652 | If the program does terminal interaction, make it output a short 653 | notice like this when it starts in an interactive mode: 654 | 655 | Copyright (C) 656 | This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'. 657 | This is free software, and you are welcome to redistribute it 658 | under certain conditions; type `show c' for details. 659 | 660 | The hypothetical commands `show w' and `show c' should show the appropriate 661 | parts of the General Public License. Of course, your program's commands 662 | might be different; for a GUI interface, you would use an "about box". 663 | 664 | You should also get your employer (if you work as a programmer) or school, 665 | if any, to sign a "copyright disclaimer" for the program, if necessary. 666 | For more information on this, and how to apply and follow the GNU GPL, see 667 | . 668 | 669 | The GNU General Public License does not permit incorporating your program 670 | into proprietary programs. If your program is a subroutine library, you 671 | may consider it more useful to permit linking proprietary applications with 672 | the library. If this is what you want to do, use the GNU Lesser General 673 | Public License instead of this License. But first, please read 674 | . 675 | -------------------------------------------------------------------------------- /player/assets/js/script.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | /** 4 | * 收藏功能 - 使用cookie保存收藏的歌曲 5 | */ 6 | const favoriteControl = { 7 | // 获取收藏列表 8 | getFavorites() { 9 | const favCookie = this.getCookie('li-favorites'); 10 | if (!favCookie) return []; 11 | 12 | try { 13 | return JSON.parse(favCookie); 14 | } catch (error) { 15 | console.error('解析收藏列表失败:', error); 16 | return []; 17 | } 18 | }, 19 | 20 | // 添加收藏 21 | addFavorite(songId, title, artist) { 22 | if (!songId) return false; 23 | 24 | const favorites = this.getFavorites(); 25 | 26 | // 检查是否已经收藏 27 | const existingIndex = favorites.findIndex(item => item.id === songId); 28 | if (existingIndex !== -1) return false; 29 | 30 | // 添加到收藏列表 31 | favorites.push({ id: songId, title, artist }); 32 | 33 | // 保存到cookie 34 | this.setCookie('li-favorites', JSON.stringify(favorites)); 35 | return true; 36 | }, 37 | 38 | // 移除收藏 39 | removeFavorite(songId) { 40 | if (!songId) return false; 41 | 42 | const favorites = this.getFavorites(); 43 | 44 | // 查找并移除 45 | const existingIndex = favorites.findIndex(item => item.id === songId); 46 | if (existingIndex === -1) return false; 47 | 48 | favorites.splice(existingIndex, 1); 49 | 50 | // 保存到cookie 51 | this.setCookie('li-favorites', JSON.stringify(favorites)); 52 | return true; 53 | }, 54 | 55 | // 检查是否已收藏 56 | isFavorite(songId) { 57 | if (!songId) return false; 58 | 59 | const favorites = this.getFavorites(); 60 | return favorites.some(item => item.id === songId); 61 | }, 62 | 63 | // 获取指定名称的cookie值 64 | getCookie(name) { 65 | const cookies = document.cookie.split(';'); 66 | for (let i = 0; i < cookies.length; i++) { 67 | const cookie = cookies[i].trim(); 68 | if (cookie.startsWith(name + '=')) { 69 | return decodeURIComponent(cookie.substring(name.length + 1)); 70 | } 71 | } 72 | return null; 73 | }, 74 | 75 | // 设置cookie 76 | setCookie(name, value, days = 365) { 77 | const date = new Date(); 78 | date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); 79 | const expires = "expires=" + date.toUTCString(); 80 | const secure = location.protocol === 'https:' ? '; secure' : ''; 81 | document.cookie = name + "=" + encodeURIComponent(value) + ";" + expires + ";path=/;SameSite=Lax" + secure; 82 | }, 83 | 84 | // 更新收藏按钮UI 85 | updateFavoriteButtonUI(isFav) { 86 | const favoriteBtn = document.querySelector("[data-favorite]"); 87 | if (!favoriteBtn) return; 88 | 89 | const iconElement = favoriteBtn.querySelector(".material-symbols-rounded"); 90 | if (!iconElement) return; 91 | 92 | if (isFav) { 93 | iconElement.textContent = "favorite"; 94 | iconElement.style.color = "#ff3e55"; 95 | favoriteBtn.classList.add("active"); 96 | } else { 97 | iconElement.textContent = "favorite_border"; 98 | iconElement.style.color = ""; 99 | favoriteBtn.classList.remove("active"); 100 | } 101 | } 102 | }; 103 | 104 | /** 105 | * 主题控制 - 读取li-darkmode cookie并应用相应主题 106 | * 0: 浅色主题(默认), 1: 深色主题 107 | */ 108 | const themeControl = { 109 | // 获取指定名称的cookie值 110 | getCookie(name) { 111 | const cookies = document.cookie.split(';'); 112 | for (let i = 0; i < cookies.length; i++) { 113 | const cookie = cookies[i].trim(); 114 | if (cookie.startsWith(name + '=')) { 115 | return cookie.substring(name.length + 1); 116 | } 117 | } 118 | return null; 119 | }, 120 | 121 | // 设置cookie 122 | setCookie(name, value, days = 365) { 123 | const date = new Date(); 124 | date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); 125 | const expires = "expires=" + date.toUTCString(); 126 | const secure = location.protocol === 'https:' ? '; secure' : ''; 127 | document.cookie = name + "=" + value + ";" + expires + ";path=/;SameSite=Lax" + secure; 128 | }, 129 | 130 | // 切换主题 131 | toggleTheme() { 132 | const darkModeCookie = this.getCookie('li-darkmode'); 133 | 134 | if (darkModeCookie === '1') { 135 | // 切换到浅色主题 136 | this.setCookie('li-darkmode', '0'); 137 | } else { 138 | // 切换到深色主题 139 | this.setCookie('li-darkmode', '1'); 140 | } 141 | 142 | this.applyTheme(); 143 | }, 144 | 145 | // 应用主题样式 146 | applyTheme() { 147 | const darkModeCookie = this.getCookie('li-darkmode'); 148 | 149 | if (darkModeCookie === '1') { 150 | // 深色主题 151 | document.documentElement.classList.add('dark-theme'); 152 | document.documentElement.classList.remove('light-theme'); 153 | } else { 154 | // 浅色主题(默认)或cookie不存在 155 | document.documentElement.classList.remove('dark-theme'); 156 | document.documentElement.classList.add('light-theme'); 157 | } 158 | }, 159 | 160 | // 初始化主题控制 161 | init() { 162 | // 添加默认的light-theme类 163 | document.documentElement.classList.add('light-theme'); 164 | 165 | // 首次加载应用主题 166 | this.applyTheme(); 167 | 168 | // 监听storage事件,响应同域下其他页面的cookie变化 169 | window.addEventListener('storage', (event) => { 170 | if (event.key === 'li-darkmode') { 171 | this.applyTheme(); 172 | } 173 | }); 174 | 175 | // 定期检查cookie变化(备用方案) 176 | setInterval(() => this.applyTheme(), 2000); 177 | } 178 | }; 179 | 180 | /** 181 | * 音乐播放器API接口 182 | * 根据歌曲详情页URL获取歌曲信息 183 | * @param {string} songId - 歌曲ID(详情页URL) 184 | * @returns {Promise} - 返回歌曲信息对象 185 | */ 186 | const fetchSongInfo = async (songId) => { 187 | try { 188 | if (!songId) return null; 189 | 190 | if (!songId.includes('/music/')) { 191 | console.warn('详情页URL格式可能有误,不包含/music/路径'); 192 | } 193 | 194 | // 存储完整的详情页URL 195 | const detailUrl = songId; 196 | 197 | // 获取歌曲详情页 - 使用简单请求避免CORS预检 198 | console.log('正在发送详情页请求...'); 199 | const response = await fetch(detailUrl).catch(error => { 200 | console.error('详情页请求网络错误:', error); 201 | throw new Error(`详情页请求失败: ${error.message}`); 202 | }); 203 | 204 | if (!response.ok) { 205 | console.error('详情页请求失败,状态码:', response.status); 206 | throw new Error(`获取歌曲详情失败: ${response.status}`); 207 | } 208 | 209 | const html = await response.text(); 210 | 211 | // 输出HTML结构以便于分析 212 | console.log('HTML文档结构检查:', 213 | (html.includes('window.mp3_id') ? '包含window.mp3_id' : '不包含window.mp3_id') + ', ' + 214 | (html.includes('window.play_id') ? '包含window.play_id' : '不包含window.play_id') + ', ' + 215 | (html.includes('window.appData') ? '包含window.appData' : '不包含window.appData') 216 | ); 217 | 218 | // 从HTML中提取关键信息 219 | let mp3Id = '', playId = '', mp3Title = '', mp3Author = '', mp3Cover = ''; 220 | 221 | // 首先尝试从appData中提取数据(新格式) 222 | const appDataMatch = html.match(/window\.appData\s*=\s*(\{.*?\});/s); 223 | if (appDataMatch && appDataMatch[1]) { 224 | try { 225 | const appData = JSON.parse(appDataMatch[1]); 226 | mp3Id = appData.mp3_id?.toString() || ''; 227 | playId = appData.play_id || ''; 228 | mp3Title = appData.mp3_title || ''; 229 | mp3Author = appData.mp3_author || ''; 230 | mp3Cover = appData.mp3_cover || ''; 231 | console.log('成功从appData提取数据'); 232 | } catch (e) { 233 | console.error('解析appData失败:', e); 234 | } 235 | } 236 | 237 | // 如果appData中没有提取到数据,则使用原有的提取逻辑作为备用 238 | if (!playId) { 239 | console.log('使用备用方法提取数据'); 240 | // 尝试多种正则匹配mp3_id 241 | const mp3IdMatch = html.match(/window\.mp3_id\s*=\s*['"]([^'"]+)['"]/); 242 | // 尝试替代模式 243 | const mp3IdAltMatch = html.match(/mp3_id\s*=\s*['"]([^'"]+)['"]/); 244 | if (mp3IdMatch && mp3IdMatch[1]) { 245 | mp3Id = mp3IdMatch[1]; 246 | } else if (mp3IdAltMatch && mp3IdAltMatch[1]) { 247 | mp3Id = mp3IdAltMatch[1]; 248 | } 249 | 250 | // 尝试多种正则匹配play_id 251 | const playIdMatch = html.match(/window\.play_id\s*=\s*['"]([^'"]+)['"]/); 252 | // 尝试替代模式 253 | const playIdAltMatch = html.match(/play_id\s*=\s*['"]([^'"]+)['"]/); 254 | const playIdAlt2Match = html.match(/data-play-id\s*=\s*['"]([^'"]+)['"]/); 255 | if (playIdMatch && playIdMatch[1]) { 256 | playId = playIdMatch[1]; 257 | } else if (playIdAltMatch && playIdAltMatch[1]) { 258 | playId = playIdAltMatch[1]; 259 | } else if (playIdAlt2Match && playIdAlt2Match[1]) { 260 | playId = playIdAlt2Match[1]; 261 | } 262 | 263 | // 尝试多种正则匹配mp3_title 264 | const mp3TitleMatch = html.match(/window\.mp3_title\s*=\s*['"]([^'"]+)['"]/); 265 | // 尝试替代模式 266 | const mp3TitleAltMatch = html.match(/(.*?)(?:\s*[-|]\s*.*?)?<\/title>/); 267 | const mp3TitleAlt2Match = html.match(/class=["']title["'][^>]*>(.*?)<\/[^>]+>/); 268 | if (mp3TitleMatch && mp3TitleMatch[1]) { 269 | mp3Title = mp3TitleMatch[1]; 270 | } else if (mp3TitleAltMatch && mp3TitleAltMatch[1]) { 271 | mp3Title = mp3TitleAltMatch[1].trim(); 272 | } else if (mp3TitleAlt2Match && mp3TitleAlt2Match[1]) { 273 | mp3Title = mp3TitleAlt2Match[1].trim(); 274 | } 275 | 276 | // 尝试多种正则匹配mp3_author 277 | const mp3AuthorMatch = html.match(/window\.mp3_author\s*=\s*['"]([^'"]+)['"]/); 278 | // 尝试替代模式 279 | const mp3AuthorAltMatch = html.match(/class=["']author["'][^>]*>(.*?)<\/[^>]+>/); 280 | const mp3AuthorAlt2Match = html.match(/歌手[::]\s*<[^>]+>(.*?)<\/[^>]+>/); 281 | if (mp3AuthorMatch && mp3AuthorMatch[1]) { 282 | mp3Author = mp3AuthorMatch[1]; 283 | } else if (mp3AuthorAltMatch && mp3AuthorAltMatch[1]) { 284 | mp3Author = mp3AuthorAltMatch[1].trim(); 285 | } else if (mp3AuthorAlt2Match && mp3AuthorAlt2Match[1]) { 286 | mp3Author = mp3AuthorAlt2Match[1].trim(); 287 | } 288 | 289 | // 尝试多种正则匹配mp3_cover 290 | const mp3CoverMatch = html.match(/window\.mp3_cover\s*=\s*['"]([^'"]+)['"]/); 291 | // 尝试替代模式 292 | const mp3CoverAltMatch = html.match(/class=["']cover["'][^>]*src=["']([^'"]+)["']/); 293 | const mp3CoverAlt2Match = html.match(/<img[^>]*src=["']([^'"]+(?:jpg|png|gif|jpeg))["'][^>]*class=["'][^"']*cover/); 294 | if (mp3CoverMatch && mp3CoverMatch[1]) { 295 | mp3Cover = mp3CoverMatch[1]; 296 | } else if (mp3CoverAltMatch && mp3CoverAltMatch[1]) { 297 | mp3Cover = mp3CoverAltMatch[1]; 298 | } else if (mp3CoverAlt2Match && mp3CoverAlt2Match[1]) { 299 | mp3Cover = mp3CoverAlt2Match[1]; 300 | } 301 | } 302 | 303 | // 如果没有封面图,使用默认封面 304 | if (!mp3Cover) { 305 | mp3Cover = './assets/images/none.webp'; 306 | console.log('使用默认封面图'); 307 | } 308 | 309 | // 如果没有提取到关键信息,输出更详细的信息 310 | if (!playId) { 311 | console.error('无法提取play_id,请检查HTML结构'); 312 | throw new Error('无法从详情页获取歌曲信息,请检查控制台输出'); 313 | } 314 | 315 | console.log('正在请求歌曲数据...'); 316 | 317 | // 使用URLSearchParams创建标准的URL编码格式请求体 318 | const params = new URLSearchParams(); 319 | params.append('id', playId); 320 | 321 | // 获取真正的歌曲直链 322 | const playUrlResponse = await fetch('https://proxy-any.92li.uk/https://www.gequbao.com/api/play-url', { 323 | method: 'POST', 324 | headers: { 325 | 'Content-Type': 'application/x-www-form-urlencoded' 326 | }, 327 | referrerPolicy: 'no-referrer', 328 | body: params 329 | }).catch(error => { 330 | console.error('API请求网络错误:', error); 331 | throw new Error(`API请求网络错误: ${error.message}`); 332 | }); 333 | 334 | if (!playUrlResponse.ok) { 335 | throw new Error(`获取播放链接失败: ${playUrlResponse.status}`); 336 | } 337 | 338 | // 获取响应文本 339 | const responseText = await playUrlResponse.text(); 340 | 341 | // 解析响应 342 | let playUrlData; 343 | try { 344 | playUrlData = JSON.parse(responseText); 345 | console.log('成功获取播放链接'); 346 | } catch (jsonError) { 347 | console.error('JSON解析错误:', jsonError); 348 | throw new Error(`解析API响应失败: ${jsonError.message}`); 349 | } 350 | 351 | // 检查API响应格式和字段 352 | if (!playUrlData) { 353 | throw new Error('API返回数据为空'); 354 | } 355 | 356 | if (typeof playUrlData.code === 'undefined') { 357 | console.error('API返回格式异常: 缺少code字段'); 358 | throw new Error('API返回格式异常: 缺少code字段'); 359 | } 360 | 361 | if (playUrlData.code !== 1) { 362 | console.error('API返回错误:', playUrlData.msg || '未知错误'); 363 | throw new Error(`API返回错误: ${playUrlData.msg || '未知错误'}`); 364 | } 365 | 366 | if (!playUrlData.data) { 367 | console.error('API返回异常: 缺少data字段'); 368 | throw new Error('API返回异常: 缺少data字段'); 369 | } 370 | 371 | if (!playUrlData.data.url) { 372 | console.error('API返回异常: 缺少播放链接'); 373 | throw new Error('API返回异常: 缺少播放链接'); 374 | } 375 | 376 | let mp3Url = playUrlData.data.url; 377 | 378 | // 处理特殊的返回链接 379 | if (mp3Url.indexOf('antiserver.kuwo.cn') !== -1) { 380 | try { 381 | const url = new URL(mp3Url); 382 | url.searchParams.set('type', 'convert_url3'); 383 | 384 | // 使用简单请求 385 | const jsonpResponse = await fetch(`${url.href}?callback=?`); 386 | const jsonpText = await jsonpResponse.text(); 387 | 388 | // 从JSONP响应中提取JSON 389 | const jsonMatch = jsonpText.match(/\?\((.*)\)/); 390 | if (jsonMatch && jsonMatch[1]) { 391 | const jsonData = JSON.parse(jsonMatch[1]); 392 | if (jsonData.code === 200 && jsonData.url) { 393 | mp3Url = jsonData.url; 394 | } 395 | } 396 | } catch (error) { 397 | console.error('处理特殊链接失败:', error); 398 | } 399 | } 400 | 401 | return { 402 | id: mp3Id, 403 | title: mp3Title, 404 | artist: mp3Author, 405 | posterUrl: mp3Cover, 406 | backgroundImage: mp3Cover, 407 | musicPath: mp3Url, 408 | }; 409 | } catch (error) { 410 | console.error('获取歌曲信息失败:', error); 411 | return null; 412 | } 413 | }; 414 | 415 | /** 416 | * 使用渐变效果加载图片 417 | * @param {HTMLImageElement} imgElement - 要更新的图片元素 418 | * @param {string} src - 新图片的URL 419 | * @param {Function} callback - 图片加载完成后的回调函数 420 | */ 421 | const loadImageWithFade = (imgElement, src, callback) => { 422 | // 创建新图片对象用于预加载 423 | const newImg = new Image(); 424 | newImg.src = src; 425 | 426 | // 当新图片加载完成时 427 | newImg.onload = () => { 428 | // 先将当前图片淡出 429 | imgElement.style.opacity = 0; 430 | 431 | // 等待短暂淡出动画后更换图片源 432 | setTimeout(() => { 433 | imgElement.src = src; 434 | 435 | // 将新图片淡入 436 | imgElement.style.opacity = 1; 437 | 438 | // 如果有回调函数则执行 439 | if (typeof callback === 'function') { 440 | callback(); 441 | } 442 | }, 300); 443 | }; 444 | 445 | // 加载失败时的处理 446 | newImg.onerror = (error) => { 447 | console.error('图片加载失败:', error); 448 | // 确保图片元素可见 449 | imgElement.style.opacity = 1; 450 | }; 451 | }; 452 | 453 | /** 454 | * 更新播放器UI 455 | * @param {Object} songInfo - 歌曲信息对象 456 | */ 457 | const updatePlayerUI = (songInfo) => { 458 | try { 459 | const playerBanner = document.querySelector("[data-player-banner]"); 460 | const playerTitle = document.querySelector("[data-title]"); 461 | const playerArtist = document.querySelector("[data-artist]"); 462 | const loadingOverlay = document.getElementById("loadingOverlay"); 463 | 464 | // 显示加载覆盖层(以防它已经被隐藏) 465 | if (loadingOverlay) { 466 | loadingOverlay.classList.remove("hidden"); 467 | } 468 | 469 | // 更新播放器标题和艺术家信息 470 | if (playerTitle) playerTitle.textContent = songInfo.title; 471 | if (playerArtist) playerArtist.textContent = songInfo.artist; 472 | 473 | // 设置音频源 474 | audioSource.src = songInfo.musicPath; 475 | 476 | // 存储当前歌曲信息到全局变量,以便收藏功能访问 477 | window.currentSong = { 478 | id: songInfo.id, 479 | title: songInfo.title, 480 | artist: songInfo.artist 481 | }; 482 | 483 | // 更新收藏状态 484 | favoriteControl.updateFavoriteButtonUI(favoriteControl.isFavorite(songInfo.id)); 485 | 486 | audioSource.addEventListener("loadeddata", () => { 487 | // 更新音频时长 488 | updateDuration(); 489 | 490 | // 当音频数据加载完成后,隐藏加载覆盖层 491 | if (loadingOverlay) { 492 | loadingOverlay.classList.add("hidden"); 493 | } 494 | }); 495 | 496 | // 处理封面图片加载 497 | if (playerBanner) { 498 | // 先设置默认封面 499 | if (!playerBanner.src || playerBanner.src === "") { 500 | playerBanner.src = "./assets/images/none.webp"; 501 | playerBanner.setAttribute("alt", "默认封面"); 502 | } 503 | 504 | // 如果提供了封面URL且不是默认封面,使用渐变效果加载实际封面 505 | if (songInfo.posterUrl && songInfo.posterUrl !== "./assets/images/none.webp") { 506 | loadImageWithFade(playerBanner, songInfo.posterUrl, () => { 507 | playerBanner.setAttribute("alt", `${songInfo.title} 专辑封面`); 508 | }); 509 | } 510 | } 511 | 512 | // 设置背景图像 513 | if (songInfo.backgroundImage) { 514 | document.body.style.backgroundImage = `url(${songInfo.backgroundImage})`; 515 | } 516 | } catch (error) { 517 | console.error('更新播放器UI时出错:', error); 518 | 519 | // 发生错误时也应该隐藏加载覆盖层 520 | const loadingOverlay = document.getElementById("loadingOverlay"); 521 | if (loadingOverlay) { 522 | loadingOverlay.classList.add("hidden"); 523 | } 524 | 525 | // 显示错误信息 526 | const playerTitle = document.querySelector("[data-title]"); 527 | const playerArtist = document.querySelector("[data-artist]"); 528 | 529 | if (playerTitle) playerTitle.textContent = "加载失败"; 530 | if (playerArtist) playerArtist.textContent = error.message || "UI更新错误"; 531 | } 532 | }; 533 | 534 | /** 535 | * 初始化音乐播放器 536 | * @param {string} songId - 歌曲详情页URL,如果不提供则尝试从URL参数获取 537 | */ 538 | const initMusicPlayer = async (songId) => { 539 | try { 540 | // 显示加载覆盖层 541 | const loadingOverlay = document.getElementById("loadingOverlay"); 542 | if (loadingOverlay) { 543 | loadingOverlay.classList.remove("hidden"); 544 | } 545 | 546 | // 如果没有提供songId,尝试从URL参数获取 547 | if (!songId) { 548 | const urlParams = new URLSearchParams(window.location.search); 549 | songId = urlParams.get('url'); 550 | } 551 | 552 | if (!songId) { 553 | console.error('未提供歌曲URL'); 554 | 555 | // 更新错误信息 556 | const playerTitle = document.querySelector("[data-title]"); 557 | const playerArtist = document.querySelector("[data-artist]"); 558 | 559 | if (playerTitle) playerTitle.textContent = "未提供歌曲链接"; 560 | if (playerArtist) playerArtist.textContent = "请提供有效的歌曲URL"; 561 | 562 | // 隐藏加载覆盖层 563 | if (loadingOverlay) { 564 | loadingOverlay.classList.add("hidden"); 565 | } 566 | 567 | return; 568 | } 569 | 570 | console.log('正在获取歌曲信息,URL:', songId); 571 | 572 | // 获取歌曲信息 573 | const songInfo = await fetchSongInfo(songId); 574 | if (!songInfo) { 575 | console.error('获取歌曲信息失败'); 576 | 577 | // 显示错误信息到界面 578 | const playerTitle = document.querySelector("[data-title]"); 579 | const playerArtist = document.querySelector("[data-artist]"); 580 | 581 | if (playerTitle) playerTitle.textContent = "获取歌曲失败"; 582 | if (playerArtist) playerArtist.textContent = "请尝试其他歌曲"; 583 | 584 | // 隐藏加载覆盖层 585 | if (loadingOverlay) { 586 | loadingOverlay.classList.add("hidden"); 587 | } 588 | 589 | return; 590 | } 591 | 592 | // 更新播放器UI 593 | updatePlayerUI(songInfo); 594 | } catch (error) { 595 | // 详细输出错误信息 596 | console.error('初始化音乐播放器失败:', error); 597 | console.error('错误堆栈:', error.stack); 598 | 599 | // 显示错误信息到界面 600 | const playerTitle = document.querySelector("[data-title]"); 601 | const playerArtist = document.querySelector("[data-artist]"); 602 | 603 | if (playerTitle) playerTitle.textContent = "加载失败"; 604 | if (playerArtist) playerArtist.textContent = error.message || "未知错误"; 605 | 606 | // 发生错误时也应该隐藏加载覆盖层 607 | const loadingOverlay = document.getElementById("loadingOverlay"); 608 | if (loadingOverlay) { 609 | loadingOverlay.classList.add("hidden"); 610 | } 611 | } 612 | }; 613 | 614 | /** 615 | * 为多个元素添加相同的事件监听器 616 | */ 617 | const addEventOnElements = function (elements, eventType, callback) { 618 | if (!elements || elements.length === 0) return; 619 | 620 | for (let i = 0, len = elements.length; i < len; i++) { 621 | elements[i].addEventListener(eventType, callback); 622 | } 623 | } 624 | 625 | // 初始化音频源 626 | const audioSource = new Audio(); 627 | 628 | /** 629 | * 播放控制功能 630 | */ 631 | 632 | // 播放/暂停按钮 633 | const playBtn = document.querySelector("[data-play-btn]"); 634 | let playInterval; 635 | 636 | const playMusic = function () { 637 | try { 638 | if (audioSource.paused) { 639 | audioSource.play().catch(e => console.error('Error playing audio:', e)); 640 | if (playBtn) playBtn.classList.add("active"); 641 | playInterval = setInterval(updateRunningTime, 500); 642 | } else { 643 | audioSource.pause(); 644 | if (playBtn) playBtn.classList.remove("active"); 645 | clearInterval(playInterval); 646 | } 647 | } catch (error) { 648 | console.error('Error in playMusic function:', error); 649 | } 650 | } 651 | 652 | if (playBtn) playBtn.addEventListener("click", playMusic); 653 | 654 | // 下载按钮 655 | const downloadBtn = document.querySelector("[data-download]"); 656 | if (downloadBtn) { 657 | downloadBtn.addEventListener("click", function() { 658 | try { 659 | // 创建一个临时链接来下载音乐 660 | const a = document.createElement('a'); 661 | a.href = audioSource.src; 662 | const titleElement = document.querySelector("[data-title]"); 663 | a.download = (titleElement ? titleElement.textContent : 'music') + '.mp3'; 664 | document.body.appendChild(a); 665 | a.click(); 666 | document.body.removeChild(a); 667 | } catch (error) { 668 | console.error('Error downloading music:', error); 669 | } 670 | }); 671 | } 672 | 673 | // 循环播放按钮 674 | const loopBtn = document.querySelector("[data-loop]"); 675 | let isLooping = false; 676 | 677 | if (loopBtn) { 678 | loopBtn.addEventListener("click", function() { 679 | try { 680 | isLooping = !isLooping; 681 | audioSource.loop = isLooping; 682 | this.classList.toggle("active", isLooping); 683 | } catch (error) { 684 | console.error('Error toggling loop:', error); 685 | } 686 | }); 687 | } 688 | 689 | /** 690 | * 时间和进度条处理 691 | */ 692 | 693 | // 播放进度和时长显示 694 | const playerDuration = document.querySelector("[data-duration]"); 695 | const playerRunningTime = document.querySelector("[data-running-time]"); 696 | const playerSeekRange = document.querySelector("[data-seek]"); 697 | 698 | // 将秒转换为时间码格式 699 | const getTimecode = function (duration) { 700 | try { 701 | const minutes = Math.floor(duration / 60); 702 | const seconds = Math.ceil(duration - (minutes * 60)); 703 | const timecode = `${minutes}:${seconds < 10 ? "0" : ""}${seconds}`; 704 | return timecode; 705 | } catch (error) { 706 | console.error('Error formatting timecode:', error); 707 | return "0:00"; 708 | } 709 | } 710 | 711 | // 更新音频时长 712 | const updateDuration = function () { 713 | try { 714 | if (playerSeekRange && playerDuration) { 715 | playerSeekRange.max = Math.ceil(audioSource.duration); 716 | playerDuration.textContent = getTimecode(Number(playerSeekRange.max)); 717 | } 718 | } catch (error) { 719 | console.error('Error updating duration:', error); 720 | } 721 | } 722 | 723 | // 更新播放进度 724 | const updateRunningTime = function () { 725 | try { 726 | if (playerSeekRange && playerRunningTime) { 727 | playerSeekRange.value = audioSource.currentTime; 728 | playerRunningTime.textContent = getTimecode(audioSource.currentTime); 729 | updateRangeFill(); 730 | } 731 | isMusicEnd(); 732 | } catch (error) { 733 | console.error('Error updating running time:', error); 734 | } 735 | } 736 | 737 | // 更新进度条填充 738 | const ranges = document.querySelectorAll("[data-range]"); 739 | const rangeFills = document.querySelectorAll("[data-range-fill]"); 740 | 741 | const updateRangeFill = function () { 742 | try { 743 | let element = this; 744 | if (!element && ranges && ranges.length > 0) { 745 | // 使用当前正在更新的元素 746 | element = ranges[0]; 747 | } 748 | 749 | if (element) { 750 | // 找到对应的rangeFill元素 751 | let rangeFill; 752 | if (this) { 753 | // 如果是由事件触发,查找相邻的rangeFill元素 754 | rangeFill = this.nextElementSibling; 755 | } else { 756 | // 否则更新所有range元素 757 | for (let i = 0; i < ranges.length; i++) { 758 | const range = ranges[i]; 759 | const fill = rangeFills[i]; 760 | if (fill) { 761 | const rangeValue = (range.value / range.max) * 100; 762 | fill.style.width = `${rangeValue}%`; 763 | } 764 | } 765 | return; 766 | } 767 | 768 | if (rangeFill) { 769 | const rangeValue = (element.value / element.max) * 100; 770 | rangeFill.style.width = `${rangeValue}%`; 771 | } 772 | } 773 | } catch (error) { 774 | console.error('Error updating range fill:', error); 775 | } 776 | } 777 | 778 | addEventOnElements(ranges, "input", updateRangeFill); 779 | 780 | // 拖动进度条改变播放位置 781 | const seek = function () { 782 | try { 783 | if (playerSeekRange && playerRunningTime) { 784 | audioSource.currentTime = playerSeekRange.value; 785 | playerRunningTime.textContent = getTimecode(playerSeekRange.value); 786 | } 787 | } catch (error) { 788 | console.error('Error seeking:', error); 789 | } 790 | } 791 | 792 | if (playerSeekRange) { 793 | playerSeekRange.addEventListener("input", seek); 794 | } 795 | 796 | // 检查音乐是否播放完毕 797 | const isMusicEnd = function () { 798 | try { 799 | if (audioSource.ended) { 800 | if (playBtn) playBtn.classList.remove("active"); 801 | clearInterval(playInterval); 802 | if (playerSeekRange) { 803 | playerSeekRange.value = 0; 804 | if (playerRunningTime) { 805 | playerRunningTime.textContent = getTimecode(0); 806 | } 807 | updateRangeFill(); 808 | } 809 | } 810 | } catch (error) { 811 | console.error('Error checking if music ended:', error); 812 | } 813 | } 814 | 815 | /** 816 | * 音量控制 817 | */ 818 | 819 | // 全局音量控制元素引用 820 | let volumeRange; 821 | let volumeBtn; 822 | let muteState = false; 823 | 824 | const changeVolume = function () { 825 | try { 826 | // 只在宽屏幕上执行 827 | if (window.innerWidth < 992) return; 828 | 829 | if (volumeRange && volumeBtn) { 830 | audioSource.volume = volumeRange.value; 831 | 832 | if (audioSource.volume <= 0) { 833 | muteState = true; 834 | volumeBtn.children[0].textContent = "volume_off"; 835 | } else { 836 | muteState = false; 837 | volumeBtn.children[0].textContent = "volume_up"; 838 | } 839 | } 840 | } catch (error) { 841 | console.error('Error changing volume:', error); 842 | } 843 | } 844 | 845 | const muteVolume = function () { 846 | try { 847 | // 只在宽屏幕上执行 848 | if (window.innerWidth < 992) return; 849 | 850 | if (volumeBtn && volumeRange) { 851 | if (!muteState) { 852 | muteState = true; 853 | volumeBtn.children[0].textContent = "volume_off"; 854 | audioSource.volume = 0; 855 | volumeRange.value = 0; 856 | } else { 857 | muteState = false; 858 | volumeBtn.children[0].textContent = "volume_up"; 859 | audioSource.volume = 1; 860 | volumeRange.value = 1; 861 | } 862 | 863 | // 直接更新填充效果 864 | const rangeValue = (volumeRange.value / volumeRange.max) * 100; 865 | const rangeFill = volumeRange.nextElementSibling; 866 | if (rangeFill) { 867 | rangeFill.style.width = `${rangeValue}%`; 868 | } 869 | } 870 | } catch (error) { 871 | console.error('Error toggling mute:', error); 872 | } 873 | } 874 | 875 | /** 876 | * 修复音量控制器样式问题 877 | * 通过在指定容器中创建音量控制器元素 878 | * 只在宽屏(992px及以上)显示 879 | */ 880 | const fixVolumeSliderStyle = function() { 881 | const volumeContainer = document.getElementById('volume-container'); 882 | if (!volumeContainer) return; 883 | 884 | // 清空现有内容 885 | volumeContainer.innerHTML = ''; 886 | 887 | // 只在宽屏幕上创建音量控制器 888 | if (window.innerWidth >= 992) { 889 | // 创建新的容器 890 | const newVolumeContainer = document.createElement('div'); 891 | newVolumeContainer.className = 'volume'; 892 | newVolumeContainer.style.cssText = 'background: none !important; background-color: transparent !important;'; 893 | 894 | // 创建新的按钮 895 | const newButton = document.createElement('button'); 896 | newButton.className = 'btn-icon'; 897 | newButton.dataset.volumeBtn = ''; 898 | newButton.innerHTML = `<span class="material-symbols-rounded">volume_up</span>`; 899 | 900 | // 创建新的滑块容器 901 | const newWrapper = document.createElement('div'); 902 | newWrapper.className = 'range-wrapper'; 903 | newWrapper.style.cssText = 'background: none !important; background-color: transparent !important;'; 904 | 905 | // 创建新的滑块 906 | const newSlider = document.createElement('input'); 907 | newSlider.type = 'range'; 908 | newSlider.step = '0.05'; 909 | newSlider.max = '1'; 910 | newSlider.value = '1'; // 默认音量为最大 911 | newSlider.className = 'range volume-slider'; 912 | newSlider.dataset.range = ''; 913 | newSlider.dataset.volume = ''; 914 | newSlider.style.cssText = 'background: none !important; background-color: transparent !important; -webkit-appearance: none !important; appearance: none !important;'; 915 | 916 | // 创建填充元素 917 | const newFill = document.createElement('div'); 918 | newFill.className = 'range-fill'; 919 | newFill.dataset.rangeFill = ''; 920 | 921 | // 组装新的音量控制器 922 | newWrapper.appendChild(newSlider); 923 | newWrapper.appendChild(newFill); 924 | newVolumeContainer.appendChild(newButton); 925 | newVolumeContainer.appendChild(newWrapper); 926 | 927 | // 将音量控制器添加到指定容器 928 | volumeContainer.appendChild(newVolumeContainer); 929 | 930 | // 更新全局变量引用 931 | volumeRange = newSlider; 932 | volumeBtn = newButton; 933 | 934 | // 设置初始音频音量 935 | if (audioSource) { 936 | audioSource.volume = newSlider.value; 937 | } 938 | 939 | // 添加事件监听器 940 | newSlider.addEventListener('input', function() { 941 | changeVolume(); 942 | // 直接更新此滑块的填充效果 943 | const rangeValue = (this.value / this.max) * 100; 944 | newFill.style.width = `${rangeValue}%`; 945 | }); 946 | newButton.addEventListener('click', muteVolume); 947 | 948 | // 添加必要的CSS样式 949 | const styleId = 'volume-slider-style'; 950 | let style = document.getElementById(styleId); 951 | 952 | if (!style) { 953 | style = document.createElement('style'); 954 | style.id = styleId; 955 | style.textContent = ` 956 | .volume { 957 | display: flex; 958 | align-items: center; 959 | gap: 4px; 960 | background-color: transparent !important; 961 | z-index: 5; 962 | } 963 | 964 | @media (min-width: 992px) { 965 | .volume { 966 | margin-block-start: -30px; 967 | width: 150px; 968 | min-width: 150px; 969 | padding: 4px 8px; 970 | border-radius: var(--radius-pill); 971 | margin-right: -8px; 972 | } 973 | 974 | .volume .btn-icon { 975 | flex-shrink: 0; 976 | margin-right: 4px; 977 | width: 36px; 978 | height: 36px; 979 | } 980 | 981 | .volume .range-wrapper { 982 | width: 100%; 983 | max-width: 100px; 984 | } 985 | } 986 | 987 | @media (max-width: 991px) { 988 | .volume { 989 | display: none !important; 990 | } 991 | } 992 | 993 | .volume input[type="range"]::-webkit-slider-runnable-track { 994 | appearance: none !important; 995 | background-color: var(--surface-variant) !important; 996 | height: 6px !important; 997 | border-radius: var(--radius-pill) !important; 998 | border: none !important; 999 | outline: none !important; 1000 | } 1001 | 1002 | .volume input[type="range"]::-moz-range-track { 1003 | appearance: none !important; 1004 | background-color: var(--surface-variant) !important; 1005 | height: 6px !important; 1006 | border-radius: var(--radius-pill) !important; 1007 | border: none !important; 1008 | } 1009 | 1010 | .volume input[type="range"]::-webkit-slider-thumb { 1011 | appearance: none !important; 1012 | -webkit-appearance: none !important; 1013 | background-color: var(--primary) !important; 1014 | width: 16px !important; 1015 | height: 16px !important; 1016 | margin-block-start: -5px !important; 1017 | border-radius: var(--radius-pill) !important; 1018 | border: none !important; 1019 | box-shadow: none !important; 1020 | } 1021 | 1022 | .volume input[type="range"]::-moz-range-thumb { 1023 | appearance: none !important; 1024 | background-color: var(--primary) !important; 1025 | width: 16px !important; 1026 | height: 16px !important; 1027 | border-radius: var(--radius-pill) !important; 1028 | border: none !important; 1029 | box-shadow: none !important; 1030 | } 1031 | 1032 | /* 深色主题下的音量控制器样式 */ 1033 | :root.dark-theme .volume input[type="range"]::-webkit-slider-thumb { 1034 | background-color: var(--light-sky-blue) !important; 1035 | } 1036 | 1037 | :root.dark-theme .volume input[type="range"]::-moz-range-thumb { 1038 | background-color: var(--light-sky-blue) !important; 1039 | } 1040 | 1041 | /* 浅色主题下的音量控制器样式 */ 1042 | :root.light-theme .volume input[type="range"]::-webkit-slider-thumb { 1043 | background-color: var(--light-sky-blue) !important; 1044 | } 1045 | 1046 | :root.light-theme .volume input[type="range"]::-moz-range-thumb { 1047 | background-color: var(--light-sky-blue) !important; 1048 | } 1049 | `; 1050 | document.head.appendChild(style); 1051 | } 1052 | 1053 | // 初始化滑块填充效果 - 确保初始状态正确 1054 | const initialValue = (newSlider.value / newSlider.max) * 100; 1055 | newFill.style.width = `${initialValue}%`; 1056 | } else { 1057 | // 非宽屏下,设置全局变量为null 1058 | volumeRange = null; 1059 | volumeBtn = null; 1060 | } 1061 | } 1062 | 1063 | // 添加窗口大小改变事件监听器,以响应屏幕大小变化 1064 | window.addEventListener('resize', fixVolumeSliderStyle); 1065 | 1066 | // 初始化播放器 1067 | window.addEventListener('DOMContentLoaded', () => { 1068 | // 初始化主题控制 1069 | themeControl.init(); 1070 | 1071 | // 添加主题切换按钮事件监听 1072 | const themeToggleBtn = document.querySelector('[data-theme-toggle]'); 1073 | if (themeToggleBtn) { 1074 | themeToggleBtn.addEventListener('click', () => { 1075 | themeControl.toggleTheme(); 1076 | 1077 | // 根据当前主题更新图标 1078 | const darkModeCookie = themeControl.getCookie('li-darkmode'); 1079 | const iconElement = themeToggleBtn.querySelector('.material-symbols-rounded'); 1080 | 1081 | if (iconElement) { 1082 | iconElement.textContent = darkModeCookie === '1' ? 'light_mode' : 'dark_mode'; 1083 | } 1084 | }); 1085 | 1086 | // 初始化图标状态 1087 | const darkModeCookie = themeControl.getCookie('li-darkmode'); 1088 | const iconElement = themeToggleBtn.querySelector('.material-symbols-rounded'); 1089 | 1090 | if (iconElement && darkModeCookie === '1') { 1091 | iconElement.textContent = 'light_mode'; 1092 | } 1093 | } 1094 | 1095 | // 初始化音乐播放器 1096 | initMusicPlayer(); 1097 | 1098 | // 修复音量控制器样式 1099 | fixVolumeSliderStyle(); 1100 | 1101 | // 收藏按钮事件 1102 | const favoriteBtn = document.querySelector("[data-favorite]"); 1103 | if (favoriteBtn) { 1104 | favoriteBtn.addEventListener("click", function() { 1105 | try { 1106 | if (!window.currentSong || !window.currentSong.id) { 1107 | console.warn('无法收藏:当前没有播放歌曲或歌曲ID不可用'); 1108 | return; 1109 | } 1110 | 1111 | const songId = window.currentSong.id; 1112 | const title = window.currentSong.title; 1113 | const artist = window.currentSong.artist; 1114 | 1115 | // 检查是否已收藏,执行相应操作 1116 | if (favoriteControl.isFavorite(songId)) { 1117 | // 取消收藏 1118 | favoriteControl.removeFavorite(songId); 1119 | favoriteControl.updateFavoriteButtonUI(false); 1120 | } else { 1121 | // 添加收藏 1122 | favoriteControl.addFavorite(songId, title, artist); 1123 | favoriteControl.updateFavoriteButtonUI(true); 1124 | } 1125 | } catch (error) { 1126 | console.error('Error toggling favorite:', error); 1127 | } 1128 | }); 1129 | } 1130 | }); --------------------------------------------------------------------------------