用 WordPress 古腾堡区块做一张会动的歌词海报

问题

写博客推歌的时候，歌词怎么处理？

纯文字最省事，但太素了。手写稿、歌词海报拍一张放上去，质感好，但它是死的——读者只能盯着一张静态图看。

网易云的外链播放器有歌词滚动，但它不能放自己录的 live，歌词也只能是纯文本。

我想保留手写稿的质感，又想有逐句高亮的动态体验。

写了一个 WordPress 古腾堡区块插件：Synced Lyric Image。

核心思路很简单：

很多方案会把图片切成 N 张小图，按时间换 src。这样每张图都要单独加载，而且手写稿切开后边缘处理很麻烦。

这里用 CSS background-position 裁切显示区域，原图保持完整。一行歌词就是一个 div，背景是整张图，通过 background-position-y 定位到对应行。切换时只是改一个 CSS 属性，没有额外的 HTTP 请求。

手写稿拍照时，每行左右的空白不固定。如果按整张图宽度显示，歌词会飘在很宽的区域里，不好看。

用 Canvas 扫描每行的像素，找到左右第一个非白点，自动 trim。如果某行右边有签名之类的干扰墨迹，可以在配置里手动填左右边界。

手写稿一般是白纸黑字，直接贴到博客里白底会很突兀。

侧边栏加一个开关：开启后给图片加 mix-blend-mode: multiply。白色背景会和页面背景融合，只剩墨迹。适合浅色主题。如果是深色主题，建议把白色抠掉存成透明 PNG，效果最好。

歌词时间从网易云/QQ 音乐的 LRC 文件里拿，格式是 [mm:ss.xx]。把这个时间映射到行带编号就行。

支持一句歌词跨多行（比如 [03:09.78] 8-9 表示同时显示第 8、9 行）。

最终效果：音频播放时，当前句淡入（轻微上浮 + 去模糊），唱完淡出。长间奏时所有行淡出，显示淡淡的「· · ·」。

不用切图、不用修图（白底一键融合）、时间轴直接从 LRC 复制。

博客里的《誓言 – 窦靖童》和《落雁 – 宋冬野》两篇文章用了这个插件，可以点开看看实际效果。