feat(music): 实现黑胶唱片播放器与歌词同步功能

- 重构黑胶唱片样式,添加旋转动画与脉冲波效果
- 移除机械臂元素,改用点击唱片控制播放/暂停
- 新增歌词显示区域,实现歌词随播放进度高亮
- 解析并加载 LRC 歌词文件,支持异步获取远程歌词
- 使用 requestAnimationFrame 实现高性能歌词滚动
- 更新移动端悬浮按钮状态以反映音乐播放状态
- 简化主题判断逻辑,优化语言切换功能
- 隐藏 APlayer 默认界面,保留核心音频控制功能
This commit is contained in:
hehh
2025-11-23 20:35:14 +08:00
parent 6a84d81fee
commit 9e3564e60d
3 changed files with 69 additions and 31 deletions

View File

@@ -196,11 +196,9 @@
</div>
<div class="vinyl-player">
<div class="vinyl-disc" id="vinyl-disc"></div>
<div class="vinyl-arm"></div>
<div class="vinyl-info">
<span class="vinyl-title" data-i18n="music.playlist">My Playlist</span>
<button id="music-toggle" class="link-btn" aria-label="Toggle Music">Play</button>
<span id="music-status" class="vinyl-status" style="display:none;" data-i18n="music.unavailable">Player under maintenance</span>
<span id="music-status" class="vinyl-status" style="display:none;" data-i18n="music.unavailable">Player under maintenance</span>
<div class="vinyl-lyrics" id="vinyl-lyrics">
<div id="lyric-current">--</div>
</div>
<div id="aplayer" class="aplayer" style="flex:1;"></div>
</div>