弦歌四载 · 乐府部四周年线上展览

这个项目是什么

乐府部是我 2021 年在交大国学社建立的部门，研究古风歌曲。它的定位挺有意思——文韵部写诗，戏曲部唱戏，乐府部架在两者中间，也架在文本模态和音乐、视觉模态之间。

四周年的时候，我想找一种能真正传达乐府部在做什么的方式来呈现这四年的产出。推文只能承载文字，视频只能承载画面和声音，只有交互式的网页能让人同时读到词、听到曲、看到画——全模态融合。这就是这个展览站的起点。

我做了什么

站点是一个单 HTML 文件的 React 应用，CDN 加载 React + Framer Motion + Tailwind CSS，没有任何构建工具。

核心功能包括：一个支持 LRC 歌词同步的音乐播放器，实时高亮当前行、带进度条和时间轴；每首歌配一段创作故事卡，和创作者一起整理内容，叙事 tone 由我统一把控；一条 2021—2025 的时间线，串起乐府部 14 个重要节点；以及社员感想的 UGC 轮播。

四年六首歌——这就是乐府部全部的作品。听起来不多，但写歌比写诗复杂得多，编曲、录音、混音、歌词和旋律的适配，每个环节都需要专业能力，活跃成员也少。每一首都是实打实磨出来的。

过程中的思考

单文件架构的选择不只是为了开发快。生日会当天，整个站是打包下载到现场设备、本地播放的——彻底绕开网络不稳定和媒体加载失败的风险，保证舞台效果。事后证明这个决策很关键：当天预定的场地因为行政流程上的错误没能生效，大家都有点急哭了，我们临时换了场地、安顿下来、重新进入状态。场地在变，但至少技术不会给你添乱。所幸后面的呈现零失误。

开发上，所有上下文都在一个页面里，当时的 AI agent 刚好能 handle 这个量级的代码。排期很赶，没来得及给每首曲子做视频，只做了垫图——如果有时间，每首歌配一段视频是理想形态。

这个 approach 后来又被验证了一次：用同样的方式给国学社做了星级社团答辩 slides，半小时完成交付，蝉联五星社团头衔。单页面 React 作为演示类项目的技术方案，快、稳、够用。

Q&A

Q: 为什么不用 PPT？

PPT 播不了同步歌词，做不了流畅的动画过渡，也没办法把音乐播放器、创作故事、时间线这些东西自然地融在一起。乐府部做的事本身就是跨模态的，呈现方式也应该是。当天大家的反应是「居然不是 PPT」——大概是对全模态融合最朴素的认可了。

Q: 单 HTML 文件不会维护困难吗？

对于展览类项目，维护不是核心矛盾——它的生命周期就是从开发到生日会当天，之后变成存档。单文件反而有一个隐藏优势：直接下载到本地设备就能离线运行，不需要构建，不需要服务端。临时换场地、网络环境不确定的时候，这个特性救了场。

Q: 四年只有六首歌，会不会太少了？

写一首古风歌曲的工作量远超一首诗——从作词到编曲到录音混音，每个环节都要有人能接。乐府部一直是一个小而美的部门，不温不火但有意思。六首歌不是产出少，是每一首都认真做出来的。展览里每首歌都配了创作故事，讲的就是这些歌怎么一首一首磨出来的。

Q: 这个展览改变了你对什么事情的看法？

让我更确信一件事：技术方案应该从呈现场景倒推，不是从工程最佳实践出发。单文件、CDN、不打包——这些在正经项目里都是反模式，但对于一个要在现场设备离线播放的展览来说，它们恰恰是最优解。后来做星级社团答辩 slides 也沿用了这套方案，半小时交付，效果很好。好的技术选择不是最先进的，是最贴合场景的。