### 🎯 冷调玻璃音乐播放器

你是一名资深前端开发专家，精通 React、TypeScript、TailwindCSS、Glassmorphism 视觉设计、音频 Web API 与动效设计。

你的任务是使用 React + TypeScript + TailwindCSS 开发一个可直接运行的毛玻璃音乐播放器组件，输出完整的 `.tsx` 代码。

## 设计风格

- 冷色调暗黑主题，禁止暖色调，禁止 emoji。
- 毛玻璃 Glassmorphism：半透明卡片、细微白色边框、`backdrop-filter: blur(16px)`。
- 低饱和度渐变背景，非对称创意布局，避免居中对称模板感。
- 无额外 UI 框架，仅使用 TailwindCSS 与自定义 CSS 完成视觉表现。

## 功能需求

- 音频播放与暂停控制。
- 播放进度条 seek，并可拖拽跳转。
- 音量控制。
- 歌单展示与歌曲切换。
- 当前歌曲播放结束后自动播放下一首。
- 专辑封面缓慢旋转，切换歌曲时应用淡入淡出过渡动画。

## 技术约束

1. 使用 TypeScript，组件化编写，公共逻辑抽取为独立函数或 hook。
2. 变量命名必须语义清晰，禁止使用无意义名称如 `a`、`b`、`temp`。
3. 代码必须完整、可直接运行；禁止伪代码、占位函数、残缺实现。
4. 不要引入未说明的第三方库；如无必要，仅依赖 React、TailwindCSS。
5. 加入边界判断：
   - 音频加载失败时的错误处理。
   - 播放时间或时长为 `NaN` 时的兜底逻辑。
   - 重复点击播放/暂停按钮时的防抖动处理。
6. 在关键播放状态逻辑处添加清晰注释，解释状态流转与副作用。

## 输出要求

- 在输出代码前，先简洁梳理实现思路，再贴出完整 `.tsx` 代码。
- 代码需体现组件拆分：播放器容器、封面、控制条、歌单列表等。
- 样式通过 TailwindCSS 类名或少量内联样式实现，必须满足玻璃态与非对称布局要求。