对话文章句子播放

src/components/Adult/preview/ArticleViewChs/PhraseModelChs.vue

@@ -8,6 +8,7 @@
       "
     >
       <AudioLine
+        audioId="artPhraseAudio"
         :mp3="curQue.mp3_list[0].url"
         :getCurTime="getCurTime"
         ref="audioLine"

src/components/Adult/preview/ArticleViewChs/Practicechs.vue

@@ -616,6 +616,9 @@ export default {
   }
   .Soundrecord-content {
     margin-top: 8px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
   }
   .luyin-box {
     width: 280px;
@@ -626,6 +629,7 @@ export default {
     box-sizing: border-box;
     border-radius: 8px;
     height: auto;
+    margin-right: 16px;
   }
 }
 </style>

src/components/Adult/preview/ArticleViewChs/WordModelChs.vue

@@ -8,6 +8,7 @@
       "
     >
       <AudioLine
+        audioId="artWordAudio"
         :mp3="curQue.mp3_list[0].url"
         :getCurTime="getCurTime"
         ref="audioLine"

src/components/Adult/preview/AudioLine.vue

@@ -13,11 +13,14 @@
           :format-tooltip="formatProcessToolTip"
           @change="changeCurrentTime"
         />
-        <span><template v-if="audio.playing">-</template>{{
-          audio.maxTime
-            ? realFormatSecond(audio.maxTime - audio.currentTime)
-            : ""
-        }}</span>
+        <span
+          ><template v-if="audio.playing">-</template
+          >{{
+            audio.maxTime
+              ? realFormatSecond(audio.maxTime - audio.currentTime)
+              : ""
+          }}</span
+        >
       </template>
       <audio
         ref="audio"
@@ -26,10 +29,10 @@
         @timeupdate="onTimeupdate"
       />
     </div>
-    <div class="audioLine" v-else>
+    <div class="audioLine2" v-else>
       <div
-        class="play"
-        :class="audio.playing ? 'playBtn' : 'pauseBtn'"
+        class="play-icon"
+        :class="audio.playing ? 'playBtn-icon' : 'pauseBtn-icon'"
         @click="PlayAudio"
       />
     </div>
@@ -148,7 +151,11 @@ export default {
       let audioId = this.audioId;
       let audio = document.getElementsByTagName("audio");
       audio.forEach((item) => {
-        if (item.id !== audioId) {
+        if (item.src == this.mp3) {
+          if (item.id !== audioId) {
+            item.pause();
+          }
+        } else {
           item.pause();
         }
       });
@@ -293,6 +300,7 @@ export default {
       //   background-size: 100% 100%;
       // }
     }
+
     span {
       font-size: 16px;
       line-height: 19px;
@@ -303,6 +311,55 @@ export default {
       text-align: right;
     }
   }
+  > .audioLine2 {
+    .play-icon {
+      width: 16px;
+      height: 16px;
+      cursor: pointer;
+      &.playBtn-icon {
+        background: url("../../../assets/NPC/icon-voice-play-red.png") no-repeat
+          left top;
+        background-size: 100% 100%;
+      }
+      &.pauseBtn-icon {
+        background: url("../../../assets/NPC/play-red.png") no-repeat left top;
+        background-size: 100% 100%;
+      }
+    }
+  }
+}
+.NPC-Big-Book-preview-green {
+  .playBtn-icon {
+    background: url("../../../assets/NPC/icon-voice-play-green.png") no-repeat
+      left top;
+    background-size: 100% 100%;
+  }
+  .pauseBtn-icon {
+    background: url("../../../assets/NPC/play-green.png") no-repeat left top;
+    background-size: 100% 100%;
+  }
+}
+.NPC-Big-Book-preview-red {
+  .playBtn-icon {
+    background: url("../../../assets/NPC/icon-voice-play-red.png") no-repeat
+      left top;
+    background-size: 100% 100%;
+  }
+  .pauseBtn-icon {
+    background: url("../../../assets/NPC/play-red.png") no-repeat left top;
+    background-size: 100% 100%;
+  }
+}
+.NPC-Big-Book-preview-brown {
+  .playBtn-icon {
+    background: url("../../../assets/NPC/icon-voice-play-brown.png") no-repeat
+      left top;
+    background-size: 100% 100%;
+  }
+  .pauseBtn-icon {
+    background: url("../../../assets/NPC/play-brown.png") no-repeat left top;
+    background-size: 100% 100%;
+  }
 }
 </style>
 <style lang="scss">

src/components/Adult/preview/DialogueArticleViewChs/NormalModelChs.vue

@@ -8,6 +8,7 @@
       "
     >
       <AudioLine
+        audioId="diaNormalAudio"
         :mp3="curQue.mp3_list[0].id"
         :getCurTime="getCurTime"
         ref="audioLine"

src/components/Adult/preview/DialogueArticleViewChs/PhraseModelChs.vue

@@ -8,6 +8,7 @@
       "
     >
       <AudioLine
+      audioId="diaPhraAudio"
         :mp3="curQue.mp3_list[0].url"
         :getCurTime="getCurTime"
         ref="audioLine"

src/components/Adult/preview/DialogueArticleViewChs/Practicechs.vue

@@ -9,6 +9,7 @@
     >
       <div class="aduioLine-content">
         <AudioLine
+          audioId="diaPraAudio"
           :mp3="curQue.mp3_list[0].url"
           :getCurTime="getCurTime"
           ref="audioLine"
@@ -324,6 +325,20 @@
               class="luyin-box"
               @handleParentPlay="handleParentPlay"
             />
+            <div>
+              <AudioLine
+                :mp3="curQue.mp3_list[0].url"
+                :getCurTime="getCurTime"
+                :ref="'audioLine' + index"
+                :audioId="'artPraAudioId' + index"
+                :stopAudio="stopAudio"
+                :width="555"
+                :hideSlider="true"
+                :bg="curQue.wordTime[index].bg"
+                :ed="curQue.wordTime[index].ed"
+                @handleChangeStopAudio="handleChangeStopAudio"
+              />
+            </div>
           </div>
         </div>
       </div>
@@ -794,12 +809,16 @@ export default {
   }
   .Soundrecord-content {
     padding: 0px 0px 8px 60px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
     .luyin-box {
       width: 280px;
       padding: 8px 12px;
       border: 1px solid rgba(0, 0, 0, 0.1);
       border-radius: 8px;
       background: #ffffff;
+      margin-right: 16px;
     }
   }
 }

src/components/Adult/preview/DialogueArticleViewChs/WordModelChs.vue

@@ -8,6 +8,7 @@
       "
     >
       <AudioLine
+        audioId="diaWordAudio"
         :mp3="curQue.mp3_list[0].url"
         :getCurTime="getCurTime"
         ref="audioLine"