改变语音矩阵全屏循环逻辑

src/components/Adult/preview/VoiceMatrixFullscreen.vue

@@ -86,7 +86,8 @@
           <template v-if="mp3">
             <voice-matrix-fullscreen-audio
               ref="audioLine"
-              audio-id="voiceMatrixAudio"
+              audio-id="voiceMatrixFullscreenAudio"
+              :is-repeat="isRepeat"
               :bg-index="bgIndex"
               :mp3="mp3"
               :get-cur-time="getCurTime"
@@ -99,15 +100,13 @@
           </template>
           <div
             :class="['op-btn', bgIndex === 1 ? 'op-btn-green' : '']"
-            @click="setStatus"
+            @click="changeLoopState"
           >
             <span
               :class="[
                 'repeat-icon',
-                !isRepeat && !isAuto ? 'disabled' : '',
-                isRepeat && !isAuto ? 'auto-icon' : '',
-                !isRepeat && bgIndex === 1 ? 'repeat-icon-yellow' : '',
-                isRepeat && !isAuto && bgIndex === 1 ? 'auto-icon-yellow' : ''
+                !isRepeat ? 'disabled' : 'auto-icon',
+                isRepeat && bgIndex === 1 ? 'auto-icon-yellow' : ''
               ]"
             />
           </div>
@@ -283,22 +282,56 @@
                   v-for="({ chs, pinyin }, w) in column.sentence_data.wordsList"
                 >
                   <span
-                    :key="`${column.sentence_data.pyPosition === 'top' ? 'pinyin' : 'chs'}-${w}`"
-                    :style="{visibility: column.sentence_data.pyPosition === 'top' && isShowPY ? 'visible' : 'hidden'}"
-                    :class="column.sentence_data.pyPosition === 'top' ? 'pinyin' : 'chs'"
+                    :key="
+                      `${
+                        column.sentence_data.pyPosition === 'top'
+                          ? 'pinyin'
+                          : 'chs'
+                      }-${w}`
+                    "
+                    :style="{
+                      visibility:
+                        column.sentence_data.pyPosition === 'top' && isShowPY
+                          ? 'visible'
+                          : 'hidden'
+                    }"
+                    :class="
+                      column.sentence_data.pyPosition === 'top'
+                        ? 'pinyin'
+                        : 'chs'
+                    "
                   >
-                    {{ column.sentence_data.pyPosition === 'top' ? pinyin : chs }}
+                    {{
+                      column.sentence_data.pyPosition === "top" ? pinyin : chs
+                    }}
                   </span>
                 </template>
                 <template
                   v-for="({ chs, pinyin }, w) in column.sentence_data.wordsList"
                 >
                   <span
-                    :key="`${column.sentence_data.pyPosition === 'top' ? 'chs' : 'pinyin'}-${w}`"
-                    :style="{visibility: column.sentence_data.pyPosition !== 'top' && isShowPY ? 'hidden' : 'visible'}"
-                    :class="column.sentence_data.pyPosition === 'top' ? 'chs' : 'pinyin'"
+                    :key="
+                      `${
+                        column.sentence_data.pyPosition === 'top'
+                          ? 'chs'
+                          : 'pinyin'
+                      }-${w}`
+                    "
+                    :style="{
+                      visibility:
+                        column.sentence_data.pyPosition !== 'top' && isShowPY
+                          ? 'hidden'
+                          : 'visible'
+                    }"
+                    :class="
+                      column.sentence_data.pyPosition === 'top'
+                        ? 'chs'
+                        : 'pinyin'
+                    "
                   >
-                    {{ column.sentence_data.pyPosition === 'top' ? chs : pinyin }}
+                    {{
+                      column.sentence_data.pyPosition === "top" ? chs : pinyin
+                    }}
                   </span>
                 </template>
               </div>
@@ -325,12 +358,13 @@
                 @click="matrixCellClick(i, j)"
               >
                 <div class="inside-wrapper">
-                  <div
-                    class="pinyin"
-                  >
+                  <div class="pinyin">
                     {{ column.pinyin_english_data.pinyin }}
                   </div>
-                  <div class="english" :style="{visibility: isShowEN ? 'visible' : 'hidden'}">
+                  <div
+                    class="english"
+                    :style="{ visibility: isShowEN ? 'visible' : 'hidden' }"
+                  >
                     {{ column.pinyin_english_data.english }}
                   </div>
                 </div>
@@ -454,8 +488,6 @@ export default {
       isShow: false,
       curWordTime: 0,
       playing: false,
-      isAuto: false,
-      autoCount: 0,
       key: "isRepeat",
       isKeyboard: true,
       isTopShow: false,
@@ -662,6 +694,7 @@ export default {
     },
 
     playAudio() {
+      console.log(this.hasSelectedCell);
       if (!this.hasSelectedCell) return;
       if (this.playing) return this.handleParentPlay();
       if (this.lrcArray.length > 0) return this.$refs.audioLine.PlayAudio();
@@ -716,16 +749,6 @@ export default {
             if (this.isRepeat) {
               return this.lrcPlay(this.lrcArray[0], 0);
             }
-            // 单次循环
-            if (this.isAuto && this.autoCount === 1) {
-              this.autoCount = 0;
-              this.lrcArray = [];
-              return;
-            }
-            if (this.isAuto && this.autoCount === 0) {
-              this.autoCount += 1;
-              return this.lrcPlay(this.lrcArray[0], 0);
-            }
 
             this.lrcArray = [];
           }
@@ -816,6 +839,9 @@ export default {
             this.$refs.audioLine.onTimeupdateTime(end);
             this.unWatch();
             this.unWatch = null;
+            if (this.isRepeat) {
+              this.handleChangeTime({ begin_time, end_time });
+            }
           }
         });
       });
@@ -905,24 +931,8 @@ export default {
     changeStatus(key) {
       this[key] = !this[key];
     },
-    setStatus() {
-      if (this.key === "isRepeat") {
-        if (this.isRepeat) {
-          this.isRepeat = false;
-          this.isAuto = true;
-          this.autoCount = 0;
-          this.key = "isAuto";
-        } else {
-          this.isRepeat = true;
-          this.key = "isRepeat";
-        }
-      } else if (this.key === "isAuto") {
-        if (this.isAuto) {
-          this.isRepeat = false;
-          this.isAuto = false;
-          this.key = "isRepeat";
-        }
-      }
+    changeLoopState() {
+      this.isRepeat = !this.isRepeat;
     },
     getRerordStatus(bool) {
       this.isShowCompare = bool;
@@ -1295,7 +1305,7 @@ $dark-color-play: #fff2c6;
       left top;
     background-size: 100% 100%;
     &.disabled {
-      background: url("../../../assets/icon/Repeat-24-disable-Black.png")
+      background: url("../../../assets/icon/auto-24-disable-black.png")
         no-repeat left top;
       background-size: 100% 100%;
     }

src/components/Adult/preview/VoiceMatrixFullscreenAudio.vue

@@ -7,7 +7,7 @@
       <div
         class="play"
         :class="[
-          audio.loading ? 'loadBtn' : audio.playing ? 'playBtn' : 'pauseBtn',
+          audio.loading ? 'loadBtn' : audio.playing ? 'playBtn' : 'pauseBtn'
         ]"
       />
     </div>
@@ -39,7 +39,7 @@ export default {
     "bg",
     "audioId",
     "type",
-    "hasSelectedCell",
+    "hasSelectedCell"
   ],
   data() {
     // 这里存放数据
@@ -53,13 +53,13 @@ export default {
         // 音频最大播放时长
         maxTime: 0,
         isPlaying: false,
-        loading: false,
+        loading: false
       },
       audioAllTime: null, // 展示总时间
       duioCurrentTime: null, // 剩余时间
       count: 0,
       loading: null,
-      isClick: false,
+      isClick: false
     };
   },
   // 计算属性 类似于data概念
@@ -72,7 +72,7 @@ export default {
         width = 662;
       }
       return width;
-    },
+    }
   },
   // 监控data中数据变化
   watch: {
@@ -87,8 +87,8 @@ export default {
     "audio.playing": {
       handler(val) {
         this.$emit("playChange", val);
-      },
-    },
+      }
+    }
   },
   mounted() {
     let audioId = this.audioId;
@@ -110,6 +110,10 @@ export default {
       this.audio.isPlaying = false;
       this.$emit("handleListenRead", false);
       this.isClick = false;
+      if (this.isRepeat && !this.hasSelectedCell) {
+        this.onTimeupdateTime(0);
+        this.PlayAudio();
+      }
     });
 
     this.$nextTick(() => {
@@ -130,9 +134,8 @@ export default {
 
     PlayAudio() {
       let audioId = this.audioId;
-      let audio = document.getElementsByTagName("audio");
-      audio.forEach(item => {
-        if (item.src == this.mp3) {
+      document.getElementsByTagName("audio").forEach(item => {
+        if (item.src === this.mp3) {
           if (item.id !== audioId) {
             item.pause();
           }
@@ -140,8 +143,7 @@ export default {
           item.pause();
         }
       });
-      let video = document.getElementsByTagName("video");
-      video.forEach(vItem => {
+      document.getElementsByTagName("video").forEach(vItem => {
         vItem.pause();
       });
 
@@ -151,9 +153,9 @@ export default {
         this.$emit("handleListenRead", false);
         this.isClick = false;
       } else {
-        if (this.count == 0) {
+        if (this.count === 0) {
           this.audio.loading = true;
-          this.count++;
+          this.count += 1;
         }
         if (this.hideSlider) {
           this.$refs[audioId].play();
@@ -261,7 +263,7 @@ export default {
         // result = "00:" + result;
       }
       return result;
-    },
+    }
   }
 };
 </script>