一次音乐播放器的定制
#Music #Web
有关音乐播放器的内容 请您直接跳转音乐播放器
原谅我前面的一堆废话 不想看的可以直接跳转！
初入茅庐
Mizuki
前几日 我开通了我的网站
（您可访问旧站）
开通之前 我就有许多定制的想法
（
改圆角什么的就不说了
比如顶栏常驻 这个功能Gemini/Deepseek在Mizuki怎么写都写不出来 无奈败北
最后 我也是写出了几个自订的组件
分类以磁贴形式展示 磁贴可以长按替换为标签 各种工具栏现在被整合 占据空间更小
转换赛道
然而这样的顶栏应该配合常驻 可Mizuki的模板 以 我的水平 无法成功修改
在看别的模板的时候 我看到了Firefly
Firefly
Firefly 也是一个博客模板 并且这个模板自带顶栏常驻 且有更丰富的功能 我便准备迁移至Firefly
首先 我盯上了那个主题设置
控制面板
原版的设置由三个Tab构成 而 樱花竟然单开了一个Tab
并且有着一堆开关控件（原有的设计做成直角就不是特别好看）
作为一个要极致利用空间
下一步 我开始定制媒体播放器
音乐播放器
音乐播放器原有的布局非常冗余 并且功能残缺 先从布局开始
布局
我设想了一下 应当把封面作为主体元素 但不宜占据满宽度 所以我让它 占据左侧⅗的位置 右侧空余部分 可以放置什么呢？
播放列表
这是个好主意 如何呈现呢？同样以封面呈现 并且 可以同时展现3张
封面
于是我开始动手尝试 期间无数次修改
- 外侧控制进度条
- 内侧控制播放/音量/切歌
非常符合直觉的设计
然而由于可能是svelte组件的功能缺失或
然而 移动端无法使用 Hover 而常驻菜单又过于难看 丞需解决 我将目光放向了……
正在播放
播放列表的展示也是一难度 我决定这样
- 采用堆叠式卡片
- 正在播放曲目封面和左侧平齐
- 未播放歌曲封面缩小并加以透明度
并且 注意到 当前播放的歌曲封面我们并没有利用到 这里还处于右侧区域 那么… 可以干什么呢？
当然是控制音量啦！
这样 便解决了移动端适配问题
歌词
歌词部分 我注意到原本的翻译采用的是
原文（翻译）
的格式
可是这样换行会非常不优雅
于是我想到一个绝妙的解决方案
检索每行歌词括号并换行 样式改为小字
这样 就不会有诡异的换行了 可是还存在一些问题
一些歌曲的歌词自带（）这种如何处理呢？
灵光乍现
检索每行歌词最后一对括号
这样 能适配绝大部分的歌词了
更多功能的加入
整体框架搭好啦！ 下面我便开始了功能的完善 包括洗牌 歌词放大 自定义歌单等个性化功能我不过多赘叙
打乱列表与洗牌动画
原版的随机播放不同于常见的音乐播放软件 （我愿称之为 打乱 形式） 他是真的数字随机 会出现同样的歌曲 所以 我选择额外开发一个 洗牌 功能 可以打乱当前列表
入口的选择
怎么开启这个洗牌呢
有一个非常符合
长按右侧当前播放曲目封面
为什么呢
因为当前播放曲目是不会变的 放在这里就很明确
我的职责当然就是设计+调试
代码交给AI
总之 最后 我完成了这样的一个播放器
解耦&优化
在还没完成以上全部功能的时候 最文件已经达到了2000多行 非常不方便我
关于移动端
移动端的长按 极易触发长按菜单
Click.ts中 可以随时调用 这大大减小了体积和方便了修改
结语
网站的开发实属不易 还有许多的bug没有修 但是
感谢AI给我们带了了这个空间
可以自由展现出自己想法的空间
虽然不一定能完全实现 但只要耐心的引导 便可还原80%吧！
注<本来笔者想要用cli自动编程的> 但是没钱+不知道为什么进了Cli就智商堪忧了 最终代码部分均使用的网页AI（T—T）
最后 祝你也能完成心仪的作品
安秋
二〇二六
七月廿五
文章分享
如果这篇文章对你有帮助，欢迎分享给更多人！