英语听读小程序里的两个交互细节：逐词高亮与点句回听

我是 LumaLingo 的开发者。做这个微信小程序时，我希望把原声视频、英文正文、译文和词汇解释放在同一条学习流程里。这篇分享两个实际实现细节，也欢迎同行指出改进空间。

播放进度更新与高亮刷新不必绑成同一个频率

如果只在播放器的进度回调到达时更新高亮，短词的视觉变化可能显得跳跃。当前实现记录最近一次回调的媒体时间和本机时间，在播放期间按播放速率估算中间位置；每次收到新的播放器时间，再重新建立锚点。

核心关系是：估算位置 = 最近的媒体时间 + 两次回调之间经过的时间 × 播放速率。当前页面用 100ms 的定时器更新阅读位置，暂停时不继续推进。估算只服务于显示，后续回调仍以播放器实际报告的时间为准。

这一步不能代替素材的词句时间对齐。时间轴本身错了，再平滑的高亮也只是更平滑地标错位置。拖动、暂停、变速以及切换页面，也都需要检查状态是否重新同步。

点句回听应同时处理播放器和正文状态

句子关联自己的起始时间。点击后先检查时间值存在且有限，再调用播放器 seek 和 play，并立即同步阅读位置。只有跳转播放器而不更新正文，会让用户短暂看到旧高亮；反过来只改高亮，则声音根本没有回到目标句。

页面还涉及用户手动滚动与自动跟随的协调：用户正在阅读别处时，应避免自动滚动反复把他拉回；明确点句回听时，再恢复对应位置的跟随。

这些都是小动作，但学习者遇到一句没听清的话时，会连续使用定位、核对、回听。任何一步别扭，都可能打断练习。

产品说明：LumaLingo 是微信小程序，提供原声视频、双语正文、重点词义音标、调速和生词收藏，有试用及会员内容，不提供口语录音评分。本文属于开发者分享与自荐，文字经 AI 辅助整理，技术描述已对照当前页面实现核查。

下面附小程序码，欢迎试用并反馈具体课程与复现步骤。

本作品采用《CC 协议》，转载必须注明作者和本文链接