生词预览

src/views/book/courseware/create/components/question/new_word/NewWord.vue

@@ -185,7 +185,7 @@ export default {
         this.data.lrc_data = {
           name,
           url,
-          id: `[FID##${file_id}##FID]`,
+          id: file_id,
           file_id,
         };
         this.parseLrcFile();
@@ -198,7 +198,7 @@ export default {
           name,
           media_duration,
           temporary_url,
-          url: `[FID##${file_id}##FID]`,
+          url: file_id,
           file_id,
         };
       }
@@ -235,7 +235,7 @@ export default {
     // 自动生成音频
     handleMatic(index) {
       GetStaticResources('tool-TextToVoiceFile', {
-        text: this.data.content.replace(/<[^>]+>/g, ''),
+        text: this.data.option[index].new_word.replace(/<[^>]+>/g, ''),
       })
         .then(({ status, file_id }) => {
           if (status === 1) {

src/views/book/courseware/create/components/question/other_word/OtherWord.vue

@@ -190,7 +190,7 @@ export default {
         this.data.lrc_data = {
           name,
           url,
-          id: `[FID##${file_id}##FID]`,
+          id: file_id,
           file_id,
         };
         this.parseLrcFile();
@@ -203,7 +203,7 @@ export default {
           name,
           media_duration,
           temporary_url,
-          url: `[FID##${file_id}##FID]`,
+          url: file_id,
           file_id,
         };
       }

src/views/book/courseware/preview/components/new_word/NewWordPreview.vue

@@ -17,25 +17,17 @@
         </div>
         <el-collapse-transition>
           <div class="NPC-word-list" v-if="data.option && data.option.length > 0" v-show="wordShow">
-            <!-- <div
-          class="aduioLine-box"
-          v-if="
-            curQue.mp3_list &&
-              curQue.mp3_list.length > 0 &&
-              curQue.mp3_list[0].id
-          "
-        >
-          <AudioLine
-            :audioId="'SelectYinjieAudio' + indexStr"
-            :mp3="curQue.mp3_list[0].id"
-            :getCurTime="getCurTime"
-            :themeColor="themeColor"
-            :ed="ed"
-            type="audioLine"
-            ref="audioLine"
-            @handleListenRead="handleListenRead"
-          />
-        </div> -->
+            <div class="aduioLine-box" v-if="data.audio_data.file_id">
+              <AudioLine
+                :audioId="'newWordAudio' + indexStr"
+                :mp3="data.audio_data.url"
+                :getCurTime="getCurTime"
+                :ed="ed"
+                type="audioLine"
+                ref="audioLine"
+                @handleListenRead="handleListenRead"
+              />
+            </div>
             <ul class="NPC-word-table" cellspacing="0" border="0" cellpadding="0">
               <li class="NPC-word-tr" v-for="(item, index) in data.option_list" :key="'curQue.option' + index">
                 <div
@@ -53,12 +45,12 @@
                       @click="handleChangeTime(sItem.bg, sItem.ed)"
                     ></a>
                   </template>
-                  <template v-else-if="sItem.mp3_list && sItem.mp3_list.length > 0 && sItem.mp3_list[0].id">
+                  <template v-else-if="sItem.mp3_list">
                     <span
-                      :class="['NPC-play-btn-brown', playClass && mp3_index == sItem.sIndex ? 'active' : '']"
-                      @click="palyAudio(sItem.sIndex)"
+                      :class="['play-btn', playClass && mp3_index === sItem.sIndex ? 'active' : '']"
+                      @click="palyAudio(sItem.mp3_list_url, sItem.sIndex)"
                     ></span>
-                    <audio :id="'word' + indexStr + sItem.sIndex" :src="sItem.mp3_list[0].id"></audio>
+                    <audio :id="'word' + indexStr + sItem.sIndex" :src="sItem.mp3_list_url"></audio>
                   </template>
 
                   <template v-else>
@@ -170,12 +162,15 @@ import { getNewWordData, isEnable } from '@/views/book/courseware/data/newWord';
 import PreviewMixin from '../common/PreviewMixin';
 import AudioFill from '../fill/components/AudioFillPlay.vue';
 import SoundRecord from '../../common/SoundRecord.vue';
+import AudioLine from '../voice_matrix/components/AudioLine.vue';
+import { GetFileURLMap } from '@/api/app';
 
 export default {
   name: 'NewWordPreview',
   components: {
     AudioFill,
     SoundRecord,
+    AudioLine,
   },
   mixins: [PreviewMixin],
   data() {
@@ -190,7 +185,6 @@ export default {
       mp3_index: -1,
       playWord: null,
       optionRes: [],
-      mp3List: [],
       isSuccess: false,
       loading: false,
       mp3: '',
@@ -220,12 +214,12 @@ export default {
   created() {},
   methods: {
     handleChange(val) {},
-    palyAudio(sIndex) {
+    palyAudio(url, sIndex) {
       this.stopAudio();
+      let mp3 = url;
       let node = document.getElementById('word' + this.indexStr + sIndex);
-      let mp3 = node.src;
       let audio = document.getElementsByTagName('audio');
-      if (audio && audio.length > 0 && window.location.href.indexOf('GCLS-Learn') == -1) {
+      if (audio && audio.length > 0 && audio.forEach && window.location.href.indexOf('GCLS-Learn') == -1) {
         audio.forEach((item) => {
           if (item.src != mp3) {
             item.pause();
@@ -240,17 +234,18 @@ export default {
       this.handleListenPlay(sIndex);
     },
     handleListenPlay(sIndex) {
+      let _this = this;
       if (this.playWord) {
         this.playWord.addEventListener('play', function () {
-          this.playClass = 'nn';
+          _this.playClass = 'nn';
         });
         this.playWord.addEventListener('pause', function () {
-          this.mp3_index = -1;
-          this.playClass = '';
+          _this.mp3_index = -1;
+          _this.playClass = '';
         });
         this.playWord.addEventListener('ended', function () {
-          this.mp3_index = -1;
-          this.playClass = '';
+          _this.mp3_index = -1;
+          _this.playClass = '';
         });
       }
     },
@@ -276,43 +271,6 @@ export default {
       this.dataWord = this.optionRes[this.detailIndex];
       //this.getWordLiju(this.data.new_word);
     },
-
-    playNewwords() {
-      let _this = this;
-      if (this.playWord) {
-        this.playWord.pause();
-      }
-      if (this.playClass) {
-        this.$refs.newwordAudio.pause();
-        // this.mp3_index = -1;
-        this.playClass = '';
-      } else {
-        let mp3_index = this.mp3_index == -1 ? 0 : this.mp3_index;
-        let leg = this.mp3List.length;
-        let mp3 = this.mp3List[mp3_index].mp3_list[0].id;
-        this.mp3_index = this.mp3List[mp3_index].sIndex;
-        this.handlePlayVoice(mp3);
-        this.$refs.newwordAudio.addEventListener('ended', function () {
-          setTimeout(() => {
-            if (_this.playClass != 'nn') {
-              if (mp3_index < leg - 1) {
-                if (_this.playClass) {
-                  mp3_index = mp3_index + 1;
-                  _this.mp3_index = _this.mp3List[mp3_index].sIndex;
-                  mp3 = _this.mp3List[mp3_index].mp3_list.length > 0 && _this.mp3List[mp3_index].mp3_list[0].id;
-                  if (mp3) {
-                    _this.handlePlayVoice(mp3);
-                  }
-                }
-              } else {
-                _this.mp3_index = -1;
-                _this.playClass = '';
-              }
-            }
-          }, 1000);
-        });
-      }
-    },
     handlePlayVoice3(mp3) {
       let audio = document.getElementsByTagName('audio');
       if (audio && audio.length > 0 && window.location.href.indexOf('GCLS-Learn') == -1) {
@@ -361,10 +319,14 @@ export default {
       this.is_change = true;
       let resIndex = 0;
       let optionRes = [];
-      let mp3List = [];
       let itemNumber = 0;
       let Bookanswer = [];
       let option_list = [];
+      if (this.data.audio_data.file_id) {
+        GetFileURLMap({ file_id_list: [this.data.audio_data.file_id] }).then(({ url_map }) => {
+          this.data.audio_data.url = url_map[this.data.audio_data.file_id];
+        });
+      }
       this.data.option.forEach((item) => {
         if (item.number) {
           option_list.push([item]);
@@ -375,6 +337,11 @@ export default {
             option_list.push([item]);
           }
         }
+        if (item.mp3_list) {
+          GetFileURLMap({ file_id_list: [item.mp3_list] }).then(({ url_map }) => {
+            this.$set(item, 'mp3_list_url', url_map[item.mp3_list]);
+          });
+        }
       });
       option_list.forEach((item, index) => {
         optionRes = optionRes.concat(item);
@@ -384,9 +351,6 @@ export default {
           sItem.sIndex = resIndex;
           resIndex++;
           sItem.def_str = sItem.definition_list;
-          if (sItem.mp3_list[0]) {
-            mp3List.push(sItem);
-          }
           if (this.data.lrc_arr && this.data.lrc_arr[itemNumber]) {
             sItem.bg = this.data.lrc_arr[itemNumber].bg;
             sItem.ed = this.data.lrc_arr[itemNumber].ed;
@@ -399,7 +363,6 @@ export default {
       });
       this.optionRes = JSON.parse(JSON.stringify(optionRes));
       this.$set(this.data, 'option_list', option_list);
-      this.mp3List = mp3List;
       if (!this.isJudgingRightWrong) {
         this.data.answer.answer_list = Bookanswer;
       }
@@ -506,6 +469,20 @@ export default {
           }
         }
 
+        .play-btn {
+          display: block;
+          width: 16px;
+          height: 16px;
+          margin-top: 4px;
+          background: url('@/assets/fill/voice-pause-red.png') no-repeat left top;
+          background-size: 100% 100%;
+
+          &.active {
+            background: url('@/assets/fill/voice-play-red.png') no-repeat left top;
+            background-size: 100% 100%;
+          }
+        }
+
         .tabNum {
           display: block;
           width: 16px;