自动生成音频

src/views/exercise_questions/create/components/exercises/ChineseQuestion.vue

@@ -40,7 +40,7 @@
             />
             <div v-else-if="data.other.audio_generation_method === 'auto'" class="auto-matically">
               <AudioPlay :file-id="item.audio_file_id" theme-color="gray" />
-              <span class="auto-btn" @click="handleMatically">自动生成</span>
+              <span class="auto-btn" @click="handleMatically(item)">自动生成</span>
             </div>
             <SoundRecord v-else :wav-blob.sync="item.audio_file_id" />
             <el-input v-if="data.property.learn_type !== 'learn'" v-model="item.definition" placeholder="输入释义" />
@@ -132,6 +132,7 @@
 import QuestionMixin from '../common/QuestionMixin.js';
 import UploadAudio from '../common/UploadAudio.vue';
 import SoundRecord from '../common/SoundRecord.vue';
+import { GetStaticResources } from '@/api/app';
 
 import { changeOptionType } from '@/views/exercise_questions/data/common';
 import {
@@ -174,7 +175,21 @@ export default {
       this.data.file_id_list.splice(this.data.file_id_list.indexOf(file_id), 1);
     },
     // 自动生成音频
-    handleMatically() {},
+    handleMatically(item) {
+      if (item.pinyin.trim()) {
+        let MethodName = 'tool-PinyinToVoiceFile';
+        let data = {
+          pinyin: item.pinyin.trim(),
+        };
+        GetStaticResources(MethodName, data).then((res) => {
+          if (res.status === 1) {
+            this.data.file_id_list.splice(this.data.file_id_list.indexOf(item.file_id), 1);
+            item.audio_file_id = res.file_id;
+            this.data.file_id_list.push(res.file_id);
+          }
+        });
+      }
+    },
   },
 };
 </script>

src/views/exercise_questions/create/components/exercises/ChooseToneQuestion.vue

@@ -42,7 +42,7 @@
             />
             <div v-else-if="data.other.audio_generation_method === 'auto'" class="auto-matically">
               <AudioPlay :file-id="item.audio_file_id" theme-color="gray" />
-              <span class="auto-btn" @click="handleMatically">自动生成</span>
+              <span class="auto-btn" @click="handleMatically(item)">自动生成</span>
             </div>
             <SoundRecord v-else :wav-blob.sync="item.audio_file_id" />
             <SvgIcon icon-class="delete" class="delete pointer" @click="deleteOption(i, item.audio_file_id)" />
@@ -144,6 +144,7 @@ import {
   toneList,
   toneTypeList,
 } from '@/views/exercise_questions/data/chooseTone';
+import { GetStaticResources } from '@/api/app';
 
 export default {
   name: 'ChooseToneQuestion',
@@ -159,6 +160,21 @@ export default {
       audioGenerationMethodList,
       toneTypeList,
       data: JSON.parse(JSON.stringify(ChooseToneData)),
+      matically_pinyin_obj: {}, // 存放转成声调的拼音
+      tone_data: [
+        ['ā', 'á', 'ǎ', 'à', 'a'],
+        ['ō', 'ó', 'ǒ', 'ò', 'o'],
+        ['ē', 'é', 'ě', 'è', 'e'],
+        ['ī', 'í', 'ǐ', 'ì', 'i'],
+        ['ū', 'ú', 'ǔ', 'ù', 'u'],
+        ['ǖ', 'ǘ', 'ǚ', 'ǜ', 'ü'],
+        ['Ā', 'Á', 'Â', 'À', 'A'],
+        ['Ō', 'Ó', 'Ô', 'Ò', 'O'],
+        ['Ē', 'É', 'Ê', 'È', 'E'],
+        ['Ī', 'Í', 'Î', 'Ì', 'I'],
+        ['Ū', 'Ú', 'Û', 'Ù', 'U'],
+      ],
+      res_arr: [],
     };
   },
   methods: {
@@ -179,7 +195,114 @@ export default {
       this.data.file_id_list.splice(this.data.file_id_list.indexOf(file_id), 1);
     },
     // 自动生成音频
-    handleMatically() {},
+    handleMatically(item) {
+      if (item.content.trim()) {
+        let MethodName = 'tool-PinyinToVoiceFile';
+        let data = {
+          pinyin: this.matically_pinyin_obj[item.mark],
+        };
+        GetStaticResources(MethodName, data).then((res) => {
+          if (res.status === 1) {
+            this.data.file_id_list.splice(this.data.file_id_list.indexOf(item.file_id), 1);
+            item.audio_file_id = res.file_id;
+            this.data.file_id_list.push(res.file_id);
+          }
+        });
+      }
+    },
+    handleReplaceTone(e, mark) {
+      this.$nextTick(() => {
+        let value = e;
+        if (value) {
+          let reg = /\s+/g;
+          let valueArr = value.split(reg);
+          valueArr.forEach((item) => {
+            this.handleValue(item);
+          });
+          let str = '';
+          setTimeout(() => {
+            this.res_arr.forEach((item) => {
+              str += ' ';
+              item.forEach((sItem) => {
+                if (sItem.number && sItem.con) {
+                  let number = Number(sItem.number);
+                  let con = sItem.con;
+                  let word = this.addTone(number, con);
+                  str += word;
+                } else if (sItem.number) {
+                  str += sItem.number;
+                } else if (sItem.con) {
+                  str += ` ${sItem.con} `;
+                }
+              });
+            });
+            this.matically_pinyin_obj[mark] = str.trim().split(' ').join(',');
+          }, 10);
+        }
+      });
+    },
+    handleValue(valItem) {
+      let reg = /\d/;
+      let reg2 = /[A-Za-z]+\d/g;
+      let numList = [];
+      let valArr = valItem.split('');
+      if (reg2.test(valItem)) {
+        for (let i = 0; i < valArr.length; i++) {
+          let item = valItem[i];
+          if (reg.test(item)) {
+            let numIndex = numList.length === 0 ? 0 : numList[numList.length - 1].index;
+            let con = valItem.substring(numIndex, i);
+            con = con.replace(/\d/g, '');
+            let obj = {
+              index: i,
+              number: item,
+              con,
+              isTran: true,
+            };
+            numList.push(obj);
+          }
+        }
+      } else {
+        numList = [];
+      }
+      if (numList.length === 0) {
+        this.res_arr.push([{ con: valItem }]);
+      } else {
+        this.res_arr.push(numList);
+      }
+    },
+    addTone(number, con) {
+      let zmList = ['a', 'o', 'e', 'i', 'u', 'v', 'A', 'O', 'E', 'I', 'U'];
+      let cons = con;
+      if (number) {
+        for (let i = 0; i < zmList.length; i++) {
+          let zm = zmList[i];
+          if (con.indexOf(zm) > -1) {
+            let zm2 = this.tone_data[i][number - 1];
+            if (con.indexOf('iu') > -1) {
+              zm2 = this.tone_data[4][number - 1];
+              cons = con.replace('u', zm2);
+            } else if (con.indexOf('ui') > -1) {
+              zm2 = this.tone_data[3][number - 1];
+              cons = con.replace('i', zm2);
+            } else if (
+              con.indexOf('yv') > -1 ||
+              con.indexOf('jv') > -1 ||
+              con.indexOf('qv') > -1 ||
+              con.indexOf('xv') > -1
+            ) {
+              zm2 = this.tone_data[4][number - 1];
+              cons = con.replace('v', zm2);
+            } else {
+              cons = con.replace(zm, zm2);
+            }
+
+            break;
+          }
+        }
+      }
+      return cons;
+    },
     // 答案
     handleItemAnswer(item) {
       const index = this.data.answer.answer_list.findIndex((items) => items.mark === item.mark);
@@ -187,6 +310,8 @@ export default {
       let content_arr = content.split(' ');
       let select_item = '';
       let content_preview = '';
+      this.res_arr = [];
+      this.$set(this.matically_pinyin_obj, item.mark, []);
       content_arr.forEach((items) => {
         let items_trim = items.trim();
         if (items_trim) {
@@ -201,6 +326,7 @@ export default {
             select_item += `${items_trim} `;
           }
           content_preview += `${items_yuan} `;
+          this.handleReplaceTone(items_yuan + items_trim.substring(indexs, indexs + 1), item.mark);
         }
       });
       if (index === -1) {
@@ -213,6 +339,7 @@ export default {
         this.data.answer.answer_list[index].value = select_item.trim().split(' ');
       }
       item.content_view = content_preview.trim().split(' ');
+      // item.matically_pinyin = matically_pinyin.trim().split(' ').join(',');
     },
     // 改变类型
     handleChangeType() {

src/views/exercise_questions/create/components/exercises/TalkPictureQuestion.vue

@@ -33,9 +33,9 @@
                 :preview-src-list="[pic_list[item.picture_file_id]]"
                 fit="contain"
               />
-              <el-button type="danger" plain @click="delectOption(index, item.picture_file_id)"
-                ><i class="el-icon-delete"></i>删除</el-button
-              >
+              <button class="delete-btn" @click="delectOptions(index, item.picture_file_id)">
+                <i class="el-icon-delete"></i>删除
+              </button>
             </div>
             <div class="item-right">
               <div class="item-rich">
@@ -181,7 +181,7 @@ export default {
       this.is_first = false;
     },
     // 删除
-    delectOption(i, id) {
+    delectOptions(i, id) {
       this.$confirm('是否删除该条全部信息？', '提示', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
@@ -191,7 +191,6 @@ export default {
           delete this.pic_list[id];
           this.data.file_id_list.splice(this.data.file_id_list.indexOf(id), 1);
           this.data.option_list.splice(i, 1);
-          console.log(this.data);
         })
         .catch(() => {});
     },
@@ -250,6 +249,29 @@ export default {
     margin-bottom: 24px;
   }
 
+  .delete-btn {
+    width: 100%;
+    padding: 5px 8px;
+    font-size: 14px;
+    line-height: 22px;
+    color: #f53f3f;
+    background: #fff4f4;
+    border: none;
+    border-radius: 4px;
+
+    .el-icon-delete {
+      margin-right: 8px;
+    }
+
+    &:hover {
+      color: #f53f3f;
+    }
+
+    &:focus {
+      outline: none;
+    }
+  }
+
   .item-left {
     width: 72px;
   }