校对字幕操作

src/views/book/courseware/create/components/question/voice_matrix/CheckSubtitles.vue

@@ -3,8 +3,13 @@
     <div class="dialog-container">
       <div class="lrc">
         <template v-for="(list, i) in dataList">
-          <div v-for="({ content, mark, lrc_data }, j) in list" :key="mark" class="lrc-item">
-            <div class="lrc-mark" @click="selectLrcItem(i, j)">
+          <div
+            v-for="({ content, mark, lrc_data }, j) in list"
+            :key="mark"
+            class="lrc-item"
+            @click="selectLrcItem(i, j, lrc_data.begin_time / 1000)"
+          >
+            <div class="lrc-mark">
               <span :class="[lrcIndex.row === i && lrcIndex.col === j ? 'triangle' : 'lrc-line']"></span>
             </div>
             <div class="lrc-time">
@@ -17,12 +22,20 @@
       </div>
 
       <div class="audio-player">
-        <div class="player-line">
+        <!-- <div class="player-line">
           <div
             class="progress-bar"
             :style="{ width: Math.min((audio.current_time / audio.max_time) * 100, 100) + '%' }"
           ></div>
           <div class="progress-dot"></div>
+        </div> -->
+        <div class="player-line">
+          <el-slider
+            v-model="play_value"
+            :style="{ width: '530px', height: '3px' }"
+            :format-tooltip="formatProcessToolTip"
+            @change="changeCurrentTime"
+          />
         </div>
         <div class="player-controls">
           <div class="timer">
@@ -207,11 +220,13 @@ export default {
         }
       }
     },
-    selectLrcItem(i, j) {
+    selectLrcItem(i, j, time) {
       this.lrcIndex = {
         row: i,
         col: j,
       };
+      this.audio.current_time = time;
+      this.changeCurrentTime((time / this.audio.max_time) * 100);
     },
     playAudio() {
       if (!this.url) return;
@@ -231,6 +246,17 @@ export default {
       }
       audio.paused ? audio.play() : audio.pause();
     },
+    // 点击 拖拽播放音频
+    changeCurrentTime(value) {
+      let audioId = this.audioId;
+      this.$refs[audioId].currentTime = parseInt((value / 100) * this.audio.max_time);
+      this.$refs[audioId].play();
+      this.audio.playing = true;
+    },
+    // 进度条格式化toolTip
+    formatProcessToolTip(index) {
+      return this.audioTimeToMMSS(parseInt((this.audio.max_time / 100) * index));
+    },
     /**
      * 音频元数据加载完成
      */
@@ -308,6 +334,10 @@ export default {
       .lrc-time {
         display: flex;
         align-items: center;
+
+        span {
+          word-break: keep-all;
+        }
       }
 
       .lrc-text {
@@ -330,7 +360,8 @@ export default {
     .player-line {
       width: 100%;
       height: 3px;
-      background-color: #ccc;
+
+      // background-color: #ccc;
 
       .progress-bar {
         position: relative;
@@ -382,5 +413,13 @@ export default {
       text-align: center;
     }
   }
+
+  :deep .el-slider__runway {
+    height: 6px;
+    padding: 0;
+    margin: 0;
+    background: #e5e5e5;
+    border-radius: 0;
+  }
 }
 </style>