接近纯色的浅灰页面上放着一个音乐播放器：上方是一枚圆角方块，像从背景里轻轻鼓出来，里面一个音符；下面是曲名与演唱者，再往下是一条细长的进度条和三颗上一曲、播放暂停、下一曲按钮。按钮按下去会从凸起变成凹陷，进度条可以直接点任意位置跳转，一曲结束自动接下一首。技术上是 CSS 的新拟态阴影配一百来行原生 JavaScript，音频用浏览器自带的 Audio 对象驱动，没有引入任何库，曲目文件已随包附带。
这个播放器的三个要点
凸起和凹陷是同一组阴影的正负。凸起用「左上亮、右下暗」的两层外阴影，按下时把同样两层改成 inset 并对调方向，于是同一个元素既能鼓起来也能陷下去。
进度条既是显示也是控件。播放时按当前时间比例改内条宽度，点击时反过来用点击位置除以容器宽度算出目标时间，一个元素承担两个职责。
播放列表就是一个数组。每首曲目是「路径、标题、演唱者」三个字段，上一首下一首用取模运算循环，末尾接回开头不会越界。
新拟态为什么必须用浅色背景
这套风格的核心是：元素颜色和背景几乎一致，只靠两侧相反的阴影暗示凸起方向。源码里的写法大致是这个样子：
box-shadow: 8px 8px 16px #bebebe, -8px -8px 16px #ffffff;
一道比背景略深，一道比背景略浅，模拟一束固定方向的光。因此背景必须留出「能更深也能更浅」的余地——纯白或纯黑背景做不出这个效果，深色版需要把两道阴影的对比重新配一遍，而不是简单反色。
能改的地方
换歌只需改脚本开头的曲目数组，把路径指向自己的音频文件即可，数量不限。配色集中在样式的背景色和那两道阴影色上，三者要一起调整才协调。按钮里用的是 Unicode 播放符号，想换成图标字体或 SVG 直接替换文本节点即可，样式不用动。
常见问题
打开后没有自动播放？
浏览器默认禁止未经交互的自动播放，首次需要点一下播放按钮。想保留自动播放的观感，可以在首次加载时静音播放、由用户点击后取消静音。
进度条点了没反应？
跳转依赖音频的时长信息，元数据还没加载完时点击会无效。给音频元素监听 loadedmetadata，在此之前把进度条设为不可点击即可避免。
能加音量和歌词吗？
能。音量直接改音频对象的 volume 属性，复用进度条那套点击换算就是一根音量条；歌词可以在曲目数组里多加一个字段，播放时按当前时间查找对应行。
适合用在哪
播客与音乐类站点的迷你播放器、产品页的背景音乐控件、个人主页的听歌模块，也可以把这套凹凸阴影单独拆出来做一整套软 UI 控件。阴影配方与播放逻辑的完整实现都在源码里，下载后可查看。
