返回
查看: 0|回复: 0
简简单单听个音乐 - 一个Html文件打造个人音乐库
网络资源

简简单单听个音乐 - 一个Html文件打造个人音乐库

[复制链接]
yazou yazou 2025-10-30 00:00:00 0 阅读

6075

主题

0

回帖

3945

积分

超级版主

积分
3945
简单来听个歌吧，打开就能听。有像我一样就想简单听个歌的佬友吗？年纪一大就没啥追求了，就求听个响听个方便，不想搜这搜那，打开就点一下就能听了。
点击“探索雷达”有惊喜。
https://www.4mf.net/wp-content/uploads/2025/10/music.html
手机优化版
https://www.4mf.net/wp-content/uploads/2025/10/MusicPlayer.html

使用方法：
电脑上新建一个.txt记事本文件，将下面的代码全部拷贝到文件里面，将.txt修改成.html，然后双击打开这个文件就可以了。


html文件下载
我用夸克网盘分享了「music」，点击链接即可保存。
链接：https://pan.quark.cn/s/8e9d1eba475f
  1. <!DOCTYPE html>
  2. <html lang="zh-CN">
  4. <head>
  5.     <meta charset="UTF-8">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>Music - 个人音乐库</title>
  8.     <link rel="preconnect" href="https://fonts.googleapis.com">
  9.     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  10.     <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap"
  11.         rel="stylesheet">
  12.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css">
  13.     <style>
  14.         :root {
  15.             --font-main: 'Noto Sans SC', 'Segoe UI', Arial, sans-serif;
  16.             --accent-color: #0F52BA;
  17.             --accent-color-hover: #00318C;
  18.             --danger-color: #D32F2F;
  19.             --download-color: #27ae60;
  21.             --bg-color-dark: #191A1C;
  22.             --sidebar-bg: rgba(17, 18, 19, 0.75);
  23.             --main-bg: rgba(25, 26, 28, 0.6);
  24.             --player-bg: rgba(17, 18, 19, 0.75);
  26.             --text-color-primary: #F5F5F5;
  27.             --text-color-secondary: #A0A0A0;
  29.             --component-bg: rgba(44, 45, 47, 0.7);
  30.             --hover-bg: rgba(58, 59, 61, 0.8);
  31.             --border-color: rgba(80, 80, 80, 0.5);
  32.         }
  34.         .light-mode {
  35.             --accent-color: #0F52BA;
  36.             --accent-color-hover: #0039A6;
  37.             --download-color: #2ecc71;
  38.             --danger-color: #c0392b;
  40.             --bg-color-dark: #F4F6F8;
  41.             --sidebar-bg: rgba(255, 255, 255, 0.7);
  42.             --main-bg: rgba(244, 246, 248, 0.65);
  43.             --player-bg: rgba(255, 255, 255, 0.7);
  45.             --text-color-primary: #121212;
  46.             --text-color-secondary: #6B7280;
  48.             --component-bg: rgba(255, 255, 255, 0.6);
  49.             --hover-bg: rgba(234, 236, 239, 0.7);
  50.             --border-color: rgba(200, 200, 200, 0.6);
  51.         }
  53.         * {
  54.             margin: 0;
  55.             padding: 0;
  56.             box-sizing: border-box;
  57.         }
  59.         ::-webkit-scrollbar {
  60.             width: 8px;
  61.         }
  63.         ::-webkit-scrollbar-track {
  64.             background: transparent;
  65.         }
  67.         ::-webkit-scrollbar-thumb {
  68.             background: var(--hover-bg);
  69.             border-radius: 4px;
  70.         }
  72.         ::-webkit-scrollbar-thumb:hover {
  73.             background: var(--accent-color);
  74.         }
  76.         body {
  77.             font-family: var(--font-main);
  78.             color: var(--text-color-primary);
  79.             background-color: var(--bg-color-dark);
  80.             overflow: hidden;
  81.             transition: background-color 0.3s;
  82.         }
  84.         @keyframes gradient-animation {
  85.             0% {
  86.                 background-position: 0% 50%;
  87.             }
  89.             50% {
  90.                 background-position: 100% 50%;
  91.             }
  93.             100% {
  94.                 background-position: 0% 50%;
  95.             }
  96.         }
  98.         .app-container {
  99.             display: grid;
  100.             grid-template-columns: 240px 1fr;
  101.             grid-template-rows: 1fr auto;
  102.             grid-template-areas: "sidebar main" "player player";
  103.             height: 100vh;
  104.             width: 100vw;
  105.             background: linear-gradient(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
  106.             background-size: 400% 400%;
  107.             animation: gradient-animation 15s ease infinite;
  108.         }
  110.         .sidebar {
  111.             grid-area: sidebar;
  112.             background-color: var(--sidebar-bg);
  113.             padding: 24px;
  114.             display: flex;
  115.             flex-direction: column;
  116.             border-right: 1px solid var(--border-color);
  117.             box-shadow: 2px 0 15px rgba(0, 0, 0, 0.2);
  118.             transition: background-color 0.3s, border-color 0.3s;
  119.             backdrop-filter: blur(20px);
  120.             -webkit-backdrop-filter: blur(20px);
  121.         }
  123.         .sidebar h1 {
  124.             color: var(--text-color-primary);
  125.             margin-bottom: 32px;
  126.             display: flex;
  127.             align-items: center;
  128.             gap: 12px;
  129.         }
  131.         .sidebar nav ul {
  132.             list-style: none;
  133.         }
  135.         .sidebar nav a {
  136.             color: var(--text-color-secondary);
  137.             display: flex;
  138.             align-items: center;
  139.             gap: 15px;
  140.             padding: 12px;
  141.             margin-bottom: 8px;
  142.             border-radius: 8px;
  143.             text-decoration: none;
  144.             font-weight: 500;
  145.             transition: all 0.2s ease;
  146.         }
  148.         .sidebar nav a:hover {
  149.             color: var(--text-color-primary);
  150.             background-color: var(--hover-bg);
  151.         }
  153.         .sidebar nav a.active {
  154.             color: var(--accent-color);
  155.             font-weight: 700;
  156.             background-color: var(--hover-bg);
  157.         }
  159.         .main-content {
  160.             grid-area: main;
  161.             overflow-y: auto;
  162.             padding: 24px 32px;
  163.             background-color: var(--main-bg);
  164.             backdrop-filter: blur(10px);
  165.             -webkit-backdrop-filter: blur(10px);
  166.         }
  168.         .search-area {
  169.             position: relative;
  170.             margin-bottom: 24px;
  171.         }
  173.         .search-area i.fa-search {
  174.             position: absolute;
  175.             left: 20px;
  176.             top: 50%;
  177.             transform: translateY(-50%);
  178.             color: var(--text-color-secondary);
  179.         }
  181.         .search-area input {
  182.             background-color: var(--component-bg);
  183.             border: 1px solid var(--border-color);
  184.             color: var(--text-color-primary);
  185.             width: 100%;
  186.             padding: 12px 20px 12px 50px;
  187.             font-size: 1em;
  188.             border-radius: 50px;
  189.             outline: none;
  190.             transition: all 0.3s;
  191.         }
  193.         .search-area input:focus {
  194.             border-color: var(--accent-color);
  195.             box-shadow: 0 0 10px rgba(15, 82, 186, 0.2);
  196.         }
  198.         .song-list-header,
  199.         .song-item {
  200.             display: grid;
  201.             grid-template-columns: 40px 3fr 2fr 2fr 40px 40px;
  202.             align-items: center;
  203.             padding: 10px 15px;
  204.             gap: 15px;
  205.         }
  207.         #stats-top-tracks .song-item,
  208.         #stats-top-artists .song-item {
  209.             grid-template-columns: 40px 3fr 2fr 1fr 40px;
  210.         }
  212.         .song-list-header {
  213.             color: var(--text-color-secondary);
  214.             font-size: 0.8em;
  215.             border-bottom: 1px solid var(--border-color);
  216.             background-color: var(--component-bg);
  217.             border-radius: 8px 8px 0 0;
  218.             margin-top: 10px;
  219.         }
  221.         .song-item {
  222.             border-radius: 8px;
  223.             transition: background-color 0.2s;
  224.             cursor: pointer;
  225.             font-size: 0.9em;
  226.             border-bottom: 1px solid var(--border-color);
  227.         }
  229.         .song-list>.song-item:last-child {
  230.             border-bottom: none;
  231.         }
  233.         .song-item:hover {
  234.             background-color: var(--hover-bg);
  235.         }
  237.         .song-item.current {
  238.             background-color: var(--hover-bg);
  239.         }
  241.         .song-item.current .song-title>span:first-child {
  242.             color: var(--accent-color);
  243.         }
  245.         .song-item .song-title {
  246.             display: flex;
  247.             flex-direction: column;
  248.             overflow: hidden;
  249.             text-overflow: ellipsis;
  250.             white-space: nowrap;
  251.         }
  253.         .song-item .song-title .error-msg {
  254.             font-size: 0.8em;
  255.             color: var(--danger-color);
  256.             margin-top: 4px;
  257.         }
  259.         .action-btn {
  260.             color: var(--text-color-secondary);
  261.             cursor: pointer;
  262.             transition: color 0.2s, transform 0.2s;
  263.             text-align: center;
  264.         }
  266.         .action-btn:hover {
  267.             transform: scale(1.2);
  268.         }
  270.         .fav-btn.favourited {
  271.             color: var(--accent-color);
  272.         }
  274.         .download-btn:hover {
  275.             color: var(--download-color);
  276.         }
  278.         .delete-btn:hover {
  279.             color: var(--danger-color);
  280.         }
  282.         .now-playing-bar {
  283.             grid-area: player;
  284.             background-color: var(--player-bg);
  285.             border-top: 1px solid var(--border-color);
  286.             padding: 15px 30px;
  287.             display: grid;
  288.             grid-template-columns: 1fr 2fr 1fr;
  289.             align-items: center;
  290.             gap: 20px;
  291.             box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.2);
  292.             backdrop-filter: blur(20px);
  293.             -webkit-backdrop-filter: blur(20px);
  294.         }
  296.         .song-info-bar {
  297.             display: flex;
  298.             align-items: center;
  299.             gap: 15px;
  300.             min-width: 0;
  301.         }
  303.         .song-info-bar img {
  304.             width: 56px;
  305.             height: 56px;
  306.             border-radius: 8px;
  307.             object-fit: cover;
  308.             background-color: var(--hover-bg);
  309.         }
  311.         .song-info-bar .fav-btn {
  312.             font-size: 1.2em;
  313.         }
  315.         .song-info-bar div {
  316.             overflow: hidden;
  317.         }
  319.         .song-info-bar div h3,
  320.         .song-info-bar div p {
  321.             white-space: nowrap;
  322.             overflow: hidden;
  323.             text-overflow: ellipsis;
  324.         }
  326.         .player-controls {
  327.             display: flex;
  328.             flex-direction: column;
  329.             align-items: center;
  330.         }
  332.         .control-buttons {
  333.             display: flex;
  334.             align-items: center;
  335.             justify-content: center;
  336.             gap: 24px;
  337.             margin-bottom: 12px;
  338.         }
  340.         #playPauseBtn {
  341.             background-color: var(--text-color-primary);
  342.             color: var(--player-bg);
  343.             width: 48px;
  344.             height: 48px;
  345.             border-radius: 50%;
  346.             display: flex;
  347.             align-items: center;
  348.             justify-content: center;
  349.             font-size: 1.5em;
  350.             box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  351.             transition: all 0.3s ease;
  352.             cursor: pointer;
  353.             border: none;
  354.         }
  356.         .light-mode #playPauseBtn {
  357.             color: #FFFFFF;
  358.             background-color: #121212;
  359.         }
  361.         #playPauseBtn:hover {
  362.             transform: scale(1.1);
  363.         }
  365.         .control-btn {
  366.             background: none;
  367.             border: none;
  368.             color: var(--text-color-secondary);
  369.             font-size: 1.1em;
  370.             cursor: pointer;
  371.             transition: all 0.2s;
  372.         }
  374.         .control-btn:hover {
  375.             color: var(--text-color-primary);
  376.             transform: scale(1.15);
  377.         }
  379.         .control-btn.active {
  380.             color: var(--accent-color);
  381.         }
  383.         .progress-area {
  384.             display: flex;
  385.             align-items: center;
  386.             gap: 10px;
  387.             width: 100%;
  388.             max-width: 500px;
  389.         }
  391.         .progress-bar {
  392.             flex-grow: 1;
  393.             height: 6px;
  394.             background-color: var(--hover-bg);
  395.             border-radius: 3px;
  396.             cursor: pointer;
  397.         }
  399.         .progress {
  400.             height: 100%;
  401.             width: 0%;
  402.             background-color: var(--accent-color);
  403.             border-radius: 3px;
  404.         }
  406.         .time-display span {
  407.             font-size: 0.75em;
  408.             color: var(--text-color-secondary);
  409.         }
  411.         .extra-controls {
  412.             display: flex;
  413.             justify-content: flex-end;
  414.             align-items: center;
  415.             gap: 15px;
  416.         }
  418.         .volume-area {
  419.             display: flex;
  420.             align-items: center;
  421.             gap: 8px;
  422.             width: 120px;
  423.         }
  425.         input[type="range"] {
  426.             -webkit-appearance: none;
  427.             appearance: none;
  428.             width: 100%;
  429.             height: 6px;
  430.             background-color: var(--hover-bg);
  431.             border-radius: 3px;
  432.             outline: none;
  433.             cursor: pointer;
  434.         }
  436.         input[type="range"]::-webkit-slider-thumb {
  437.             -webkit-appearance: none;
  438.             appearance: none;
  439.             width: 16px;
  440.             height: 16px;
  441.             background-color: var(--text-color-primary);
  442.             border-radius: 50%;
  443.             transition: background-color 0.3s;
  444.         }
  446.         input[type="range"]:hover::-webkit-slider-thumb {
  447.             background-color: var(--accent-color);
  448.         }
  450.         .sidebar .theme-switcher {
  451.             margin-top: auto;
  452.             cursor: pointer;
  453.             display: flex;
  454.             align-items: center;
  455.             gap: 15px;
  456.             padding: 12px;
  457.             border-radius: 8px;
  458.             background-color: var(--component-bg);
  459.             color: var(--text-color-secondary);
  460.             font-weight: 500;
  461.             transition: all 0.3s;
  462.         }
  464.         .sidebar .theme-switcher:hover {
  465.             color: var(--text-color-primary);
  466.             background-color: var(--hover-bg);
  467.         }
  469.         .view {
  470.             display: none;
  471.         }
  473.         .view.active {
  474.             display: block;
  475.             animation: fadeIn 0.5s ease;
  476.         }
  478.         @keyframes fadeIn {
  479.             from {
  480.                 opacity: 0;
  481.                 transform: translateY(10px);
  482.             }
  484.             to {
  485.                 opacity: 1;
  486.                 transform: translateY(0);
  487.             }
  488.         }
  490.         .list-section h2,
  491.         .view>h2 {
  492.             margin-bottom: 20px;
  493.             font-size: 1.8rem;
  494.         }
  496.         .stats-grid {
  497.             display: grid;
  498.             grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  499.             gap: 20px;
  500.             margin-bottom: 30px;
  501.         }
  503.         .stat-card {
  504.             background-color: var(--component-bg);
  505.             padding: 20px;
  506.             border-radius: 12px;
  507.             box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  508.         }
  510.         .stat-card h3 {
  511.             color: var(--text-color-secondary);
  512.             font-size: 0.9rem;
  513.             margin-bottom: 8px;
  514.         }
  516.         .stat-card p {
  517.             font-size: 2rem;
  518.             font-weight: bold;
  519.         }
  521.         .pagination-controls {
  522.             display: flex;
  523.             justify-content: center;
  524.             align-items: center;
  525.             padding: 20px 0;
  526.             gap: 8px;
  527.             user-select: none;
  528.         }
  530.         .page-btn {
  531.             background-color: var(--component-bg);
  532.             border: 1px solid var(--border-color);
  533.             color: var(--text-color-secondary);
  534.             padding: 8px 14px;
  535.             min-width: 40px;
  536.             border-radius: 8px;
  537.             cursor: pointer;
  538.             font-weight: 500;
  539.             transition: all 0.2s ease;
  540.         }
  542.         .page-btn:hover {
  543.             background-color: var(--hover-bg);
  544.             color: var(--text-color-primary);
  545.             border-color: var(--accent-color);
  546.         }
  548.         .page-btn.active {
  549.             background-color: var(--accent-color);
  550.             color: #FFFFFF;
  551.             border-color: var(--accent-color);
  552.             font-weight: 700;
  553.         }
  555.         .page-btn:disabled {
  556.             opacity: 0.5;
  557.             cursor: not-allowed;
  558.         }
  560.         .action-button {
  561.             padding: 10px 15px;
  562.             margin-bottom: 20px;
  563.             border-radius: 20px;
  564.             border: none;
  565.             background: var(--accent-color);
  566.             color: white;
  567.             font-weight: bold;
  568.             cursor: pointer;
  569.             min-width: 120px;
  570.         }
  571.     </style>
  572. </head>
  574. <body class="dark-mode">
  576.     <audio id="audioPlayer"></audio>
  578.     <div class="app-container">
  579.         <aside class="sidebar">
  580.             <h1><i class="fas fa-headphones-alt"></i> Music</h1>
  581.             <nav>
  582.                 <ul>
  583.                     <li><a href="#" class="nav-link active" data-view="discover-view"><i
  584.                                 class="fas fa-compass"></i>发现音乐</a></li>
  585.                     <!-- [] 本地音乐库的导航链接 -->
  586.                     <li><a href="#" class="nav-link" data-view="local-view"><i class="fas fa-hdd"></i>我的本地</a></li>
  587.                     <li><a href="#" class="nav-link" data-view="favourites-view"><i class="fas fa-heart"></i>我的收藏</a>
  588.                     </li>
  589.                     <li><a href="#" class="nav-link" data-view="history-view"><i class="fas fa-history"></i>播放历史</a>
  590.                     </li>
  591.                     <li><a href="#" class="nav-link" data-view="stats-view"><i class="fas fa-chart-pie"></i>听歌统计</a>
  592.                     </li>
  593.                 </ul>
  594.             </nav>
  595.             <div class="theme-switcher" id="themeToggle"><i class="fas fa-sun"></i> <span>切换模式</span></div>
  596.         </aside>
  598.         <main class="main-content">
  599.             <div id="discover-view" class="view active">
  600.                 <div class="search-area">
  601.                     <i class="fas fa-search"></i>
  602.                     <input type="search" id="searchInput" placeholder="搜索歌曲、歌手...">
  603.                 </div>
  604.                 <button id="loadOnlineBtn" class="action-button">
  605.                     <i class="fas fa-satellite-dish"></i> 探索雷达
  606.                 </button>
  607.                 <div id="song-list-container" class="song-list"></div>
  608.                 <div id="pagination-discover" class="pagination-controls"></div>
  609.             </div>
  611.             <!-- [] 本地音乐库的视图 -->
  612.             <div id="local-view" class="view">
  613.                 <h2><i class="fas fa-hdd"></i> 我的本地音乐</h2>
  614.                 <button id="addLocalFilesBtn" class="action-button">
  615.                     <i class="fas fa-folder-plus"></i> 添加本地音乐
  616.                 </button>
  617.                 <input type="file" id="localFileInput" multiple accept="audio/*" style="display: none;">
  618.                 <div id="local-list-container" class="song-list"></div>
  619.                 <div id="pagination-local" class="pagination-controls"></div>
  620.             </div>
  622.             <div id="favourites-view" class="view">
  623.                 <h2><i class="fas fa-heart"></i> 我的收藏</h2>
  624.                 <div id="favourites-list-container" class="song-list"></div>
  625.                 <div id="pagination-favourites" class="pagination-controls"></div>
  626.             </div>
  627.             <div id="history-view" class="view">
  628.                 <h2><i class="fas fa-history"></i> 播放历史</h2>
  629.                 <div id="history-list-container" class="song-list"></div>
  630.                 <div id="pagination-history" class="pagination-controls"></div>
  631.             </div>
  632.             <div id="stats-view" class="view">
  633.                 <h2><i class="fas fa-chart-pie"></i> 听歌统计</h2>
  634.                 <div class="stats-grid">
  635.                     <div class="stat-card">
  636.                         <h3>总播放量</h3>
  637.                         <p id="stats-total-plays">0</p>
  638.                     </div>
  639.                     <div class="stat-card">
  640.                         <h3>不同歌曲</h3>
  641.                         <p id="stats-unique-tracks">0</p>
  642.                     </div>
  643.                 </div>
  644.                 <div class="list-section">
  645.                     <h2>播放最多的歌曲</h2>
  646.                     <div id="stats-top-tracks" class="song-list"></div>
  647.                 </div>
  648.                 <div class="list-section" style="margin-top: 30px;">
  649.                     <h2>最常听的歌手</h2>
  650.                     <div id="stats-top-artists" class="song-list"></div>
  651.                 </div>
  652.             </div>
  653.         </main>
  655.         <footer class="now-playing-bar">
  656.             <div class="song-info-bar">
  657.                 <img id="bar-album-art" src="data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=">
  658.                 <div>
  659.                     <h3 id="bar-song-title">--</h3>
  660.                     <p id="bar-song-artist">--</p>
  661.                 </div>
  662.                 <i class="action-btn fav-btn far fa-heart" id="bar-fav-btn" title="添加到我的收藏"></i>
  663.             </div>
  664.             <div class="player-controls">
  665.                 <div class="control-buttons">
  666.                     <button class="control-btn" id="shuffleBtn" title="随机"><i class="fas fa-random"></i></button>
  667.                     <button class="control-btn" id="prevBtn" title="上一曲"><i class="fas fa-backward-step"></i></button>
  668.                     <button id="playPauseBtn" title="播放"><i class="fas fa-play"></i></button>
  669.                     <button class="control-btn" id="nextBtn" title="下一曲"><i class="fas fa-forward-step"></i></button>
  670.                     <button class="control-btn" id="repeatBtn" title="循环"><i class="fas fa-redo"></i></button>
  671.                 </div>
  672.                 <div class="progress-area">
  673.                     <span class="time-display" id="currentTime">0:00</span>
  674.                     <div class="progress-bar" id="progressBar">
  675.                         <div class="progress" id="progress"></div>
  676.                     </div>
  677.                     <span class="time-display" id="totalDuration">0:00</span>
  678.                 </div>
  679.             </div>
  680.             <div class="extra-controls">
  681.                 <div class="volume-area"><i class="fas fa-volume-down"></i><input type="range" id="volumeSlider" min="0"
  682.                         max="1" step="0.01" value="0.8"></div>
  683.             </div>
  684.         </footer>
  685.     </div>
  687.     <script>
  688.         document.addEventListener('DOMContentLoaded', () => {
  689.             // [] IndexedDB 帮助对象
  690.             const idbHelper = {
  691.                 db: null,
  692.                 init() {
  693.                     return new Promise((resolve, reject) => {
  694.                         const request = indexedDB.open("musicDB", 1);
  695.                         request.onupgradeneeded = (event) => {
  696.                             this.db = event.target.result;
  697.                             if (!this.db.objectStoreNames.contains('songs')) {
  698.                                 this.db.createObjectStore('songs', { keyPath: 'id' });
  699.                             }
  700.                         };
  701.                         request.onsuccess = (event) => {
  702.                             this.db = event.target.result;
  703.                             resolve(this.db);
  704.                         };
  705.                         request.onerror = (event) => reject("IndexedDB error: " + event.target.errorCode);
  706.                     });
  707.                 },
  708.                 addSong(song) {
  709.                     return new Promise((resolve, reject) => {
  710.                         const transaction = this.db.transaction(['songs'], 'readwrite');
  711.                         const store = transaction.objectStore('songs');
  712.                         const request = store.put(song);
  713.                         request.onsuccess = () => resolve();
  714.                         request.onerror = (event) => reject(event.target.error);
  715.                     });
  716.                 },
  717.                 getSongs() {
  718.                     return new Promise((resolve, reject) => {
  719.                         const transaction = this.db.transaction(['songs'], 'readonly');
  720.                         const store = transaction.objectStore('songs');
  721.                         const request = store.getAll();
  722.                         request.onsuccess = () => resolve(request.result);
  723.                         request.onerror = (event) => reject(event.target.error);
  724.                     });
  725.                 },
  726.                 deleteSong(id) {
  727.                     return new Promise((resolve, reject) => {
  728.                         const transaction = this.db.transaction(['songs'], 'readwrite');
  729.                         const store = transaction.objectStore('songs');
  730.                         const request = store.delete(id);
  731.                         request.onsuccess = () => resolve();
  732.                         request.onerror = (event) => reject(event.target.error);
  733.                     });
  734.                 },
  735.             };
  737.             const dom = {
  738.                 audioPlayer: document.getElementById('audioPlayer'),
  739.                 themeToggle: document.getElementById('themeToggle'),
  740.                 mainContent: document.querySelector('.main-content'),
  741.                 songListContainer: document.getElementById('song-list-container'),
  742.                 favouritesListContainer: document.getElementById('favourites-list-container'),
  743.                 historyListContainer: document.getElementById('history-list-container'),
  744.                 localListContainer: document.getElementById('local-list-container'), //
  745.                 paginationDiscover: document.getElementById('pagination-discover'),
  746.                 paginationFavourites: document.getElementById('pagination-favourites'),
  747.                 paginationHistory: document.getElementById('pagination-history'),
  748.                 paginationLocal: document.getElementById('pagination-local'), //
  749.                 searchInput: document.getElementById('searchInput'),
  750.                 loadOnlineBtn: document.getElementById('loadOnlineBtn'),
  751.                 addLocalFilesBtn: document.getElementById('addLocalFilesBtn'),
  752.                 localFileInput: document.getElementById('localFileInput'), //
  753.                 barAlbumArt: document.getElementById('bar-album-art'),
  754.                 barSongTitle: document.getElementById('bar-song-title'),
  755.                 barSongArtist: document.getElementById('bar-song-artist'),
  756.                 barFavBtn: document.getElementById('bar-fav-btn'),
  757.                 playPauseBtn: document.getElementById('playPauseBtn'),
  758.                 prevBtn: document.getElementById('prevBtn'),
  759.                 nextBtn: document.getElementById('nextBtn'),
  760.                 shuffleBtn: document.getElementById('shuffleBtn'),
  761.                 repeatBtn: document.getElementById('repeatBtn'),
  762.                 currentTime: document.getElementById('currentTime'),
  763.                 totalDuration: document.getElementById('totalDuration'),
  764.                 progressBar: document.getElementById('progressBar'),
  765.                 progress: document.getElementById('progress'),
  766.                 volumeSlider: document.getElementById('volumeSlider'),
  767.                 statsTotalPlays: document.getElementById('stats-total-plays'),
  768.                 statsUniqueTracks: document.getElementById('stats-unique-tracks'),
  769.                 statsTopTracks: document.getElementById('stats-top-tracks'),
  770.                 statsTopArtists: document.getElementById('stats-top-artists'),
  771.             };
  773.             const API = {
  774.                 getList: async (keyword) => {
  775.                     const url = `https://music-api.gdstudio.xyz/api.php?types=search&source=netease,kuwo&name=${encodeURIComponent(keyword)}&count=100`;
  776.                     const response = await fetch(url);
  777.                     if (!response.ok) throw new Error('API request failed');
  778.                     const data = await response.json();
  779.                     if (!Array.isArray(data)) throw new Error('Invalid API response');
  780.                     return data.map(song => ({
  781.                         id: `${song.source}_${song.id}`, name: song.name,
  782.                         artists: [{ name: song.artist.join(' / ') }], album: song.album || '未知专辑',
  783.                         source: song.source, lyric_id: song.lyric_id,
  784.                         pic: `https://picsum.photos/400/400?random=${encodeURIComponent(song.name)}`
  785.                     }));
  786.                 },
  787.                 getSongUrl: (song) => `https://music-api.gdstudio.xyz/api.php?types=url&id=${song.id.split('_')[1]}&source=${song.source}&br=320000`
  788.             };
  790.             const state = {
  791.                 discoverPlaylist: [], localPlaylist: [], currentPlaylist: [], currentTrackIndex: -1,
  792.                 isPlaying: false, isShuffle: false, repeatMode: 'none',
  793.                 history: [], favourites: [], itemsPerPage: 20,
  794.                 pagination: { discover: 1, favourites: 1, history: 1, local: 1 },
  795.                 keywords: ['热门', '华语', '流行', '摇滚', '民谣', '电子', '说唱', '经典老歌', '纯音乐', 'ACG'],
  796.                 lastKeyword: null, currentBlobUrl: null,
  797.             };
  799.             async function init() {
  800.                 try {
  801.                     await idbHelper.init();
  802.                     loadStateFromLocalStorage();
  803.                     setupEventListeners();
  804.                     await loadLocalSongs(); // 先加载本地歌曲
  805.                     renderAllViews();
  806.                     showView('discover-view');
  807.                     fetchOnlineMusic();
  808.                 } catch (error) {
  809.                     console.error("初始化失败:", error);
  810.                     alert("无法初始化数据库，本地功能将不可用。");
  811.                 }
  812.             }
  814.             function setupEventListeners() {
  815.                 document.querySelectorAll('.nav-link').forEach(link => link.addEventListener('click', e => { e.preventDefault(); showView(e.currentTarget.dataset.view); }));
  816.                 dom.themeToggle.addEventListener('click', () => {
  817.                     const isLight = document.body.classList.toggle('light-mode');
  818.                     document.body.classList.toggle('dark-mode', !isLight);
  819.                     localStorage.setItem('theme', isLight ? 'light' : 'dark');
  820.                 });
  821.                 dom.searchInput.addEventListener('keypress', e => { if (e.key === 'Enter' && e.target.value.trim()) fetchAndDisplaySearchResults(e.target.value.trim()); });
  822.                 dom.loadOnlineBtn.addEventListener('click', () => fetchOnlineMusic());
  823.                 dom.addLocalFilesBtn.addEventListener('click', () => dom.localFileInput.click());
  824.                 dom.localFileInput.addEventListener('change', processLocalFiles);
  825.                 dom.playPauseBtn.addEventListener('click', togglePlayPause);
  826.                 dom.barFavBtn.addEventListener('click', () => { if (dom.barFavBtn.dataset.songId) toggleFavourite(dom.barFavBtn.dataset.songId); });
  827.                 dom.nextBtn.addEventListener('click', playNext);
  828.                 dom.prevBtn.addEventListener('click', playPrevious);
  829.                 dom.shuffleBtn.addEventListener('click', toggleShuffle);
  830.                 dom.repeatBtn.addEventListener('click', toggleRepeat);
  831.                 dom.volumeSlider.addEventListener('input', e => dom.audioPlayer.volume = e.target.value);
  832.                 dom.progressBar.addEventListener('click', seek);
  833.                 dom.audioPlayer.addEventListener('timeupdate', updateProgress);
  834.                 dom.audioPlayer.addEventListener('loadedmetadata', () => dom.totalDuration.textContent = formatTime(dom.audioPlayer.duration));
  835.                 dom.audioPlayer.addEventListener('ended', handleSongEnd);
  836.                 dom.audioPlayer.addEventListener('play', () => updatePlayPauseIcon(true));
  837.                 dom.audioPlayer.addEventListener('pause', () => updatePlayPauseIcon(false));
  838.                 dom.mainContent.addEventListener('click', handleMainContentClick);
  839.             }
  841.             function handleMainContentClick(e) {
  842.                 const songItem = e.target.closest('.song-item');
  843.                 const pageBtn = e.target.closest('.page-btn');
  844.                 const actionBtn = e.target.closest('.action-btn');
  846.                 if (actionBtn) {
  847.                     const songId = actionBtn.dataset.songId;
  848.                     const allSongs = [...state.discoverPlaylist, ...state.localPlaylist, ...state.history, ...state.favourites];
  849.                     const uniqueSongs = Array.from(new Map(allSongs.map(item => [item.id, item])).values());
  850.                     const song = uniqueSongs.find(s => s.id.toString() === songId.toString());
  852.                     if (actionBtn.classList.contains('fav-btn')) { toggleFavourite(songId); return; }
  853.                     if (actionBtn.classList.contains('download-btn')) { downloadSong(song, actionBtn); return; }
  854.                     if (actionBtn.classList.contains('delete-btn')) { deleteLocalSong(songId); return; }
  855.                 }
  857.                 if (songItem) {
  858.                     const context = songItem.dataset.context;
  859.                     const index = parseInt(songItem.dataset.index, 10);
  860.                     state.currentPlaylist = getPlaylistByContext(context);
  861.                     playSong(index);
  862.                     return;
  863.                 }
  864.                 if (pageBtn && !pageBtn.disabled) {
  865.                     const context = pageBtn.parentElement.dataset.context;
  866.                     state.pagination[context] = parseInt(pageBtn.dataset.page, 10);
  867.                     renderViewByContext(context);
  868.                 }
  869.             }
  871.             function getPlaylistByContext(context) {
  872.                 switch (context) {
  873.                     case 'discover': return state.discoverPlaylist;
  874.                     case 'favourites': return state.favourites;
  875.                     case 'history': return state.history;
  876.                     case 'local': return state.localPlaylist;
  877.                     default: return [];
  878.                 }
  879.             }
  881.             function renderViewByContext(context) {
  882.                 const playlist = getPlaylistByContext(context);
  883.                 const container = getListContainerByContext(context);
  884.                 renderPlaylist(playlist, container, context);
  885.             }
  887.             function showView(viewId) {
  888.                 document.querySelectorAll('.view').forEach(v => v.classList.remove('active'));
  889.                 document.getElementById(viewId)?.classList.add('active');
  890.                 document.querySelectorAll('.nav-link').forEach(l => l.classList.remove('active'));
  891.                 document.querySelector(`.nav-link[data-view="${viewId}"]`)?.classList.add('active');
  892.                 if (viewId === 'local-view') {
  893.                     renderPlaylist(state.localPlaylist, dom.localListContainer, 'local');
  894.                 }
  895.             }
  897.             function renderAllViews() {
  898.                 renderPlaylist(state.discoverPlaylist, dom.songListContainer, 'discover');
  899.                 renderPlaylist(state.localPlaylist, dom.localListContainer, 'local');
  900.                 renderFavourites();
  901.                 renderHistory();
  902.                 updateAndRenderStats();
  903.             }
  905.             function getListContainerByContext(context) {
  906.                 switch (context) {
  907.                     case 'discover': return dom.songListContainer;
  908.                     case 'favourites': return dom.favouritesListContainer;
  909.                     case 'history': return dom.historyListContainer;
  910.                     case 'local': return dom.localListContainer;
  911.                     default: return null;
  912.                 }
  913.             }
  915.             function renderPlaylist(fullPlaylist, container, context) {
  916.                 const currentPage = state.pagination[context] || 1;
  917.                 const totalItems = fullPlaylist.length;
  918.                 if (!container) return;
  920.                 if (totalItems === 0) {
  921.                     container.innerHTML = `<p style="padding: 15px;">列表为空。</p>`;
  922.                     getPaginationContainer(context).innerHTML = '';
  923.                     return;
  924.                 }
  925.                 const totalPages = Math.ceil(totalItems / state.itemsPerPage);
  926.                 const startIndex = (currentPage - 1) * state.itemsPerPage;
  927.                 const endIndex = startIndex + state.itemsPerPage;
  928.                 const paginatedItems = fullPlaylist.slice(startIndex, endIndex);
  930.                 let header = `<div class="song-list-header">
  931.                     <span>#</span><span>歌曲</span><span>歌手</span><span>专辑</span><span></span><span></span>
  932.                 </div>`;
  933.                 container.innerHTML = header + paginatedItems.map((song, index) => {
  934.                     const originalIndex = startIndex + index;
  935.                     const isLocal = context === 'local';
  936.                     const actionIcon = isLocal
  937.                         ? `<i class="action-btn delete-btn fas fa-trash" data-song-id="${song.id}" title="从本地库删除"></i>`
  938.                         : `<i class="action-btn download-btn fas fa-download" data-song-id="${song.id}" title="下载到本地库"></i>`;
  940.                     return `
  941.                         <div class="song-item" data-index="${originalIndex}" data-context="${context}">
  942.                             <span class="song-index">${originalIndex + 1}</span>
  943.                             <div class="song-title">
  944.                                 <span>${song.name}</span>
  945.                                 <span class="error-msg" id="error-${context}-${song.id}"></span>
  946.                             </div>
  947.                             <span>${song.artists.map(a => a.name).join(' / ')}</span>
  948.                             <span>${song.album}</span>
  949.                             <i class="action-btn fav-btn ${state.favourites.some(f => f.id === song.id) ? 'fas fa-heart favourited' : 'far fa-heart'}" data-song-id="${song.id}"></i>
  950.                             ${actionIcon}
  951.                         </div>`}).join('');
  952.                 renderPagination(totalPages, currentPage, context);
  953.                 updatePlaylistHighlight();
  954.             }
  956.             function renderPagination(totalPages, currentPage, context) {
  957.                 const container = getPaginationContainer(context);
  958.                 if (!container || totalPages <= 1) { if (container) container.innerHTML = ''; return; }
  959.                 let html = `<button class="page-btn" data-page="${currentPage - 1}" ${currentPage === 1 ? 'disabled' : ''}>&laquo;</button>`;
  960.                 let startPage = Math.max(1, currentPage - 2), endPage = Math.min(totalPages, currentPage + 2);
  961.                 if (startPage > 1) html += `<button class="page-btn" data-page="1">1</button>${startPage > 2 ? '<span>...</span>' : ''}`;
  962.                 for (let i = startPage; i <= endPage; i++) html += `<button class="page-btn ${i === currentPage ? 'active' : ''}" data-page="${i}">${i}</button>`;
  963.                 if (endPage < totalPages) html += `${endPage < totalPages - 1 ? '<span>...</span>' : ''}<button class="page-btn" data-page="${totalPages}">${totalPages}</button>`;
  964.                 html += `<button class="page-btn" data-page="${currentPage + 1}" ${currentPage === totalPages ? 'disabled' : ''}>&raquo;</button>`;
  965.                 container.innerHTML = html;
  966.                 container.dataset.context = context;
  967.             }
  969.             function getPaginationContainer(context) {
  970.                 switch (context) {
  971.                     case 'discover': return dom.paginationDiscover;
  972.                     case 'favourites': return dom.paginationFavourites;
  973.                     case 'history': return dom.paginationHistory;
  974.                     case 'local': return dom.paginationLocal;
  975.                     default: return null;
  976.                 }
  977.             }
  979.             function renderFavourites() { renderPlaylist(state.favourites, dom.favouritesListContainer, 'favourites'); }
  980.             function renderHistory() { renderPlaylist(state.history, dom.historyListContainer, 'history'); }
  982.             async function loadLocalSongs() {
  983.                 state.localPlaylist = await idbHelper.getSongs();
  984.                 renderPlaylist(state.localPlaylist, dom.localListContainer, 'local');
  985.             }
  987.             async function processLocalFiles(event) {
  988.                 const files = event.target.files;
  989.                 if (!files.length) return;
  990.                 for (const file of files) {
  991.                     const song = {
  992.                         id: `local_${Date.now()}_${file.name}`,
  993.                         name: file.name.replace(/\.[^/.]+$/, ""),
  994.                         artists: [{ name: "本地文件" }],
  995.                         album: "本地文件",
  996.                         blob: file,
  997.                         pic: 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs='
  998.                     };
  999.                     await idbHelper.addSong(song);
  1000.                 }
  1001.                 await loadLocalSongs();
  1002.                 alert(`${files.length}个文件已成功添加到本地库！`);
  1003.             }
  1005.             async function deleteLocalSong(songId) {
  1006.                 if (confirm("确定要从本地库中删除这首歌曲吗？此操作不可恢复。")) {
  1007.                     await idbHelper.deleteSong(songId);
  1008.                     await loadLocalSongs();
  1009.                 }
  1010.             }
  1012.             async function fetchOnlineMusic() {
  1013.                 let keyword;
  1014.                 do { keyword = state.keywords[Math.floor(Math.random() * state.keywords.length)]; } while (state.keywords.length > 1 && keyword === state.lastKeyword);
  1015.                 state.lastKeyword = keyword;
  1016.                 dom.loadOnlineBtn.innerHTML = `<i class="fas fa-sync-alt fa-spin"></i> 正在加载...`;
  1017.                 dom.loadOnlineBtn.disabled = true;
  1018.                 await fetchAndDisplaySearchResults(keyword, true);
  1019.                 dom.loadOnlineBtn.innerHTML = `<i class="fas fa-satellite-dish"></i> 探索雷达 (${keyword})`;
  1020.                 dom.loadOnlineBtn.disabled = false;
  1021.             }
  1023.             async function fetchAndDisplaySearchResults(keyword, shuffle = false) {
  1024.                 dom.songListContainer.innerHTML = `<p style="padding: 15px;">正在加载 "${keyword}"...</p>`;
  1025.                 dom.paginationDiscover.innerHTML = '';
  1026.                 try {
  1027.                     const songs = await API.getList(keyword);
  1028.                     if (shuffle) songs.sort(() => Math.random() - 0.5);
  1029.                     state.discoverPlaylist = songs;
  1030.                     state.pagination.discover = 1;
  1031.                     renderPlaylist(songs, dom.songListContainer, 'discover');
  1032.                 } catch (error) {
  1033.                     console.error("加载在线歌曲错误:", error);
  1034.                     dom.songListContainer.innerHTML = `<p style='padding: 15px;'>加载失败: ${error.message}</p>`;
  1035.                 }
  1036.             }
  1038.             async function playSong(index) {
  1039.                 if (index < 0 || index >= state.currentPlaylist.length) return;
  1040.                 state.currentTrackIndex = index;
  1041.                 const song = state.currentPlaylist[index];
  1042.                 updatePlayerUI(song);
  1043.                 updatePlaylistHighlight();
  1044.                 updatePlayPauseIcon(true);
  1046.                 try {
  1047.                     if (song.blob && song.blob instanceof Blob) { // 播放本地歌曲
  1048.                         if (state.currentBlobUrl) URL.revokeObjectURL(state.currentBlobUrl);
  1049.                         state.currentBlobUrl = URL.createObjectURL(song.blob);
  1050.                         dom.audioPlayer.src = state.currentBlobUrl;
  1051.                     } else { // 播放在线歌曲
  1052.                         const urlEndpoint = API.getSongUrl(song);
  1053.                         const response = await fetch(urlEndpoint);
  1054.                         if (!response.ok) throw new Error('网络请求失败');
  1055.                         const urlData = await response.json();
  1056.                         const audioUrl = urlData.url?.replace(/^http:/, 'https');
  1057.                         if (!audioUrl) throw new Error('无法获取播放链接');
  1058.                         dom.audioPlayer.src = audioUrl;
  1059.                     }
  1061.                     await dom.audioPlayer.play();
  1062.                     addPlayHistory(song);
  1063.                     renderHistory();
  1064.                     saveStateToLocalStorage();
  1065.                 } catch (error) {
  1066.                     console.error("播放失败:", error.message, song);
  1067.                     const context = state.currentPlaylist === state.favourites ? 'favourites' : state.currentPlaylist === state.history ? 'history' : 'discover';
  1068.                     const errorSpan = document.getElementById(`error-${context}-${song.id}`);
  1069.                     if (errorSpan) errorSpan.textContent = "无法播放";
  1070.                     updatePlayPauseIcon(false);
  1071.                     setTimeout(() => playNext(), 2000);
  1072.                 }
  1073.             }
  1075.             async function downloadSong(song, buttonElement) {
  1076.                 buttonElement.className = 'action-btn download-btn fas fa-spinner fa-spin';
  1077.                 try {
  1078.                     const urlEndpoint = API.getSongUrl(song);
  1079.                     const response = await fetch(urlEndpoint);
  1080.                     if (!response.ok) throw new Error('网络请求失败');
  1081.                     const data = await response.json();
  1082.                     const audioUrl = data.url?.replace(/^http:/, 'https');
  1083.                     if (!audioUrl) throw new Error('无法获取下载链接');
  1085.                     const audioResponse = await fetch(audioUrl);
  1086.                     if (!audioResponse.ok) throw new Error(`下载资源失败: ${audioResponse.statusText}`);
  1087.                     const blob = await audioResponse.blob();
  1089.                     const songToStore = { ...song, blob: blob };
  1090.                     await idbHelper.addSong(songToStore);
  1092.                     await loadLocalSongs();
  1093.                     alert(`《${song.name}》已成功下载到本地库！`);
  1095.                 } catch (error) {
  1096.                     console.error("下载到本地库失败:", error);
  1097.                     alert(`下载《${song.name}》失败: ${error.message}`);
  1098.                 } finally {
  1099.                     buttonElement.className = 'action-btn download-btn fas fa-download';
  1100.                 }
  1101.             }
  1103.             function updatePlayerUI(song) {
  1104.                 if (!song) {
  1105.                     dom.barSongTitle.textContent = '--'; dom.barSongArtist.textContent = '--';
  1106.                     dom.barAlbumArt.src = 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=';
  1107.                     dom.barFavBtn.dataset.songId = ''; updateFavouriteIcon(dom.barFavBtn, '');
  1108.                     return;
  1109.                 }
  1110.                 dom.barSongTitle.textContent = song.name;
  1111.                 dom.barSongArtist.textContent = song.artists.map(a => a.name).join(' / ');
  1112.                 dom.barAlbumArt.src = song.pic;
  1113.                 dom.barFavBtn.dataset.songId = song.id;
  1114.                 updateFavouriteIcon(dom.barFavBtn, song.id);
  1115.             }
  1117.             function updatePlaylistHighlight() {
  1118.                 document.querySelectorAll('.song-item').forEach(item => {
  1119.                     const context = item.dataset.context;
  1120.                     const listForContext = getPlaylistByContext(context);
  1121.                     const index = parseInt(item.dataset.index, 10);
  1122.                     const isCurrent = state.currentPlaylist === listForContext && index === state.currentTrackIndex;
  1123.                     item.classList.toggle('current', isCurrent);
  1124.                 });
  1125.             }
  1127.             function updatePlayPauseIcon(isPlaying) { state.isPlaying = isPlaying; dom.playPauseBtn.innerHTML = `<i class="fas fa-${isPlaying ? 'pause' : 'play'}"></i>`; }
  1129.             function toggleFavourite(songId) {
  1130.                 const allSongs = [...state.discoverPlaylist, ...state.localPlaylist, ...state.history, ...state.favourites];
  1131.                 const uniqueSongs = Array.from(new Map(allSongs.map(item => [item.id, item])).values());
  1132.                 const song = uniqueSongs.find(s => s.id.toString() === songId.toString());
  1133.                 if (!song) return;
  1134.                 const favIndex = state.favourites.findIndex(fav => fav.id.toString() === songId.toString());
  1135.                 if (favIndex > -1) { state.favourites.splice(favIndex, 1); } else { state.favourites.unshift(song); }
  1136.                 const totalPages = Math.ceil(state.favourites.length / state.itemsPerPage);
  1137.                 if (state.pagination.favourites > totalPages) { state.pagination.favourites = totalPages || 1; }
  1138.                 renderAllViews();
  1139.                 if (state.currentPlaylist && state.currentPlaylist[state.currentTrackIndex]) { updatePlayerUI(state.currentPlaylist[state.currentTrackIndex]); }
  1140.                 saveStateToLocalStorage();
  1141.             }
  1143.             function updateFavouriteIcon(iconElement, songId) {
  1144.                 if (!songId) { iconElement.className = 'action-btn fav-btn far fa-heart'; return; }
  1145.                 const isFavourited = state.favourites.some(fav => fav.id.toString() === songId.toString());
  1146.                 iconElement.className = `action-btn fav-btn ${isFavourited ? 'fas fa-heart favourited' : 'far fa-heart'}`;
  1147.             }
  1149.             function togglePlayPause() { if (state.currentTrackIndex === -1 || !dom.audioPlayer.src) return; state.isPlaying ? dom.audioPlayer.pause() : dom.audioPlayer.play(); }
  1150.             function playNext() { let i = state.currentTrackIndex + 1; if (i >= state.currentPlaylist.length) { if (state.repeatMode === 'all') i = 0; else return; } playSong(i); }
  1151.             function playPrevious() { if (dom.audioPlayer.currentTime > 3) { dom.audioPlayer.currentTime = 0; } else { let i = state.currentTrackIndex - 1; if (i < 0) i = state.currentPlaylist.length - 1; playSong(i); } }
  1152.             function handleSongEnd() { if (state.repeatMode === 'one') playSong(state.currentTrackIndex); else playNext(); }
  1153.             function toggleShuffle() { /* shuffle logic needs to be implemented */ }
  1154.             function toggleRepeat() { const m = ['none', 'all', 'one']; state.repeatMode = m[(m.indexOf(state.repeatMode) + 1) % m.length]; dom.repeatBtn.classList.toggle('active', state.repeatMode !== 'none'); dom.audioPlayer.loop = state.repeatMode === 'one'; dom.repeatBtn.innerHTML = state.repeatMode === 'one' ? '<i class="fas fa-redo-alt"></i><sup style="font-size: 0.5em;">1</sup>' : '<i class="fas fa-redo"></i>'; }
  1156.             function saveStateToLocalStorage() { localStorage.setItem('musicDashboardData', JSON.stringify({ favourites: state.favourites, history: state.history })); }
  1157.             function loadStateFromLocalStorage() {
  1158.                 const data = JSON.parse(localStorage.getItem('musicDashboardData') || '{}');
  1159.                 state.history = data.history || []; state.favourites = data.favourites || [];
  1160.                 const savedTheme = localStorage.getItem('theme');
  1161.                 const isLight = savedTheme === 'light';
  1162.                 document.body.classList.toggle('light-mode', isLight);
  1163.                 document.body.classList.toggle('dark-mode', !isLight);
  1164.             }
  1166.             function addPlayHistory(song) { state.history = state.history.filter(s => s.id !== song.id); state.history.unshift({ ...song, playedAt: new Date().toISOString() }); if (state.history.length > 500) state.history.pop(); }
  1167.             function updateAndRenderStats() {
  1168.                 if (state.history.length === 0) { dom.statsTotalPlays.textContent = '0'; dom.statsUniqueTracks.textContent = '0'; dom.statsTopTracks.innerHTML = '<p style="padding: 15px;">暂无数据</p>'; dom.statsTopArtists.innerHTML = '<p style="padding: 15px;">暂无数据</p>'; return; };
  1169.                 const trackCounts = state.history.reduce((acc, song) => { acc[song.id] = (acc[song.id] || { ...song, count: 0 }); acc[song.id].count++; return acc; }, {});
  1170.                 const artistCounts = state.history.flatMap(s => s.artists).reduce((acc, artist) => { acc[artist.name] = (acc[artist.name] || { name: artist.name, count: 0 }); acc[artist.name].count++; return acc; }, {});
  1171.                 dom.statsTotalPlays.textContent = state.history.length;
  1172.                 dom.statsUniqueTracks.textContent = new Set(state.history.map(s => s.id)).size;
  1173.                 dom.statsTopTracks.innerHTML = `<div class="song-list-header"><span>#</span><span>歌曲</span><span>歌手</span><span>播放次数</span><span></span></div>${Object.values(trackCounts).sort((a, b) => b.count - a.count).slice(0, 5).map((s, i) => `<div class="song-item"><span>${i + 1}</span><span class="song-title">${s.name}</span><span>${s.artists.map(a => a.name).join(' / ')}</span><span>${s.count} 次</span><span></span></div>`).join('')}`;
  1174.                 dom.statsTopArtists.innerHTML = `<div class="song-list-header"><span>#</span><span>歌手</span><span></span><span>播放次数</span><span></span></div>${Object.values(artistCounts).sort((a, b) => b.count - a.count).slice(0, 5).map((a, i) => `<div class="song-item"><span>${i + 1}</span><span class="song-title">${a.name}</span><span></span><span>${a.count} 次</span><span></span></div>`).join('')}`;
  1175.             }
  1176.             function updateProgress() { const { currentTime, duration } = dom.audioPlayer; if (duration) { dom.progress.style.width = `${(currentTime / duration) * 100}%`; dom.currentTime.textContent = formatTime(duration ? currentTime : 0); } }
  1177.             function seek(e) { const duration = dom.audioPlayer.duration; if (duration) dom.audioPlayer.currentTime = (e.offsetX / dom.progressBar.clientWidth) * duration; }
  1178.             function formatTime(seconds) { const min = Math.floor(seconds / 60); const sec = Math.floor(seconds % 60); return `${min}:${sec < 10 ? '0' : ''}${sec}`; }
  1180.             init();
  1181.         });
  1182.     </script>
  1184. </body>
  1186. </html>
复制代码
     相关文件下载地址
    夸克网盘   本地下载
--------------------------------------------------------------1.本站所提供的压缩包若无特别说明，解压密码均为www.4mf.net;
2.下载后文件若为压缩包格式，请安装7Z软件或者其它压缩软件进行解压;
3.文件比较大的时候，建议使用下载工具进行下载，浏览器下载有时候会自动中断，导致下载错误;
4.资源可能会由于内容问题被和谐，导致下载链接不可用，遇到此问题，请到文章页面进行留言反馈，以便及时进行更新;
5.下载资源版权归作者所有；本站所有资源均来源于网络，仅供学习使用，请支持正版！下载后请注意杀毒。
回复

使用道具 举报

评论
高级模式
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

返回列表 发新帖
Loading...
关注公众号
Archiver|小黑屋|yazou! 劰载中...

相关侵权、举报、投诉及建议等，请发 E-mail：admin@discuz.vip

Powered by Discuz! X5.0 © 2001-2026 Discuz! Team.

在本版发帖返回顶部