Aplayer 音乐播放器美化配置

GW2025-09-102025-09-10

很多博客都在使用播放器音乐播放器，一般都是在配置里设置成“固定”模式将播放器放置在网页左下角或者使用会议来专门开辟一个音乐的网页。本文会说明如何在“固定”模式下通过修改配置文件来美化播放器播放器。

先放一下我的播放器美化前后的对比 ~
！概念图像

当然每个人对 UI 配色风格的接受程度都是不同的, 我在这里不会说怎么配色就会比原来的好看, 因为这些完全取决于个人的主观感受, 我们常说的 ”美化的终点是默认” 其实也有一定的道理. 这里只会介绍播放器哪个部件样式应该在哪个文件的哪个地方来配置, 而 value 的选择完全看您自己的喜好.
aplayer 官方中档建议先阅读，其中介绍了十几项参数，它们的设置一般都是在 html 文件中指定的。（其中的主题和 listMaxHeight 与播放器的样式有关）

现在简单的将播放器分为两块, 如上图所示, 一是底下的长栏 ( 显示当前播放的歌曲即歌手名, 进度条, 控制按钮等 ), 二是展开后上面的歌单 ( 序号, 歌名, 歌手名等 ) 现在请您下载我的两份参考代码, 分别是 Aplayer.min.css 和 Aplayer.min.js, github 链接 or gitee 链接. 下面我给出了两个无序列表 ( 当然参考代码的最前面的注释里也有 ) 你想更改哪里的配置就将对应的黑色实心小圆点后的文字复制后在代码中搜索, ( 在 Aplayer.min.css 中搜索, 只有两处会涉及 js 文件我会特别提醒 ), 如此你就能找到我埋在那里的定位注释了 ( 比如我用的是 VS Code, 搜索指定文字的快捷键是 Ctrl F, 如果我想要更改 “歌单背景颜色”, 那么只需要按下快捷键, 输入这几个字, 即可找到对应的位置了, 当然也可以在前面注释中选中 “歌单背景颜色” 再按 Ctrl F )

对于底部栏

修改哪个即搜索哪个词条即能定位，词条后面的逗号里为注释，搜索时请忽略。