聊天语音转写的文字记录显示框内，聊天语句随聊天音频播放而滚动，定位并高亮显示

大波起司

于 2021-05-28 10:36:00 发布

阅读量868

点赞数 1

分类专栏：个人问题记载文章标签： vue javascript css 语音识别

本文链接：https://blog.csdn.net/ma_luping/article/details/117353912

版权

1、具体实现如下图：

2、实现功能：

对话框内的当前播放语句随音频播放而自动滑动到顶部位置；
亦可前进或后退音频时，对话框定位到音频此时播放语句；
可以在播放的时候上下滚动对话框，一定的时间内不操作又再次定位到音频正播放的位置；
css区分已播放和未播放的语句，暂停播放音频后，自动滑动停止；

3、代码：

HTML

<div class="IM_box">
          <div class="IM_header">转写记录</div>
          <div class="IM_content" id="IM_content">
            <div :key="item.ownId" v-for="item in conversationList">
              <div class="left_person" v-if="item.roleType == 2">
                <img
                  src="@/assets/images/touxiang_moren.png"
                  class="head_potraite"
                />
                <div style="width: 100%" :id="item.idSelector">
                  <p class="time">{
  { getTime(item.beginTime) }}</p>
                  <div
                    class="text_info"
                    :style="{
                      background: item.isPlayed ? '#bab0b0' : '',
                      color: item.isPlayed ? 'white' : '',
                    }"