歌词网页动画

type

summary

status

Step1：灵感汲取，信息搜集

引子：【开源】world.execute(me); 以HTML呈现_哔哩哔哩_bilibili
【开源】world.execute(me); 以HTML呈现_哔哩哔哩_bilibili
BGM: world.execute (me) ; - Mili网站DEMO: https://world.execute.umstudio.top/开源地址: https://github.com/UM7lab/world.execute.me.html程序编写：Gemini 2.5 ProClaude Opus 4DeepSeek R1UM湖南, 视频播放量 139448、弹幕量 131、点赞数 19540、投硬币枚数 8112、收藏人数 13647、转发人数 2340, 视频作者羽梦Studio, 作者简介，相关视频：【Eodslv】world.execute(me);（完整版）【同人PV】，玩众生行记之后做了个仿 td 追踪的网站，【古典叙利亚语翻唱】world.execute(me);，【Arcaea自制】 world.execute(me); 观赏谱（伪PV），【windows提示音】world.execute(me);，【贝斯】最大力金刚指的一集《world.execute (me) ;》，【Mili】world.execute(me);，world.execute(me); 但是全Win32控件，【初音ミクV4E】World.execute(me);【Cover】，用Java程序实现『world.execute(me);』

其它参考：

Step2：Learn：

难点

歌曲文件的托管

审美风格：与歌曲主题的一致性，避免过多冗杂的动画效果

Step3：The Nights

thenights1.0.html

21.7 KB

Step4：打包抽离补充工作流

💡

LyricsMV1.0_generatedbygemini

预工作流

喂给LLM代码

分析其中所有用到的动画效果，列出表格，总结效果名称和实现方式，以自然语言的形式输出

进一步分析

动画效果与歌词意思的对应关系，列出表格，以自然语言形式输出

重制something just like this歌词。目的：提取出一份txt文本，包含时间轴和文字，文字部分除了歌词，还包含一些重音节奏和变化，以注释形式。

将歌曲文件云端托管，得到可播放外链

喂歌词给LLM，要求根据2的对应关系，列出表格，设计相应歌词对应的动画效果，以自然语言形式输出

喂歌曲文件链接给LLM，要求按照5的设计给出代码

Gemini实现

换曲，多模态模型无法识别过长的音乐信息，上下文窗口一般支持最多3mim。退而求其次了，多模态无法识别并输出可靠的音频信息，即只有“[时间戳]歌词（注释）”的格式被遵循，内容与实际不符，幻觉严重。改为精校歌词，不含情绪和乐声描述。

杂项归档记录

图书馆快闭馆了，没来得及记录中间。也是，往后推进的优先级肯定比记录要高一些，不能因小失大

结果太牛逼了，好像掌握了一些技巧，当something just like this的歌词弹出，特别是底下的动画同步渲染的丝滑效果时，太爽了，真能成。

下面是阶段成果：需要下载到本地放进同一文件夹，后期可以把音乐文件托管，有链接即可

byGemini3.0.html

16.3 KB

明天试试按同样的步骤优化一下，然后开源，录视频，投稿；后期可以试试做成生成网站，即投稿歌词，生成网页

优化步骤

给出歌词，生成简易动画

给出示例网页源代码，提供动画参考

（待做）丰富动画

音乐文件托管

录视频

开源代码

投稿B站