返回制作说明
制作说明 / Field Radio/2026 · 10 · 12/5 分钟阅读

场域电台如何听见一首歌

说明播放器状态、歌词时间、曲目封面和音乐响应场景怎样保持同步,以及暂停和切歌时画面如何落回稳定状态。

AudioLyricsMotionAccessibility

01

一份播放状态,多个界面

悬浮播放器、电台页和纯净模式都围绕同一首曲目工作。播放器负责实际音频与当前时间,再向页面发布曲目、播放状态、进度、音量和播放方式;页面上的控制通过同一套命令回到播放器。这样切换视图不会各自启动一首歌,也不会让暂停按钮与声音状态分离。

封面与标题来自曲目数据,列表、当前曲目卡片和纯净模式沿用同一来源。缺少封面时使用明确的占位图,缺少歌词时显示说明;这些空状态也属于完整播放体验。

02

歌词跟随时间,不跟随动画猜测

歌词文件解析为带时间戳的行,当前播放秒数决定激活哪一句。悬浮歌词和纯净模式都使用这个时间关系,自动滚动只负责让当前句进入合适位置。点击可跳转的歌词行时,操作交给播放器更新实际进度,再由时间状态驱动新的高亮。

03

画面的音量可以调低

音频信号可以影响球体与方格,但视觉层并不直接决定播放。雨滴生成频率与方格涟漪的传播速度分开设置,暂停时停止新增触发并让已有位移回落。切歌时保留场景底色和网格,代表色再平滑过渡到下一首,避免内容交接处出现一帧黑屏。

日间和夜间沿用网站主题,减少动态效果偏好则让必要的信息在静止状态下仍可读取。视觉场景可以变得安静,歌曲、歌词与控制仍然在场。