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