课文语音练习对比功能

src/views/book/courseware/preview/components/article/Practicechs.vue

@@ -570,23 +570,23 @@
                   @sentPause="sentPause"
                   @handleWav="handleWav"
                 />
-                <!-- <div v-if="curQue.mp3_list && curQue.mp3_list.length > 0" class="compare-box">
-                <Audio-compare
-                  :theme-color="themeColor"
-                  :index="index"
-                  :sent-index="sentIndex"
-                  :url="curQue.mp3_list[0].id"
-                  :bg="curQue.wordTime[index].bg"
-                  :ed="curQue.wordTime[index].ed"
-                  :wavblob="wavblob"
-                  :get-cur-time="getCurTime"
-                  :sent-pause="sentPause"
-                  :is-record="isRecord"
-                  :handle-change-stop-audio="handleChangeStopAudio"
-                  :get-play-status="getPlayStatus"
-                  :attrib="attrib"
-                />
-              </div> -->
+                <div v-if="curQue.mp3_list && curQue.mp3_list.length > 0" class="compare-box">
+                  <Audio-compare
+                    :theme-color="themeColor"
+                    :index="index"
+                    :sent-index="sentIndex"
+                    :url="curQue.mp3_list[0].url"
+                    :bg="curQue.wordTime[index].bg"
+                    :ed="curQue.wordTime[index].ed"
+                    :wavblob="wavblob"
+                    :get-cur-time="getCurTime"
+                    :sent-pause="sentPause"
+                    :is-record="isRecord"
+                    :handle-change-stop-audio="handleChangeStopAudio"
+                    :get-play-status="getPlayStatus"
+                    :attrib="attrib"
+                  />
+                </div>
               </div>
               <span class="full-screen-icon" @click="fullScreen">
                 <svg-icon

src/views/book/courseware/preview/components/article/components/AudioCompare.vue

@@ -106,8 +106,8 @@ export default {
 
 .compare-disable {
   display: block;
-  width: 24px;
-  height: 24px;
+  width: 20px;
+  height: 20px;
   margin-left: 8px;
 
   &-big {

src/views/book/courseware/preview/components/article/components/AudioRed.vue

@@ -1,28 +1,57 @@
 <!--  -->
 <template>
   <div v-if="mp3" class="content-voices" @click="handlePlayVoice">
-    <img
-      :src="voiceSrc"
-      :class="type == 'full' ? 'icon-big' : ''"
-      class="icon-mask"
-      :style="{
-        backgroundColor: themeColor,
-        maskImage: `url(${voiceSrc})`,
-      }"
-    />
+    <template v-if="isCompare">
+      <div
+        class="icon-mask icon-compare-play"
+        :style="{
+          backgroundColor: attrib?.topic_color,
+        }"
+        :class="type == 'full' ? 'icon-big' : ''"
+        v-if="isPlaying"
+      ></div>
+      <div
+        class="icon-mask icon-compare-pause"
+        :style="{
+          backgroundColor: attrib?.topic_color,
+        }"
+        :class="type == 'full' ? 'icon-big' : ''"
+        v-else
+      ></div>
+    </template>
+    <template v-else>
+      <div
+        class="icon-mask icon-normal-play"
+        :style="{
+          backgroundColor: attrib?.topic_color,
+        }"
+        :class="type == 'full' ? 'icon-big' : ''"
+        v-if="isPlaying"
+      ></div>
+      <div
+        class="icon-mask icon-normal-pause"
+        :style="{
+          backgroundColor: attrib?.topic_color,
+        }"
+        :class="type == 'full' ? 'icon-big' : ''"
+        v-else
+      ></div>
+    </template>
+    <!-- <img :src="voiceSrc" :class="type == 'full' ? 'icon-big' : ''" class="icon-mask" :style="maskStyle" /> -->
   </div>
 </template>
 
 <script>
 export default {
   components: {},
-  props: ['seconds', 'mp3', 'wav', 'themeColor', 'isCompare', 'type', 'bg', 'ed'],
+  props: ['seconds', 'mp3', 'wav', 'themeColor', 'isCompare', 'type', 'bg', 'ed', 'attrib'],
   data() {
     return {
       audio: new Audio(),
       voiceSrc: '',
       voicePauseSrc: require('@/assets/play-red.png'),
       voicePlaySrc: require('@/assets/icon-voice-play-red.png'),
+      isPlaying: false,
     };
   },
   computed: {
@@ -32,6 +61,10 @@ export default {
     comparePlaySrc() {
       return require('@/assets/icon/pauseC-24-normal-red.png');
     },
+    // 通过 mask 把图标着成指定颜色
+    maskStyle() {
+      return {};
+    },
   },
   watch: {},
   // 生命周期 - 创建完成（可以访问当前this实例）
@@ -59,15 +92,18 @@ export default {
     _this.audio.addEventListener('play', function () {
       _this.voiceSrc = _this.isCompare ? _this.comparePlaySrc : _this.voicePlaySrc;
       _this.$emit('getPlayStatus', true);
+      _this.isPlaying = true;
     });
     _this.audio.addEventListener('pause', function () {
       _this.voiceSrc = _this.isCompare ? _this.comparePauseSrc : _this.voicePauseSrc;
       _this.$emit('getPlayStatus', false);
+      _this.isPlaying = false;
     });
     _this.audio.addEventListener('ended', function () {
       _this.voiceSrc = _this.isCompare ? _this.comparePauseSrc : _this.voicePauseSrc;
       _this.$emit('sentPause', false);
       _this.$emit('getPlayStatus', false);
+      _this.isPlaying = false;
     });
     _this.audio.addEventListener('timeupdate', function () {
       if (_this.ed) {
@@ -131,15 +167,32 @@ export default {
     }
   }
 
-  img {
+  img,
+  .icon-mask {
     float: left;
-    width: 16px;
-    height: 16px;
+    width: 20px;
+    height: 20px;
   }
 
   .icon-big {
     width: 24px;
     height: 24px;
   }
+
+  .icon-compare-play {
+    mask-image: url('@/assets/icon/pauseC-24-normal-red.png');
+  }
+
+  .icon-compare-pause {
+    mask-image: url('@/assets/compare-pause-red-24.png');
+  }
+
+  .icon-normal-play {
+    mask-image: url('@/assets/icon-voice-play-red.png');
+  }
+
+  .icon-normal-pause {
+    mask-image: url('@/assets/play-red.png');
+  }
 }
 </style>

src/views/book/courseware/preview/components/article/components/FreewriteLettle.vue

@@ -89,10 +89,10 @@ export default {
       penIndex: 0,
       hanzicolor: '',
       hanziweight: '',
-      thinpen: require('../../../../assets/common/thin-pen.png'), // 细笔
-      thinpenActive: require('../../../../assets/common/thin-pen-active.png'),
-      thickpen: require('../../../../assets/common/thick-pen.png'),
-      thickpenActive: require('../../../../assets/common/thick-pen-active.png'),
+      thinpen: require('@/assets/thin-pen.png'), // 细笔
+      thinpenActive: require('@/assets/thin-pen-active.png'),
+      thickpen: require('@/assets/thick-pen.png'),
+      thickpenActive: require('@/assets/thick-pen-active.png'),
       collectFlag: false, // 是否收藏
       imgarr: [],
       imgOrCans: false,

src/views/book/courseware/preview/components/dialogue_article/Practicechs.vue

@@ -659,23 +659,23 @@
                   @sentPause="sentPause"
                   @handleWav="handleWav"
                 />
-                <!-- <div v-if="curQue.mp3_list && curQue.mp3_list.length > 0" class="compare-box">
-                <Audio-compare
-                  :theme-color="attrib ? attrib.topic_color : '#e35454'"
-                  :index="index"
-                  :sent-index="sentIndex"
-                  :url="curQue.mp3_list[0].id"
-                  :bg="curQue.wordTime[index].bg"
-                  :ed="curQue.wordTime[index].ed"
-                  :wavblob="wavblob"
-                  :get-cur-time="getCurTime"
-                  :sent-pause="sentPause"
-                  :is-record="isRecord"
-                  :handle-change-stop-audio="handleChangeStopAudio"
-                  :get-play-status="getPlayStatus"
-                  :attrib="attrib"
-                />
-              </div> -->
+                <div v-if="curQue.mp3_list && curQue.mp3_list.length > 0" class="compare-box">
+                  <Audio-compare
+                    :theme-color="attrib ? attrib.topic_color : '#e35454'"
+                    :index="index"
+                    :sent-index="sentIndex"
+                    :url="curQue.mp3_list[0].url"
+                    :bg="curQue.wordTime[index].bg"
+                    :ed="curQue.wordTime[index].ed"
+                    :wavblob="wavblob"
+                    :get-cur-time="getCurTime"
+                    :sent-pause="sentPause"
+                    :is-record="isRecord"
+                    :handle-change-stop-audio="handleChangeStopAudio"
+                    :get-play-status="getPlayStatus"
+                    :attrib="attrib"
+                  />
+                </div>
               </div>
               <span class="full-screen-icon" @click="fullScreen">
                 <svg-icon