diff --git a/player.html b/player.html index 1ca411f..b2fad25 100644 --- a/player.html +++ b/player.html @@ -1,495 +1,1205 @@ - + - - - - 道口艺金 - 音乐播放器 - - - - - - + + + 朴见潮音 + + + + + + /* 顶部区域 (歌名) */ + .header-info { + order: 2; + text-align: center; + margin: 15px 0; + z-index: 25; + padding: 0 30px; + opacity: 0.9; + } + + .header-title { + font-size: 22px; + font-weight: 700; + margin-bottom: 6px; + letter-spacing: 0.5px; + text-shadow: 0 4px 10px rgba(0, 0, 0, 0.5); + } + + .header-artist { + font-size: 13px; + color: var(--text-sub); + background: rgba(255, 255, 255, 0.1); + padding: 2px 8px; + border-radius: 10px; + display: inline-block; + backdrop-filter: blur(4px); + } + + /* --- 4. 核心视图切换区 --- */ + .view-wrapper { + order: 1; + position: relative; + width: 100%; + flex: 1; + display: flex; + justify-content: center; + transition: opacity 0.4s ease; + } + + /* A. 唱片模式 */ + .disc-mode { + position: absolute; + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + transition: opacity 0.5s, transform 0.5s; + } + + .disc-mode.hidden { + opacity: 0; + pointer-events: none; + transform: scale(0.95); + } + + /* 唱臂组件 */ + .needle { + position: absolute; + top: -50px; + left: 50%; + width: 80px; + height: 140px; + z-index: 20; + transform-origin: 40px 20px; + /* 修正旋转中心 */ + transform: translateX(-10px) rotate(-35deg); + transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); + pointer-events: none; + filter: drop-shadow(4px 8px 10px rgba(0, 0, 0, 0.5)); + /* 增加立体投影 */ + } + + .needle.playing { + transform: translateX(-10px) rotate(-5deg); + /* 修正角度 */ + } + + .needle-pivot { + position: absolute; + top: 0; + left: 20px; + width: 40px; + height: 40px; + border-radius: 50%; + background: radial-gradient(circle at 30% 30%, #e0e0e0, #555); + border: 1px solid #444; + z-index: 3; + } + + .needle-pivot::before { + content: ''; + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 12px; + height: 12px; + background: #222; + border-radius: 50%; + } + + .needle-rod { + position: absolute; + top: 30px; + left: 36px; + width: 8px; + height: 100px; + background: linear-gradient(90deg, #555, #ccc, #555); + z-index: 2; + } + + .needle-head { + position: absolute; + bottom: 0; + left: 28px; + width: 24px; + height: 38px; + background: #1a1a1a; + border-radius: 4px; + z-index: 2; + border-top: 2px solid #555; + } + + /* 唱片本体容器 */ + .disc-container { + width: 72vw; + height: 72vw; + max-width: 320px; + max-height: 320px; + margin-top: 35px; + position: relative; + display: flex; + justify-content: center; + align-items: center; + } + + /* --- 增强特效：动态光波 (Ripple) --- */ + .ripple { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 100%; + height: 100%; + border-radius: 50%; + border: 1px solid rgba(255, 255, 255, 0.1); + opacity: 0; + z-index: 0; + pointer-events: none; + } + + /* 播放时触发 ripple 动画 */ + .disc-mode.playing .ripple:nth-child(1) { + animation: rippleAnim 2.5s linear infinite; + animation-delay: 0s; + } + + .disc-mode.playing .ripple:nth-child(2) { + animation: rippleAnim 2.5s linear infinite; + animation-delay: 0.8s; + } + + .disc-mode.playing .ripple:nth-child(3) { + animation: rippleAnim 2.5s linear infinite; + animation-delay: 1.6s; + } + + @keyframes rippleAnim { + 0% { + width: 100%; + height: 100%; + opacity: 0.4; + border-width: 4px; + } + + 100% { + width: 160%; + height: 160%; + opacity: 0; + border-width: 0px; + } + } + + /* 唱片主体 */ + .disc { + width: 100%; + height: 100%; + border-radius: 50%; + background: + radial-gradient(circle, #111 0%, #1a1a1a 100%); + /* 纹理 */ + background-image: repeating-radial-gradient(#111 0, #111 2px, #222 3px, #252525 4px); + box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8); + display: flex; + justify-content: center; + align-items: center; + animation: rotate 20s linear infinite; + animation-play-state: paused; + position: relative; + z-index: 2; + border: 6px solid #080808; + } + + /* 唱片光泽反射层 (Gloss) */ + .disc::before { + content: ''; + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; + border-radius: 50%; + background: linear-gradient(45deg, transparent 40%, rgba(255, 255, 255, 0.08) 50%, transparent 60%); + z-index: 4; + pointer-events: none; + } + + .disc.playing { + animation-play-state: running; + } + + .album-cover { + width: 65%; + height: 65%; + border-radius: 50%; + overflow: hidden; + z-index: 3; + border: 4px solid #000; + position: relative; + } + + .album-cover img { + width: 100%; + height: 100%; + object-fit: cover; + transition: transform 0.3s; + } + + /* 封面跳动效果 */ + .disc.playing .album-cover img { + animation: beat 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94) infinite alternate; + } + + @keyframes rotate { + from { + transform: rotate(0deg); + } + + to { + transform: rotate(360deg); + } + } + + @keyframes beat { + from { + transform: scale(1); + filter: brightness(1); + } + + to { + transform: scale(1.03); + filter: brightness(1.05); + } + } + + .hint-text { + margin-top: 40px; + font-size: 12px; + color: var(--text-sub); + background: rgba(0, 0, 0, 0.3); + padding: 4px 12px; + border-radius: 20px; + letter-spacing: 1px; + } + + /* B. 歌词模式 */ + .lyrics-mode { + position: absolute; + top: 0; + width: 100%; + height: 100%; + display: flex; + flex-direction: column; + align-items: center; + opacity: 0; + pointer-events: none; + transform: translateY(30px); + transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1); + z-index: 50; + } + + .lyrics-mode.active { + opacity: 1; + pointer-events: auto; + transform: translateY(0); + } + + .lyrics-header { + margin-top: 20px; + margin-bottom: 20px; + font-size: 14px; + color: rgba(255, 255, 255, 0.4); + } + + .lyrics-scroll { + width: 85%; + height: 70%; + overflow-y: auto; + scroll-behavior: smooth; + -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%); + mask-image: linear-gradient(to bottom, transparent 0%, black 15%, black 85%, transparent 100%); + } + + .lyrics-scroll::-webkit-scrollbar { + display: none; + } + + .lyric-line { + padding: 12px 0; + font-size: 16px; + color: rgba(255, 255, 255, 0.4); + transition: all 0.4s ease; + text-align: center; + line-height: 1.5; + } + + .lyric-line.active { + color: var(--theme-color); + font-size: 22px; + font-weight: bold; + text-shadow: 0 0 15px rgba(212, 175, 55, 0.4); + transform: scale(1.05); + } + + /* --- 5. 底部控制区 (Glassmorphism) --- */ + .controls-area { + order: 3; + width: 100%; + padding: 20px 25px 40px; + background: var(--glass-bg); + backdrop-filter: blur(20px) saturate(180%); + -webkit-backdrop-filter: blur(20px) saturate(180%); + border-top: 1px solid var(--glass-border); + border-top-left-radius: 24px; + border-top-right-radius: 24px; + z-index: 100; + box-shadow: 0 -10px 40px rgba(0, 0, 0, 0.5); + } + + /* 音乐频谱波形 (模拟) */ + .music-waves { + display: flex; + justify-content: center; + align-items: flex-end; + height: 16px; + gap: 3px; + margin-bottom: 15px; + opacity: 0.6; + } + + .wave-bar { + width: 3px; + background: #fff; + border-radius: 2px; + height: 4px; + transition: height 0.1s; + } + + /* 播放时的波形动画 */ + body.is-playing .wave-bar { + animation: waveBounce 0.6s infinite ease-in-out alternate; + } + + body.is-playing .wave-bar:nth-child(1) { + animation-delay: 0.1s; + animation-duration: 0.5s; + } + + body.is-playing .wave-bar:nth-child(2) { + animation-delay: 0.3s; + animation-duration: 0.7s; + } + + body.is-playing .wave-bar:nth-child(3) { + animation-delay: 0.0s; + animation-duration: 0.6s; + } + + body.is-playing .wave-bar:nth-child(4) { + animation-delay: 0.4s; + animation-duration: 0.5s; + } + + body.is-playing .wave-bar:nth-child(5) { + animation-delay: 0.2s; + animation-duration: 0.8s; + } + + @keyframes waveBounce { + 0% { + height: 4px; + opacity: 0.3; + } + + 100% { + height: 16px; + opacity: 1; + background: var(--theme-color); + } + } + + /* 进度条 */ + .progress-container { + display: flex; + align-items: center; + margin-bottom: 25px; + font-size: 11px; + font-weight: 500; + color: rgba(255, 255, 255, 0.5); + font-variant-numeric: tabular-nums; + } + + .progress-bar { + flex: 1; + height: 4px; + background: rgba(255, 255, 255, 0.15); + border-radius: 4px; + margin: 0 12px; + position: relative; + cursor: pointer; + overflow: visible; + /* 允许圆点超出 */ + } + + /* 增加触摸区域 */ + .progress-bar::before { + content: ''; + position: absolute; + top: -10px; + bottom: -10px; + left: 0; + right: 0; + z-index: 10; + } + + .progress-fill { + width: 0%; + height: 100%; + background: linear-gradient(90deg, #fff, var(--theme-color)); + border-radius: 4px; + position: relative; + } + + .progress-dot { + width: 12px; + height: 12px; + background: #fff; + border-radius: 50%; + position: absolute; + right: -6px; + top: -4px; + box-shadow: 0 0 10px rgba(255, 255, 255, 0.8); + transform: scale(0); + transition: transform 0.2s; + } + + .progress-bar:active .progress-dot, + .is-playing .progress-dot { + transform: scale(1); + } + + /* 按钮组 */ + .btn-group { + display: flex; + justify-content: space-between; + align-items: center; + padding: 0 10px; + } + + .btn { + background: none; + border: none; + cursor: pointer; + opacity: 0.7; + transition: all 0.2s; + color: #fff; + display: flex; + justify-content: center; + align-items: center; + } + + .btn:active { + transform: scale(0.9); + opacity: 1; + } + + .btn-play { + width: 65px; + height: 65px; + border-radius: 50%; + background: rgba(255, 255, 255, 0.1); + border: 1px solid rgba(255, 255, 255, 0.2); + box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); + opacity: 1; + } + + .btn-play svg { + fill: #fff; + } + + .btn-side { + width: 40px; + height: 40px; + } + + /* Loading */ + .loader { + position: fixed; + inset: 0; + background: #000; + z-index: 200; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + transition: opacity 0.6s; + } + + .loader-text { + margin-top: 15px; + font-size: 12px; + letter-spacing: 3px; + color: rgba(255, 255, 255, 0.5); + animation: blink 1.5s infinite; + } + + .spinner { + width: 40px; + height: 40px; + border: 3px solid rgba(255, 255, 255, 0.1); + border-top-color: var(--theme-color); + border-radius: 50%; + animation: spin 1s linear infinite; + } + + @keyframes spin { + to { + transform: rotate(360deg); + } + } + + @keyframes blink { + 50% { + opacity: 0.3; + } + } + + + -
LOADING...
+
+ +
LOADING...
+
-
-
-
+ +
+
+
+
+
+ +
+ +
+
...
+
Hi-Res Audio
-
-
-
-
- - - - - - - - - -
-
-
-
-
-
-
-
+ +
+ +
+
+
+
+
+ +
+ +
+
+
+ +
+
+ cover +
+
+
+
轻触查看歌词
+
+ + +
+
歌词 LYRICS
+
+
暂无歌词
+
+
-
-
-
+ +
+ +
+
+
+
+
+
+
+
-
-
+
+ 00:00 +
+
+
+
+ 00:00 +
-
- 00:00 -
-
-
-
-
-
-
- 00:00 -
+
+ + - -
- - -
+ + + + + + + + + + + +
+
- + - + init(); + - \ No newline at end of file + +