博主简介

• 前端开发、思维干货、个人成长、知识社群。
• 前端开发(web/h5/小程序)、知识付费等合作请私信。
• 福利：关注公众号（主页简介和底部信息卡片），回复：“学习礼包”，有我精心整理的100G+的IT学习资料~

前言 

近期接到一个业务需求，录音和文本的双向联动。

双向联动：

拖拽音频，对应播放且（查找）对应滚动到会话列表的句子；

点击句子，会话列表滚动和音频播放器从句子的开始时间播放。 

---

一、核心思路 

实现录音（音频）和文本双向联动的核心思路是建立音频播放进度与文本内容片段的映射关系，通过实时监听音频状态变化同步更新文本高亮，同时支持点击文本片段跳转到对应音频位置，形成双向交互。

二、核心逻辑和知识点

1. 数据结构设计：建立音频与文本的关联映射

• 核心数据：为每个文本片段（句子 / 段落）绑定对应的音频时间区间（start开始时间、 结束时间），形成类似的数据结构如

•  [{ content: "文本1", start: 0, end: 5 }, 
  { content: "文本2", start: 5, end: 10 }] 

• 作用：通过时间区间可快速定位 “当前播放的音频对应哪段文本”，或 “点击的文本对应音频的哪个时间点”。

2. 音频驱动文本：播放时自动高亮对应文本

• 监听音频进度：利用音频 API实时获取当前播放时间（currentTime）。
• 动态匹配文本：根据当前播放时间，遍历文本片段的时间区间，找到 start ≤ currentTime ≤ end 的文本片段，标记为 “激活状态”（如高亮、边框变色）。
• 自动滚动优化：当激活的文本片段不在可视区域时，通过滚动容器的 scrollIntoView 或类似方法，自动将其滚动到视野内。

3. 文本驱动音频：点击文本跳转到对应音频位置

• 点击事件绑定：为每个文本片段绑定点击事件，触发时获取该片段的 startPosition。
• 音频跳转与播放：调用音频 API 的 seek(time) 方法跳转到 startPosition，并根据当前音频状态决定是否播放（若暂停则触发播放，若正在播放则直接跳转后继续播放）。
• 状态同步：跳转后需同步更新音频播放状态（如播放 / 暂停状态标记），避免 UI 与实际状态不一致。

4. 状态管理：确保双向操作的一致性

• 单一数据源：音频的播放状态（播放 / 暂停）、当前时间，以及文本的激活状态，需基于同一套数据更新，避免状态冲突。
• 事件通信：若音频和文本为独立组件，通过父子组件通信（如 Vue 的 $emit/props、React 的回调函数）或全局事件总线，同步时间和状态变化（例如：音频进度变化时通知文本更新激活状态，文本点击时通知音频跳转）。

5. 异常处理与体验优化

• 时间精度问题：音频进度更新可能存在延迟（如每秒更新 4-5 次），需容忍一定时间误差（如 ±0.5 秒），避免文本频繁切换高亮。
• 加载状态处理：音频未加载完成时，禁用文本点击跳转功能，避免 seek 方法失效。
• 重复操作防抖：短时间内连续点击文本或频繁拖动进度条时，通过防抖处理减少 API 调用次数，提升性能。

三、案例示范 

1. 案例准备

1、我使用uni-app实现音频和文本的双向联动。

uni-app官网

2、基本的音频播放器，从插件市场下载（我当时就默认下载第一个了）。

PS：

1、这个插件实现基本的功能，播放-暂停-拖拽播放。如果需要实现其他的业务，需要自行动手实现。

2、本文不演示如何下载和如何详情使用插件，自行搜索。

DCloud 插件市场

 2. index.vue

页面主要是引入音频播放器，展示会话列表以及实现相关功能。

会话列表的数据结构上面有介绍

 重点关注开始时间和结束时间字段（用于双向联动的查找和匹配） 

3. free-audio.vue

在uni-app项目中引入音频播放器组件，案例的双向联动，需要实现相关逻辑。

4. 案例效果

（在未播放的情况下，点击句子，页面实现句子滚动，音频从句子的开始时间进行播放）

（拖拽进度条，实现会话列表的句子进行对应滚动）

四、小结

只要深刻理解双向联动的核心逻辑，实际上并不会很难实现本篇的案例。至少我们是清楚实现方向，至于代码层面，解放双手，让AI实现基本的逻辑，自己加以调试就好了。

代码仓库地址：

https://gitee.com/kaimana/uni-app_AudioAndText.git

PS：

本篇文章的案例效果的代码，基本上AI实现了95%的功能，我主要负责搭建/配置项目和调试代码。

所以就算是对相关的编程技术（如本篇的uni-app）或者相关API（比如录音的start/pause/seek等）不太熟悉也没事，了解基本使用+AI解释分析，可以很好地解决问题。

用其他编程技术/平台如（react、vue、pc、移动端、ios）实现案例效果也是大差不差的，核心思路和逻辑是一样的，不同就是对应的技术和知识点使用。