zz\u97f3\u4e50\u64ad\u653e\u5668<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <style>\n \/* \u81ea\u5b9a\u4e49\u6eda\u52a8\u6761 *\/\n ::-webkit-scrollbar {\n width: 6px;\n }\n ::-webkit-scrollbar-track {\n background: #f1f1f1; \n }\n ::-webkit-scrollbar-thumb {\n background: #cbd5e1; \n border-radius: 3px;\n }\n ::-webkit-scrollbar-thumb:hover {\n background: #94a3b8; \n }\n \n \/* \u97f3\u9891\u6ce2\u5f62\u52a8\u753b\u6a21\u62df *\/\n .bar {\n width: 3px;\n background-color: #3b82f6;\n animation: equalizer 1s infinite ease-in-out;\n }\n .bar:nth-child(2) { animation-delay: 0.2s; }\n .bar:nth-child(3) { animation-delay: 0.4s; }\n .bar:nth-child(4) { animation-delay: 0.1s; }\n \n @keyframes equalizer {\n 0%, 100% { height: 10px; }\n 50% { height: 20px; }\n }\n\n \/* \u9690\u85cf\u539f\u751f audio \u63a7\u4ef6\uff0c\u5b8c\u5168\u81ea\u5b9a\u4e49 UI *\/\n audio {\n display: none;\n }\n\n \/* \u8fdb\u5ea6\u6761\u6837\u5f0f\u4f18\u5316 *\/\n input[type=range] {\n -webkit-appearance: none; \n background: transparent; \n }\n input[type=range]::-webkit-slider-thumb {\n -webkit-appearance: none;\n height: 12px;\n width: 12px;\n border-radius: 50%;\n background: #3b82f6;\n cursor: pointer;\n margin-top: -4px; \n }\n input[type=range]::-webkit-slider-runnable-track {\n width: 100%;\n height: 4px;\n cursor: pointer;\n background: #e2e8f0;\n border-radius: 2px;\n }\n <\/style>\n<\/head>\n<body class=\"bg-gray-100 text-gray-800 font-sans h-screen flex items-center justify-center overflow-hidden\">\n\n \n <div class=\"w-full max-w-md bg-white rounded-2xl shadow-xl overflow-hidden flex flex-col h-[85vh] md:h-[700px] relative\">\n \n \n <div class=\"px-6 py-4 border-b border-gray-100 flex justify-between items-center bg-white z-10\">\n <h1 class=\"text-xl font-bold text-gray-800 tracking-tight\">zz\u6b4c\u5355<\/h1>\n <button id=\"theme-toggle\" class=\"text-gray-400 hover:text-blue-500 transition-colors\">\n <i class=\"fas fa-moon\"><\/i>\n <\/button>\n <\/div>\n\n \n <div class=\"flex-none bg-gradient-to-br from-blue-50 to-indigo-50 p-6 flex flex-col items-center justify-center relative\">\n \n <div class=\"w-48 h-48 rounded-full shadow-lg overflow-hidden border-4 border-white mb-6 relative group\">\n <img decoding=\"async\" id=\"cover-img\" src=\"https:\/\/hkzyz.ytubage.com\/2026\/zp\/01\/79.jpg\" alt=\"\u4e13\u8f91\u5c01\u9762\" class=\"w-full h-full object-cover transition-transform duration-700 group-hover:scale-110\">\n \n <div id=\"disc-animation\" class=\"absolute inset-0 rounded-full border border-gray-200 opacity-0 transition-opacity duration-300\"><\/div>\n <\/div>\n\n \n <div class=\"text-center mb-4 w-full\">\n <h2 id=\"track-title\" class=\"text-2xl font-bold text-gray-800 mb-1 truncate px-4\">\u9009\u62e9\u4e00\u9996\u6b4c\u66f2<\/h2>\n <p id=\"track-artist\" class=\"text-sm text-gray-500 font-medium\">\u672a\u77e5\u827a\u672f\u5bb6<\/p>\n <\/div>\n\n \n <div class=\"w-full px-2 mb-2\">\n <input type=\"range\" id=\"progress-bar\" value=\"0\" min=\"0\" max=\"100\" class=\"w-full h-1 bg-gray-200 rounded-lg appearance-none cursor-pointer\">\n <div class=\"flex justify-between text-xs text-gray-400 mt-1 font-mono\">\n <span id=\"current-time\">00:00<\/span>\n <span id=\"duration\">00:00<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"flex-none px-8 py-4 flex justify-between items-center bg-white border-b border-gray-100\">\n <button id=\"prev-btn\" class=\"text-gray-400 hover:text-blue-600 transition-colors text-xl p-2\">\n <i class=\"fas fa-step-backward\"><\/i>\n <\/button>\n \n <button id=\"play-btn\" class=\"w-14 h-14 bg-blue-500 hover:bg-blue-600 text-white rounded-full shadow-lg shadow-blue-200 flex items-center justify-center text-2xl transition-all transform hover:scale-105 active:scale-95\">\n <i class=\"fas fa-play pl-1\"><\/i>\n <\/button>\n \n <button id=\"next-btn\" class=\"text-gray-400 hover:text-blue-600 transition-colors text-xl p-2\">\n <i class=\"fas fa-step-forward\"><\/i>\n <\/button>\n <\/div>\n\n \n <div class=\"flex-1 overflow-y-auto bg-gray-50 p-4\" id=\"playlist-container\">\n <ul id=\"playlist\" class=\"space-y-2\">\n \n <\/ul>\n <\/div>\n\n \n <div class=\"px-4 py-2 bg-white border-t border-gray-100 text-xs text-center text-gray-400\">\n <span id=\"status-text\">\u51c6\u5907\u5c31\u7eea<\/span>\n <\/div>\n <\/div>\n\n \n <audio id=\"audio-player\" preload=\"metadata\"><\/audio>\n\n <script>\n \/\/ \u6a21\u62df\u97f3\u4e50\u6570\u636e (\u4f7f\u7528\u514d\u8d39\u7684\u793a\u4f8b\u97f3\u9891\u94fe\u63a5\uff0c\u5b9e\u9645\u9879\u76ee\u4e2d\u8bf7\u66ff\u6362\u4e3a\u771f\u5b9e\u8def\u5f84)\n \/\/ \u6ce8\u610f\uff1a\u7531\u4e8e\u8de8\u57df\u9650\u5236\uff0c\u90e8\u5206\u5728\u7ebf\u94fe\u63a5\u53ef\u80fd\u65e0\u6cd5\u64ad\u653e\uff0c\u8fd9\u91cc\u4f7f\u7528\u4e00\u4e9b\u7a33\u5b9a\u7684\u6d4b\u8bd5\u6e90\u6216\u5360\u4f4d\u903b\u8f91\n const songs = [\n {\n title: \"\u65b0\u767d\u5a18\u5b50\u4f20\u5947\",\n artist: \"\u65b0\u767d\u5a18\u5b50\u4f20\u5947\",\n src: \"https:\/\/hkzyz.ytubage.com\/2026\/music\/01\/6.mp3\",\n cover:\"https:\/\/hkzyz.ytubage.com\/2026\/zp\/01\/97.jpg\"\n },\n {\n title: \"\u4e0a\u6d77\u6ee9\",\n artist: \"\u4e0a\u6d77\u6ee9\",\n src: \"https:\/\/ytubage.com\/wp-content\/uploads\/2026\/03\/yz001.mp3\",\n cover:\"https:\/\/hkzyzv.ytubage.com\/02-zp\/Freshphotos\/202606\/1.jpg\"\n },\n {\n title: \"\u89c2\u4e16\u97f3\",\n artist: \"\u89c2\u4e16\u97f3\",\n src: \"https:\/\/hkzyz.ytubage.com\/2026\/music\/04\/07-gsy.mp3\",\n cover: \"https:\/\/hkzyz.ytubage.com\/2026\/zp\/01\/94.jpg\"\n },\n {\n title: \"\u4e58\u98ce\u7834\u6d6a\",\n artist: \"\u4e58\u98ce\u7834\u6d6a\",\n src: \"https:\/\/hkzyz.ytubage.com\/2026\/music\/04\/08cfpl.mp3\",\n cover: \"https:\/\/hkzyz.ytubage.com\/2026\/zp\/01\/81.jpg\"\n},\n {\n title: \"\u95ee\u60c5\",\n artist: \"\u95ee\u60c5\",\n src: \"https:\/\/ytubage.com\/wp-content\/uploads\/2026\/03\/yp03.mp3\",\n cover: \"https:\/\/hkzyz.ytubage.com\/2026\/zp\/01\/82.jpg\"\n },\n {\n title: \"\u8ffd\u68a6\u4eba\",\n artist: \"\u8ffd\u68a6\u4eba\",\n src: \"https:\/\/ytubage.com\/wp-content\/uploads\/2026\/04\/8.mp3\",\n cover: \"https:\/\/hkzyz.ytubage.com\/2026\/zp\/01\/83.jpg\"\n },\n {\n title: \"\u829d\u829d\u8bed\u5f55\",\n artist: \"\u829d\u829d\u8bed\u5f55\",\n src: \"https:\/\/ytubage.com\/wp-content\/uploads\/2026\/03\/zyz002.mp3\",\n cover: \"https:\/\/hkzyz.ytubage.com\/2026\/zp\/01\/96.jpg\"\n },\n ];\n\n \/\/ DOM \u5143\u7d20\u83b7\u53d6\n const audio = document.getElementById('audio-player');\n const playBtn = document.getElementById('play-btn');\n const prevBtn = document.getElementById('prev-btn');\n const nextBtn = document.getElementById('next-btn');\n const playlistEl = document.getElementById('playlist');\n const trackTitle = document.getElementById('track-title');\n const trackArtist = document.getElementById('track-artist');\n const coverImg = document.getElementById('cover-img');\n const progressBar = document.getElementById('progress-bar');\n const currentTimeEl = document.getElementById('current-time');\n const durationEl = document.getElementById('duration');\n const statusText = document.getElementById('status-text');\n const themeToggle = document.getElementById('theme-toggle');\n\n let currentSongIndex = 0;\n let isPlaying = false;\n let isDragging = false; \/\/ \u9632\u6b62\u62d6\u52a8\u65f6\u8fdb\u5ea6\u6761\u8df3\u52a8\n\n \/\/ \u521d\u59cb\u5316\u64ad\u653e\u5668\n function initPlayer() {\n renderPlaylist();\n loadSong(currentSongIndex);\n \n \/\/ \u4e8b\u4ef6\u76d1\u542c\n playBtn.addEventListener('click', togglePlay);\n prevBtn.addEventListener('click', prevSong);\n nextBtn.addEventListener('click', nextSong);\n \n \/\/ \u97f3\u9891\u4e8b\u4ef6\n audio.addEventListener('timeupdate', updateProgress);\n audio.addEventListener('ended', nextSong);\n audio.addEventListener('loadedmetadata', () => {\n durationEl.textContent = formatTime(audio.duration);\n progressBar.max = audio.duration;\n });\n audio.addEventListener('error', (e) => {\n console.error(\"\u97f3\u9891\u52a0\u8f7d\u9519\u8bef\", e);\n statusText.textContent = \"\u52a0\u8f7d\u5931\u8d25\uff0c\u8bf7\u68c0\u67e5\u7f51\u7edc\";\n statusText.classList.add('text-red-500');\n });\n\n \/\/ \u8fdb\u5ea6\u6761\u62d6\u52a8\n progressBar.addEventListener('input', (e) => {\n isDragging = true;\n const time = e.target.value;\n currentTimeEl.textContent = formatTime(time);\n });\n\n progressBar.addEventListener('change', (e) => {\n isDragging = false;\n audio.currentTime = e.target.value;\n if (!isPlaying) {\n togglePlay();\n }\n });\n\n \/\/ \u4e3b\u9898\u5207\u6362\n themeToggle.addEventListener('click', toggleTheme);\n }\n\n \/\/ \u6e32\u67d3\u64ad\u653e\u5217\u8868\n function renderPlaylist() {\n playlistEl.innerHTML = '';\n songs.forEach((song, index) => {\n const li = document.createElement('li');\n li.className = `flex items-center p-3 rounded-lg cursor-pointer transition-all duration-200 group ${index === currentSongIndex ? 'bg-blue-50 border-l-4 border-blue-500' : 'hover:bg-gray-100 border-l-4 border-transparent'}`;\n li.onclick = () => playSpecificSong(index);\n\n li.innerHTML = `\n <div class=\"relative w-10 h-10 rounded overflow-hidden mr-3 flex-shrink-0\">\n <img decoding=\"async\" src=\"${song.cover}\" alt=\"${song.title}\u5c01\u9762\" class=\"w-full h-full object-cover\">\n ${index === currentSongIndex && isPlaying ? \n '<div class=\"absolute inset-0 bg-black\/30 flex items-center justify-center\"><div class=\"flex space-x-0.5 h-3 items-end\"><div class=\"bar\"><\/div><div class=\"bar\"><\/div><div class=\"bar\"><\/div><\/div><\/div>' \n : ''}\n <\/div>\n <div class=\"flex-1 min-w-0\">\n <h3 class=\"text-sm font-semibold text-gray-800 truncate ${index === currentSongIndex ? 'text-blue-600' : ''}\">${song.title}<\/h3>\n <p class=\"text-xs text-gray-500 truncate\">${song.artist}<\/p>\n <\/div>\n <div class=\"text-gray-400 text-xs ml-2\">\n <i class=\"fas fa-play opacity-0 group-hover:opacity-100 transition-opacity\"><\/i>\n <\/div>\n `;\n playlistEl.appendChild(li);\n });\n }\n\n \/\/ \u52a0\u8f7d\u6b4c\u66f2\n function loadSong(index) {\n const song = songs[index];\n trackTitle.textContent = song.title;\n trackArtist.textContent = song.artist;\n coverImg.src = song.cover;\n audio.src = song.src;\n \n \/\/ \u66f4\u65b0\u5217\u8868\u9ad8\u4eae\n renderPlaylist();\n \n \/\/ \u91cd\u7f6e\u8fdb\u5ea6\n progressBar.value = 0;\n currentTimeEl.textContent = \"00:00\";\n statusText.textContent = `\u5df2\u52a0\u8f7d: ${song.title}`;\n statusText.classList.remove('text-red-500');\n }\n\n \/\/ \u64ad\u653e\u6307\u5b9a\u6b4c\u66f2\n function playSpecificSong(index) {\n if (currentSongIndex === index && isPlaying) {\n togglePlay();\n return;\n }\n currentSongIndex = index;\n loadSong(currentSongIndex);\n playAudio();\n }\n\n \/\/ \u5207\u6362\u64ad\u653e\/\u6682\u505c\n function togglePlay() {\n if (isPlaying) {\n pauseAudio();\n } else {\n playAudio();\n }\n }\n\n function playAudio() {\n \/\/ \u5904\u7406\u6d4f\u89c8\u5668\u81ea\u52a8\u64ad\u653e\u7b56\u7565\n const playPromise = audio.play();\n if (playPromise !== undefined) {\n playPromise.then(_ => {\n isPlaying = true;\n updatePlayButtonUI();\n renderPlaylist(); \/\/ \u66f4\u65b0\u5217\u8868\u4e2d\u7684\u64ad\u653e\u56fe\u6807\n statusText.textContent = \"\u6b63\u5728\u64ad\u653e\";\n })\n .catch(error => {\n console.error(\"\u64ad\u653e\u5931\u8d25:\", error);\n statusText.textContent = \"\u70b9\u51fb\u9875\u9762\u4ee5\u542f\u7528\u97f3\u9891\";\n });\n }\n }\n\n function pauseAudio() {\n audio.pause();\n isPlaying = false;\n updatePlayButtonUI();\n renderPlaylist();\n statusText.textContent = \"\u5df2\u6682\u505c\";\n }\n\n \/\/ \u4e0a\u4e00\u9996\n function prevSong() {\n currentSongIndex--;\n if (currentSongIndex < 0) {\n currentSongIndex = songs.length - 1;\n }\n loadSong(currentSongIndex);\n playAudio();\n }\n\n \/\/ \u4e0b\u4e00\u9996\n function nextSong() {\n currentSongIndex++;\n if (currentSongIndex > songs.length - 1) {\n currentSongIndex = 0;\n }\n loadSong(currentSongIndex);\n playAudio();\n }\n\n \/\/ \u66f4\u65b0\u8fdb\u5ea6\u6761\n function updateProgress() {\n if (isDragging) return;\n const { currentTime, duration } = audio;\n if (isNaN(duration)) return;\n \n progressBar.value = currentTime;\n currentTimeEl.textContent = formatTime(currentTime);\n \n \/\/ \u7b80\u5355\u7684\u8fdb\u5ea6\u6761\u80cc\u666f\u586b\u5145\u6548\u679c\n const percent = (currentTime \/ duration) * 100;\n progressBar.style.background = `linear-gradient(to right, #3b82f6 ${percent}%, #e2e8f0 ${percent}%)`;\n }\n\n \/\/ \u683c\u5f0f\u5316\u65f6\u95f4 MM:SS\n function formatTime(seconds) {\n const min = Math.floor(seconds \/ 60);\n const sec = Math.floor(seconds % 60);\n return `${min < 10 ? '0' + min : min}:${sec < 10 ? '0' + sec : sec}`;\n }\n\n \/\/ \u66f4\u65b0\u64ad\u653e\u6309\u94ae\u56fe\u6807\n function updatePlayButtonUI() {\n const icon = playBtn.querySelector('i');\n if (isPlaying) {\n icon.classList.remove('fa-play', 'pl-1');\n icon.classList.add('fa-pause');\n coverImg.classList.add('animate-spin-slow'); \/\/ \u5047\u8bbe\u6709\u4e00\u4e2a\u65cb\u8f6c\u52a8\u753b\u7c7b\uff0c\u8fd9\u91cc\u7528CSS\u7b80\u5355\u6a21\u62df\u6216JS\u63a7\u5236\n coverImg.style.animation = \"spin 10s linear infinite\";\n } else {\n icon.classList.remove('fa-pause');\n icon.classList.add('fa-play', 'pl-1');\n coverImg.style.animation = \"none\";\n }\n }\n\n \/\/ \u4e3b\u9898\u5207\u6362 (\u7b80\u5355\u5b9e\u73b0)\n function toggleTheme() {\n document.body.classList.toggle('bg-gray-900');\n document.body.classList.toggle('text-white');\n \/\/ \u8fd9\u91cc\u4ec5\u505a\u6f14\u793a\uff0c\u5b8c\u6574\u6697\u9ed1\u6a21\u5f0f\u9700\u8981\u66f4\u591aTailwind\u7c7b\u5207\u6362\n const icon = themeToggle.querySelector('i');\n if (document.body.classList.contains('bg-gray-900')) {\n icon.classList.remove('fa-moon');\n icon.classList.add('fa-sun');\n statusText.textContent = \"\u6697\u9ed1\u6a21\u5f0f\u5df2\u5f00\u542f (\u90e8\u5206\u6837\u5f0f\u9700\u9002\u914d)\";\n } else {\n icon.classList.remove('fa-sun');\n icon.classList.add('fa-moon');\n statusText.textContent = \"\u660e\u4eae\u6a21\u5f0f\u5df2\u5f00\u542f\";\n }\n }\n\n \/\/ \u6dfb\u52a0\u81ea\u5b9a\u4e49CSS\u52a8\u753b\n const styleSheet = document.createElement(\"style\");\n styleSheet.innerText = `\n @keyframes spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n }\n `;\n document.head.appendChild(styleSheet);\n\n \/\/ \u542f\u52a8\n initPlayer();\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>zz\u97f3\u4e50\u64ad\u653e\u5668 zz\u6b4c\u5355 \u9009\u62e9\u4e00\u9996\u6b4c\u66f2 \u672a\u77e5\u827a\u672f\u5bb6 00:00 00:00 \u51c6\u5907\u5c31\u7eea<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,1,8,5,7],"tags":[],"class_list":["post-2243","post","type-post","status-publish","format-standard","hentry","category-kzjp","category-uncategorized","category-updatefile","category-dujia","category-index"],"_links":{"self":[{"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/posts\/2243","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/comments?post=2243"}],"version-history":[{"count":21,"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/posts\/2243\/revisions"}],"predecessor-version":[{"id":2267,"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/posts\/2243\/revisions\/2267"}],"wp:attachment":[{"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/media?parent=2243"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/categories?post=2243"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/tags?post=2243"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":2243,"date":"2026-07-01T12:13:22","date_gmt":"2026-07-01T04:13:22","guid":{"rendered":"https:\/\/ytubage.com\/?p=2243"},"modified":"2026-07-01T14:54:55","modified_gmt":"2026-07-01T06:54:55","slug":"zzyy","status":"publish","type":"post","link":"https:\/\/ytubage.com\/index.php\/2026\/07\/01\/zzyy\/","title":{"rendered":"\u829d\u829d\u97f3\u4e50"},"content":{"rendered":"\n\n\n\n \n \n zz\u97f3\u4e50\u64ad\u653e\u5668<\/title>\n \n <script src=\"https:\/\/cdn.tailwindcss.com\"><\/script>\n \n <link rel=\"stylesheet\" href=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/font-awesome\/6.4.0\/css\/all.min.css\">\n <style>\n \/* \u81ea\u5b9a\u4e49\u6eda\u52a8\u6761 *\/\n ::-webkit-scrollbar {\n width: 6px;\n }\n ::-webkit-scrollbar-track {\n background: #f1f1f1; \n }\n ::-webkit-scrollbar-thumb {\n background: #cbd5e1; \n border-radius: 3px;\n }\n ::-webkit-scrollbar-thumb:hover {\n background: #94a3b8; \n }\n \n \/* \u97f3\u9891\u6ce2\u5f62\u52a8\u753b\u6a21\u62df *\/\n .bar {\n width: 3px;\n background-color: #3b82f6;\n animation: equalizer 1s infinite ease-in-out;\n }\n .bar:nth-child(2) { animation-delay: 0.2s; }\n .bar:nth-child(3) { animation-delay: 0.4s; }\n .bar:nth-child(4) { animation-delay: 0.1s; }\n \n @keyframes equalizer {\n 0%, 100% { height: 10px; }\n 50% { height: 20px; }\n }\n\n \/* \u9690\u85cf\u539f\u751f audio \u63a7\u4ef6\uff0c\u5b8c\u5168\u81ea\u5b9a\u4e49 UI *\/\n audio {\n display: none;\n }\n\n \/* \u8fdb\u5ea6\u6761\u6837\u5f0f\u4f18\u5316 *\/\n input[type=range] {\n -webkit-appearance: none; \n background: transparent; \n }\n input[type=range]::-webkit-slider-thumb {\n -webkit-appearance: none;\n height: 12px;\n width: 12px;\n border-radius: 50%;\n background: #3b82f6;\n cursor: pointer;\n margin-top: -4px; \n }\n input[type=range]::-webkit-slider-runnable-track {\n width: 100%;\n height: 4px;\n cursor: pointer;\n background: #e2e8f0;\n border-radius: 2px;\n }\n <\/style>\n<\/head>\n<body class=\"bg-gray-100 text-gray-800 font-sans h-screen flex items-center justify-center overflow-hidden\">\n\n \n <div class=\"w-full max-w-md bg-white rounded-2xl shadow-xl overflow-hidden flex flex-col h-[85vh] md:h-[700px] relative\">\n \n \n <div class=\"px-6 py-4 border-b border-gray-100 flex justify-between items-center bg-white z-10\">\n <h1 class=\"text-xl font-bold text-gray-800 tracking-tight\">zz\u6b4c\u5355<\/h1>\n <button id=\"theme-toggle\" class=\"text-gray-400 hover:text-blue-500 transition-colors\">\n <i class=\"fas fa-moon\"><\/i>\n <\/button>\n <\/div>\n\n \n <div class=\"flex-none bg-gradient-to-br from-blue-50 to-indigo-50 p-6 flex flex-col items-center justify-center relative\">\n \n <div class=\"w-48 h-48 rounded-full shadow-lg overflow-hidden border-4 border-white mb-6 relative group\">\n <img decoding=\"async\" id=\"cover-img\" src=\"https:\/\/hkzyz.ytubage.com\/2026\/zp\/01\/79.jpg\" alt=\"\u4e13\u8f91\u5c01\u9762\" class=\"w-full h-full object-cover transition-transform duration-700 group-hover:scale-110\">\n \n <div id=\"disc-animation\" class=\"absolute inset-0 rounded-full border border-gray-200 opacity-0 transition-opacity duration-300\"><\/div>\n <\/div>\n\n \n <div class=\"text-center mb-4 w-full\">\n <h2 id=\"track-title\" class=\"text-2xl font-bold text-gray-800 mb-1 truncate px-4\">\u9009\u62e9\u4e00\u9996\u6b4c\u66f2<\/h2>\n <p id=\"track-artist\" class=\"text-sm text-gray-500 font-medium\">\u672a\u77e5\u827a\u672f\u5bb6<\/p>\n <\/div>\n\n \n <div class=\"w-full px-2 mb-2\">\n <input type=\"range\" id=\"progress-bar\" value=\"0\" min=\"0\" max=\"100\" class=\"w-full h-1 bg-gray-200 rounded-lg appearance-none cursor-pointer\">\n <div class=\"flex justify-between text-xs text-gray-400 mt-1 font-mono\">\n <span id=\"current-time\">00:00<\/span>\n <span id=\"duration\">00:00<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"flex-none px-8 py-4 flex justify-between items-center bg-white border-b border-gray-100\">\n <button id=\"prev-btn\" class=\"text-gray-400 hover:text-blue-600 transition-colors text-xl p-2\">\n <i class=\"fas fa-step-backward\"><\/i>\n <\/button>\n \n <button id=\"play-btn\" class=\"w-14 h-14 bg-blue-500 hover:bg-blue-600 text-white rounded-full shadow-lg shadow-blue-200 flex items-center justify-center text-2xl transition-all transform hover:scale-105 active:scale-95\">\n <i class=\"fas fa-play pl-1\"><\/i>\n <\/button>\n \n <button id=\"next-btn\" class=\"text-gray-400 hover:text-blue-600 transition-colors text-xl p-2\">\n <i class=\"fas fa-step-forward\"><\/i>\n <\/button>\n <\/div>\n\n \n <div class=\"flex-1 overflow-y-auto bg-gray-50 p-4\" id=\"playlist-container\">\n <ul id=\"playlist\" class=\"space-y-2\">\n \n <\/ul>\n <\/div>\n\n \n <div class=\"px-4 py-2 bg-white border-t border-gray-100 text-xs text-center text-gray-400\">\n <span id=\"status-text\">\u51c6\u5907\u5c31\u7eea<\/span>\n <\/div>\n <\/div>\n\n \n <audio id=\"audio-player\" preload=\"metadata\"><\/audio>\n\n <script>\n \/\/ \u6a21\u62df\u97f3\u4e50\u6570\u636e (\u4f7f\u7528\u514d\u8d39\u7684\u793a\u4f8b\u97f3\u9891\u94fe\u63a5\uff0c\u5b9e\u9645\u9879\u76ee\u4e2d\u8bf7\u66ff\u6362\u4e3a\u771f\u5b9e\u8def\u5f84)\n \/\/ \u6ce8\u610f\uff1a\u7531\u4e8e\u8de8\u57df\u9650\u5236\uff0c\u90e8\u5206\u5728\u7ebf\u94fe\u63a5\u53ef\u80fd\u65e0\u6cd5\u64ad\u653e\uff0c\u8fd9\u91cc\u4f7f\u7528\u4e00\u4e9b\u7a33\u5b9a\u7684\u6d4b\u8bd5\u6e90\u6216\u5360\u4f4d\u903b\u8f91\n const songs = [\n {\n title: \"\u65b0\u767d\u5a18\u5b50\u4f20\u5947\",\n artist: \"\u65b0\u767d\u5a18\u5b50\u4f20\u5947\",\n src: \"https:\/\/hkzyz.ytubage.com\/2026\/music\/01\/6.mp3\",\n cover:\"https:\/\/hkzyz.ytubage.com\/2026\/zp\/01\/97.jpg\"\n },\n {\n title: \"\u4e0a\u6d77\u6ee9\",\n artist: \"\u4e0a\u6d77\u6ee9\",\n src: \"https:\/\/ytubage.com\/wp-content\/uploads\/2026\/03\/yz001.mp3\",\n cover:\"https:\/\/hkzyzv.ytubage.com\/02-zp\/Freshphotos\/202606\/1.jpg\"\n },\n {\n title: \"\u89c2\u4e16\u97f3\",\n artist: \"\u89c2\u4e16\u97f3\",\n src: \"https:\/\/hkzyz.ytubage.com\/2026\/music\/04\/07-gsy.mp3\",\n cover: \"https:\/\/hkzyz.ytubage.com\/2026\/zp\/01\/94.jpg\"\n },\n {\n title: \"\u4e58\u98ce\u7834\u6d6a\",\n artist: \"\u4e58\u98ce\u7834\u6d6a\",\n src: \"https:\/\/hkzyz.ytubage.com\/2026\/music\/04\/08cfpl.mp3\",\n cover: \"https:\/\/hkzyz.ytubage.com\/2026\/zp\/01\/81.jpg\"\n},\n {\n title: \"\u95ee\u60c5\",\n artist: \"\u95ee\u60c5\",\n src: \"https:\/\/ytubage.com\/wp-content\/uploads\/2026\/03\/yp03.mp3\",\n cover: \"https:\/\/hkzyz.ytubage.com\/2026\/zp\/01\/82.jpg\"\n },\n {\n title: \"\u8ffd\u68a6\u4eba\",\n artist: \"\u8ffd\u68a6\u4eba\",\n src: \"https:\/\/ytubage.com\/wp-content\/uploads\/2026\/04\/8.mp3\",\n cover: \"https:\/\/hkzyz.ytubage.com\/2026\/zp\/01\/83.jpg\"\n },\n {\n title: \"\u829d\u829d\u8bed\u5f55\",\n artist: \"\u829d\u829d\u8bed\u5f55\",\n src: \"https:\/\/ytubage.com\/wp-content\/uploads\/2026\/03\/zyz002.mp3\",\n cover: \"https:\/\/hkzyz.ytubage.com\/2026\/zp\/01\/96.jpg\"\n },\n ];\n\n \/\/ DOM \u5143\u7d20\u83b7\u53d6\n const audio = document.getElementById('audio-player');\n const playBtn = document.getElementById('play-btn');\n const prevBtn = document.getElementById('prev-btn');\n const nextBtn = document.getElementById('next-btn');\n const playlistEl = document.getElementById('playlist');\n const trackTitle = document.getElementById('track-title');\n const trackArtist = document.getElementById('track-artist');\n const coverImg = document.getElementById('cover-img');\n const progressBar = document.getElementById('progress-bar');\n const currentTimeEl = document.getElementById('current-time');\n const durationEl = document.getElementById('duration');\n const statusText = document.getElementById('status-text');\n const themeToggle = document.getElementById('theme-toggle');\n\n let currentSongIndex = 0;\n let isPlaying = false;\n let isDragging = false; \/\/ \u9632\u6b62\u62d6\u52a8\u65f6\u8fdb\u5ea6\u6761\u8df3\u52a8\n\n \/\/ \u521d\u59cb\u5316\u64ad\u653e\u5668\n function initPlayer() {\n renderPlaylist();\n loadSong(currentSongIndex);\n \n \/\/ \u4e8b\u4ef6\u76d1\u542c\n playBtn.addEventListener('click', togglePlay);\n prevBtn.addEventListener('click', prevSong);\n nextBtn.addEventListener('click', nextSong);\n \n \/\/ \u97f3\u9891\u4e8b\u4ef6\n audio.addEventListener('timeupdate', updateProgress);\n audio.addEventListener('ended', nextSong);\n audio.addEventListener('loadedmetadata', () => {\n durationEl.textContent = formatTime(audio.duration);\n progressBar.max = audio.duration;\n });\n audio.addEventListener('error', (e) => {\n console.error(\"\u97f3\u9891\u52a0\u8f7d\u9519\u8bef\", e);\n statusText.textContent = \"\u52a0\u8f7d\u5931\u8d25\uff0c\u8bf7\u68c0\u67e5\u7f51\u7edc\";\n statusText.classList.add('text-red-500');\n });\n\n \/\/ \u8fdb\u5ea6\u6761\u62d6\u52a8\n progressBar.addEventListener('input', (e) => {\n isDragging = true;\n const time = e.target.value;\n currentTimeEl.textContent = formatTime(time);\n });\n\n progressBar.addEventListener('change', (e) => {\n isDragging = false;\n audio.currentTime = e.target.value;\n if (!isPlaying) {\n togglePlay();\n }\n });\n\n \/\/ \u4e3b\u9898\u5207\u6362\n themeToggle.addEventListener('click', toggleTheme);\n }\n\n \/\/ \u6e32\u67d3\u64ad\u653e\u5217\u8868\n function renderPlaylist() {\n playlistEl.innerHTML = '';\n songs.forEach((song, index) => {\n const li = document.createElement('li');\n li.className = `flex items-center p-3 rounded-lg cursor-pointer transition-all duration-200 group ${index === currentSongIndex ? 'bg-blue-50 border-l-4 border-blue-500' : 'hover:bg-gray-100 border-l-4 border-transparent'}`;\n li.onclick = () => playSpecificSong(index);\n\n li.innerHTML = `\n <div class=\"relative w-10 h-10 rounded overflow-hidden mr-3 flex-shrink-0\">\n <img decoding=\"async\" src=\"${song.cover}\" alt=\"${song.title}\u5c01\u9762\" class=\"w-full h-full object-cover\">\n ${index === currentSongIndex && isPlaying ? \n '<div class=\"absolute inset-0 bg-black\/30 flex items-center justify-center\"><div class=\"flex space-x-0.5 h-3 items-end\"><div class=\"bar\"><\/div><div class=\"bar\"><\/div><div class=\"bar\"><\/div><\/div><\/div>' \n : ''}\n <\/div>\n <div class=\"flex-1 min-w-0\">\n <h3 class=\"text-sm font-semibold text-gray-800 truncate ${index === currentSongIndex ? 'text-blue-600' : ''}\">${song.title}<\/h3>\n <p class=\"text-xs text-gray-500 truncate\">${song.artist}<\/p>\n <\/div>\n <div class=\"text-gray-400 text-xs ml-2\">\n <i class=\"fas fa-play opacity-0 group-hover:opacity-100 transition-opacity\"><\/i>\n <\/div>\n `;\n playlistEl.appendChild(li);\n });\n }\n\n \/\/ \u52a0\u8f7d\u6b4c\u66f2\n function loadSong(index) {\n const song = songs[index];\n trackTitle.textContent = song.title;\n trackArtist.textContent = song.artist;\n coverImg.src = song.cover;\n audio.src = song.src;\n \n \/\/ \u66f4\u65b0\u5217\u8868\u9ad8\u4eae\n renderPlaylist();\n \n \/\/ \u91cd\u7f6e\u8fdb\u5ea6\n progressBar.value = 0;\n currentTimeEl.textContent = \"00:00\";\n statusText.textContent = `\u5df2\u52a0\u8f7d: ${song.title}`;\n statusText.classList.remove('text-red-500');\n }\n\n \/\/ \u64ad\u653e\u6307\u5b9a\u6b4c\u66f2\n function playSpecificSong(index) {\n if (currentSongIndex === index && isPlaying) {\n togglePlay();\n return;\n }\n currentSongIndex = index;\n loadSong(currentSongIndex);\n playAudio();\n }\n\n \/\/ \u5207\u6362\u64ad\u653e\/\u6682\u505c\n function togglePlay() {\n if (isPlaying) {\n pauseAudio();\n } else {\n playAudio();\n }\n }\n\n function playAudio() {\n \/\/ \u5904\u7406\u6d4f\u89c8\u5668\u81ea\u52a8\u64ad\u653e\u7b56\u7565\n const playPromise = audio.play();\n if (playPromise !== undefined) {\n playPromise.then(_ => {\n isPlaying = true;\n updatePlayButtonUI();\n renderPlaylist(); \/\/ \u66f4\u65b0\u5217\u8868\u4e2d\u7684\u64ad\u653e\u56fe\u6807\n statusText.textContent = \"\u6b63\u5728\u64ad\u653e\";\n })\n .catch(error => {\n console.error(\"\u64ad\u653e\u5931\u8d25:\", error);\n statusText.textContent = \"\u70b9\u51fb\u9875\u9762\u4ee5\u542f\u7528\u97f3\u9891\";\n });\n }\n }\n\n function pauseAudio() {\n audio.pause();\n isPlaying = false;\n updatePlayButtonUI();\n renderPlaylist();\n statusText.textContent = \"\u5df2\u6682\u505c\";\n }\n\n \/\/ \u4e0a\u4e00\u9996\n function prevSong() {\n currentSongIndex--;\n if (currentSongIndex < 0) {\n currentSongIndex = songs.length - 1;\n }\n loadSong(currentSongIndex);\n playAudio();\n }\n\n \/\/ \u4e0b\u4e00\u9996\n function nextSong() {\n currentSongIndex++;\n if (currentSongIndex > songs.length - 1) {\n currentSongIndex = 0;\n }\n loadSong(currentSongIndex);\n playAudio();\n }\n\n \/\/ \u66f4\u65b0\u8fdb\u5ea6\u6761\n function updateProgress() {\n if (isDragging) return;\n const { currentTime, duration } = audio;\n if (isNaN(duration)) return;\n \n progressBar.value = currentTime;\n currentTimeEl.textContent = formatTime(currentTime);\n \n \/\/ \u7b80\u5355\u7684\u8fdb\u5ea6\u6761\u80cc\u666f\u586b\u5145\u6548\u679c\n const percent = (currentTime \/ duration) * 100;\n progressBar.style.background = `linear-gradient(to right, #3b82f6 ${percent}%, #e2e8f0 ${percent}%)`;\n }\n\n \/\/ \u683c\u5f0f\u5316\u65f6\u95f4 MM:SS\n function formatTime(seconds) {\n const min = Math.floor(seconds \/ 60);\n const sec = Math.floor(seconds % 60);\n return `${min < 10 ? '0' + min : min}:${sec < 10 ? '0' + sec : sec}`;\n }\n\n \/\/ \u66f4\u65b0\u64ad\u653e\u6309\u94ae\u56fe\u6807\n function updatePlayButtonUI() {\n const icon = playBtn.querySelector('i');\n if (isPlaying) {\n icon.classList.remove('fa-play', 'pl-1');\n icon.classList.add('fa-pause');\n coverImg.classList.add('animate-spin-slow'); \/\/ \u5047\u8bbe\u6709\u4e00\u4e2a\u65cb\u8f6c\u52a8\u753b\u7c7b\uff0c\u8fd9\u91cc\u7528CSS\u7b80\u5355\u6a21\u62df\u6216JS\u63a7\u5236\n coverImg.style.animation = \"spin 10s linear infinite\";\n } else {\n icon.classList.remove('fa-pause');\n icon.classList.add('fa-play', 'pl-1');\n coverImg.style.animation = \"none\";\n }\n }\n\n \/\/ \u4e3b\u9898\u5207\u6362 (\u7b80\u5355\u5b9e\u73b0)\n function toggleTheme() {\n document.body.classList.toggle('bg-gray-900');\n document.body.classList.toggle('text-white');\n \/\/ \u8fd9\u91cc\u4ec5\u505a\u6f14\u793a\uff0c\u5b8c\u6574\u6697\u9ed1\u6a21\u5f0f\u9700\u8981\u66f4\u591aTailwind\u7c7b\u5207\u6362\n const icon = themeToggle.querySelector('i');\n if (document.body.classList.contains('bg-gray-900')) {\n icon.classList.remove('fa-moon');\n icon.classList.add('fa-sun');\n statusText.textContent = \"\u6697\u9ed1\u6a21\u5f0f\u5df2\u5f00\u542f (\u90e8\u5206\u6837\u5f0f\u9700\u9002\u914d)\";\n } else {\n icon.classList.remove('fa-sun');\n icon.classList.add('fa-moon');\n statusText.textContent = \"\u660e\u4eae\u6a21\u5f0f\u5df2\u5f00\u542f\";\n }\n }\n\n \/\/ \u6dfb\u52a0\u81ea\u5b9a\u4e49CSS\u52a8\u753b\n const styleSheet = document.createElement(\"style\");\n styleSheet.innerText = `\n @keyframes spin {\n from { transform: rotate(0deg); }\n to { transform: rotate(360deg); }\n }\n `;\n document.head.appendChild(styleSheet);\n\n \/\/ \u542f\u52a8\n initPlayer();\n <\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>zz\u97f3\u4e50\u64ad\u653e\u5668 zz\u6b4c\u5355 \u9009\u62e9\u4e00\u9996\u6b4c\u66f2 \u672a\u77e5\u827a\u672f\u5bb6 00:00 00:00 \u51c6\u5907\u5c31\u7eea<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,1,8,5,7],"tags":[],"class_list":["post-2243","post","type-post","status-publish","format-standard","hentry","category-kzjp","category-uncategorized","category-updatefile","category-dujia","category-index"],"_links":{"self":[{"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/posts\/2243","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/comments?post=2243"}],"version-history":[{"count":21,"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/posts\/2243\/revisions"}],"predecessor-version":[{"id":2267,"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/posts\/2243\/revisions\/2267"}],"wp:attachment":[{"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/media?parent=2243"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/categories?post=2243"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ytubage.com\/index.php\/wp-json\/wp\/v2\/tags?post=2243"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}