给博客接一个网易云播放器

博客有音乐，就像房间有背景音——访客愿意多待一会儿。

三行代码接入歌单

MetingJS 是最省事的方案，支持网易云、QQ 音乐等：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.css">
<script src="https://cdn.jsdelivr.net/npm/aplayer/dist/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>

<meting-js server="netease" type="playlist" id="你的歌单ID"></meting-js>

把 id 换成你自己的网易云歌单 ID，刷新页面就能听到歌了。

手写一颗黑胶唱片

比起默认播放器的方块按钮，一颗会转的黑胶更有味道。全部代码只需要一个径向渐变：

.vinyl {
  width: 76px; height: 76px; border-radius: 50%;
  background: radial-gradient(circle at center,
    #1a1a2e 30%, #2a2a4a 31%, #1a1a2e 45%,
    #f4a7b9 46%, #2a2a4a 60%, #1a1a2e 61%);
  animation: spin 8s linear infinite;
}
.player.paused .vinyl { animation-play-state: paused; }

粉色的部分是唱片标签，46% 到 60% 之间那圈粉色会跟着整体一起旋转。

细节决定质感

• 暂停时唱片也要停：animation-play-state: paused 一行搞定
• 进度条用渐变色：比纯色多一层"流动感"
• 歌曲名用衬线字体：和正文区分开，像 CD 盒上的印刷字

后续计划

等接入真实 API 后，再补上歌词滚动和封面旋转的联动。到时候再来更新这篇文章。