rate

package.json

@@ -17,7 +17,9 @@
     "element-ui": "^2.15.6",
     "hevue-img-preview": "^5.0.3",
     "html2canvas": "^1.4.1",
+    "js-audio-recorder": "^1.0.7",
     "jsmind": "^0.4.8",
+    "lamejs": "^1.2.1",
     "vue": "^2.5.2",
     "vue-cookies": "^1.7.4",
     "vue-jsmind": "^1.5.0",

src/components/audioDemo.vue

@@ -0,0 +1,232 @@
+<template>
+  <div class="home" style="margin: 1vw">
+    <Button type="success" @click="getPermission()" style="margin: 1vw"
+      >获取麦克风权限</Button
+    >
+    <br />
+    <Button type="info" @click="startRecorder()" style="margin: 1vw"
+      >开始录音</Button
+    >
+    <Button type="info" @click="resumeRecorder()" style="margin: 1vw"
+      >继续录音</Button
+    >
+    <Button type="info" @click="pauseRecorder()" style="margin: 1vw"
+      >暂停录音</Button
+    >
+    <Button type="info" @click="stopRecorder()" style="margin: 1vw"
+      >结束录音</Button
+    >
+    <br />
+    <Button type="success" @click="playRecorder()" style="margin: 1vw"
+      >录音播放</Button
+    >
+    <Button type="success" @click="pausePlayRecorder()" style="margin: 1vw"
+      >暂停录音播放</Button
+    >
+    <Button type="success" @click="resumePlayRecorder()" style="margin: 1vw"
+      >恢复录音播放</Button
+    >
+    <Button type="success" @click="stopPlayRecorder()" style="margin: 1vw"
+      >停止录音播放</Button
+    >
+    <br />
+    <Button type="info" @click="getRecorder()" style="margin: 1vw"
+      >获取录音信息</Button
+    >
+    <Button type="info" @click="downPCM()" style="margin: 1vw">下载PCM</Button>
+    <Button type="info" @click="downWAV()" style="margin: 1vw">下载WAV</Button>
+    <Button type="info" @click="getMp3Data()" style="margin: 1vw"
+      >下载MP3</Button
+    >
+    <br />
+    <Button type="error" @click="destroyRecorder()" style="margin: 1vw"
+      >销毁录音</Button
+    >
+  </div>
+</template>
+
+ 
+<script>
+import Recorder from "js-audio-recorder";
+
+const lamejs = require("lamejs");
+
+const recorder = new Recorder({
+  sampleBits: 16, // 采样位数，支持 8 或 16，默认是16
+  sampleRate: 48000, // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000
+  numChannels: 1, // 声道，支持 1 或 2， 默认是1
+  // compiling: false,(0.x版本中生效,1.x增加中) // 是否边录边转换，默认是false
+});
+
+// 绑定事件-打印的是当前录音数据
+
+recorder.onprogress = function (params) {
+  // console.log('--------------START---------------')
+  // console.log('录音时长(秒)', params.duration);
+  // console.log('录音大小(字节)', params.fileSize);
+  // console.log('录音音量百分比(%)', params.vol);
+  // console.log('当前录音的总数据([DataView, DataView...])', params.data);
+  // console.log('--------------END---------------')
+};
+
+export default {
+  name: "home",
+  methods: {
+    /**
+     * 录音的具体操作功能
+     * */
+
+    // 开始录音
+    startRecorder() {
+      recorder.start().then(
+        () => {
+        },
+        (error) => {
+          // 出错了
+          console.log(`${error.name} : ${error.message}`);
+        }
+      );
+    },
+
+    // 继续录音
+    resumeRecorder() {
+      recorder.resume();
+    },
+    // 暂停录音
+    pauseRecorder() {
+      recorder.pause();
+    },
+    // 结束录音
+    stopRecorder() {
+      recorder.stop();
+    },
+
+    // 录音播放
+    playRecorder() {
+      recorder.play();
+    },
+
+    // 暂停录音播放
+    pausePlayRecorder() {
+      recorder.pausePlay();
+    },
+
+    // 恢复录音播放
+    resumePlayRecorder() {
+      recorder.resumePlay();
+    },
+
+    // 停止录音播放
+    stopPlayRecorder() {
+      recorder.stopPlay();
+    },
+
+    // 销毁录音
+    destroyRecorder() {
+      recorder.destroy();
+      //   .then(function () {
+      // recorder = null;
+      //   });
+    },
+
+    /**
+     * 获取录音文件
+     * */
+
+    getRecorder() {
+      let toltime = recorder.duration; //录音总时长
+      let fileSize = recorder.fileSize; //录音总大小
+      //录音结束，获取取录音数据
+      let PCMBlob = recorder.getPCMBlob(); //获取 PCM 数据
+      let wav = recorder.getWAVBlob(); //获取 WAV 数据
+      let channel = recorder.getChannelData(); //获取左声道和右声道音频数据
+      console.log(toltime);
+    //   debugger;
+    },
+
+    /**
+     * 下载录音文件
+     * */
+
+    //下载pcm
+
+    downPCM() {
+      //这里传参进去的时文件名
+      recorder.downloadPCM("新文件");
+    },
+
+    //下载wav
+
+    downWAV() {
+      //这里传参进去的时文件名
+      recorder.downloadWAV("新文件");
+    },
+
+    /**
+     * 获取麦克风权限
+     * */
+
+    getPermission() {
+      Recorder.getPermission().then(
+        () => {
+          this.$Message.success("获取权限成功");
+        },
+        (error) => {
+          console.log(`${error.name} : ${error.message}`);
+        }
+      );
+    },
+
+    /**
+     * 文件格式转换 wav-map3
+     * */
+
+    getMp3Data() {
+      const mp3Blob = this.convertToMp3(recorder.getWAV());
+      recorder.download(mp3Blob, "recorder", "mp3");
+    },
+
+    convertToMp3(wavDataView) {
+      // 获取wav头信息
+      const wav = lamejs.WavHeader.readHeader(wavDataView); // 此处其实可以不用去读wav头信息，毕竟有对应的config配置
+      const { channels, sampleRate } = wav;
+      const mp3enc = new lamejs.Mp3Encoder(channels, sampleRate, 128);
+      // 获取左右通道数据
+      const result = recorder.getChannelData();
+      const buffer = [];
+      const leftData =
+        result.left &&
+        new Int16Array(result.left.buffer, 0, result.left.byteLength / 2);
+      const rightData =
+        result.right &&
+        new Int16Array(result.right.buffer, 0, result.right.byteLength / 2);
+      const remaining = leftData.length + (rightData ? rightData.length : 0);
+      const maxSamples = 1152;
+      for (let i = 0; i < remaining; i += maxSamples) {
+        const left = leftData.subarray(i, i + maxSamples);
+        let right = null;
+        let mp3buf = null;
+        if (channels === 2) {
+          right = rightData.subarray(i, i + maxSamples);
+          mp3buf = mp3enc.encodeBuffer(left, right);
+        } else {
+          mp3buf = mp3enc.encodeBuffer(left);
+        }
+        if (mp3buf.length > 0) {
+          buffer.push(mp3buf);
+        }
+      }
+
+      const enc = mp3enc.flush();
+      if (enc.length > 0) {
+        buffer.push(enc);
+      }
+      return new Blob(buffer, { type: "audio/mp3" });
+    },
+  },
+};
+</script>
+
+ 
+<style  scoped>
+</style>

src/components/liveProjectDetail.vue

@@ -116,25 +116,33 @@
                   <span
                     @click="isChooseActive(1)"
                     :class="typeC.indexOf(1) != -1 ? 'isChoose' : ''"
-                    v-if="tools[ppage - 1].choice && tools[ppage - 1].choice > 0"
+                    v-if="
+                      tools[ppage - 1].choice && tools[ppage - 1].choice > 0
+                    "
                     >A</span
                   >
                   <span
                     @click="isChooseActive(2)"
                     :class="typeC.indexOf(2) != -1 ? 'isChoose' : ''"
-                    v-if="tools[ppage - 1].choice && tools[ppage - 1].choice > 1"
+                    v-if="
+                      tools[ppage - 1].choice && tools[ppage - 1].choice > 1
+                    "
                     >B</span
                   >
                   <span
                     @click="isChooseActive(3)"
                     :class="typeC.indexOf(3) != -1 ? 'isChoose' : ''"
-                    v-if="tools[ppage - 1].choice && tools[ppage - 1].choice > 2"
+                    v-if="
+                      tools[ppage - 1].choice && tools[ppage - 1].choice > 2
+                    "
                     >C</span
                   >
                   <span
                     @click="isChooseActive(4)"
                     :class="typeC.indexOf(4) != -1 ? 'isChoose' : ''"
-                    v-if="tools[ppage - 1].choice && tools[ppage - 1].choice > 3"
+                    v-if="
+                      tools[ppage - 1].choice && tools[ppage - 1].choice > 3
+                    "
                     >D</span
                   >
                 </div>
@@ -172,7 +180,10 @@
               "
             >
               <div
-                v-if="tools[ppage - 1].tools && tools[ppage - 1].tools.indexOf(1) != -1"
+                v-if="
+                  tools[ppage - 1].tools &&
+                  tools[ppage - 1].tools.indexOf(1) != -1
+                "
                 @click="checkTools(1)"
                 class="toolCss"
               >
@@ -182,17 +193,26 @@
                 </div>
               </div>
               <div
-                v-if="tools[ppage - 1].tools && tools[ppage - 1].tools.indexOf(3) != -1"
+                v-if="
+                  tools[ppage - 1].tools &&
+                  tools[ppage - 1].tools.indexOf(3) != -1
+                "
                 @click="checkTools(3)"
                 class="toolCss"
               >
                 <div class="toolImg">
-                  <img src="../assets/icon/secondToolList/mindMapping.png" alt />
+                  <img
+                    src="../assets/icon/secondToolList/mindMapping.png"
+                    alt
+                  />
                   <div>思维导图</div>
                 </div>
               </div>
               <div
-                v-if="tools[ppage - 1].tools && tools[ppage - 1].tools.indexOf(28) != -1"
+                v-if="
+                  tools[ppage - 1].tools &&
+                  tools[ppage - 1].tools.indexOf(28) != -1
+                "
                 @click="checkTools(28)"
                 class="toolCss"
               >
@@ -202,7 +222,10 @@
                 </div>
               </div>
               <div
-                v-if="tools[ppage - 1].tools && tools[ppage - 1].tools.indexOf(4) != -1"
+                v-if="
+                  tools[ppage - 1].tools &&
+                  tools[ppage - 1].tools.indexOf(4) != -1
+                "
                 @click="checkTools(4)"
                 class="toolCss"
               >
@@ -212,7 +235,10 @@
                 </div>
               </div>
               <div
-                v-if="tools[ppage - 1].tools && tools[ppage - 1].tools.indexOf(6) != -1"
+                v-if="
+                  tools[ppage - 1].tools &&
+                  tools[ppage - 1].tools.indexOf(6) != -1
+                "
                 @click="checkTools(6)"
                 class="toolCss"
               >
@@ -222,17 +248,26 @@
                 </div>
               </div>
               <div
-                v-if="tools[ppage - 1].tools && tools[ppage - 1].tools.indexOf(7) != -1"
+                v-if="
+                  tools[ppage - 1].tools &&
+                  tools[ppage - 1].tools.indexOf(7) != -1
+                "
                 @click="checkTools(7)"
                 class="toolCss"
               >
                 <div class="toolImg">
-                  <img src="../assets/icon/secondToolList/mindNetwork.png" alt />
+                  <img
+                    src="../assets/icon/secondToolList/mindNetwork.png"
+                    alt
+                  />
                   <div>思维网格</div>
                 </div>
               </div>
               <div
-                v-if="tools[ppage - 1].tools && tools[ppage - 1].tools.indexOf(16) != -1"
+                v-if="
+                  tools[ppage - 1].tools &&
+                  tools[ppage - 1].tools.indexOf(16) != -1
+                "
                 @click="addImg($event)"
                 class="toolCss"
               >
@@ -250,7 +285,10 @@
                 </div>
               </div>
               <div
-                v-if="tools[ppage - 1].tools && tools[ppage - 1].tools.indexOf(29) != -1"
+                v-if="
+                  tools[ppage - 1].tools &&
+                  tools[ppage - 1].tools.indexOf(29) != -1
+                "
                 @click="addImg($event)"
                 class="toolCss"
               >
@@ -280,7 +318,11 @@
                 <div class="tools_title">
                   <span>电子白板</span>
                   <div>
-                    <img src="../assets/full.png" class="full" @click="fullTools" />
+                    <img
+                      src="../assets/full.png"
+                      class="full"
+                      @click="fullTools"
+                    />
                   </div>
                 </div>
                 <iframe
@@ -296,7 +338,11 @@
                 <div class="tools_title">
                   <span>思维导图</span>
                   <div>
-                    <img src="../assets/full.png" class="full" @click="fullTools" />
+                    <img
+                      src="../assets/full.png"
+                      class="full"
+                      @click="fullTools"
+                    />
                   </div>
                 </div>
                 <iframe
@@ -312,7 +358,11 @@
                 <div class="tools_title">
                   <span>翻译</span>
                   <div>
-                    <img src="../assets/full.png" class="full" @click="fullTools" />
+                    <img
+                      src="../assets/full.png"
+                      class="full"
+                      @click="fullTools"
+                    />
                   </div>
                 </div>
                 <iframe
@@ -328,7 +378,11 @@
                 <div class="tools_title">
                   <span>协同文档</span>
                   <div>
-                    <img src="../assets/full.png" class="full" @click="fullTools" />
+                    <img
+                      src="../assets/full.png"
+                      class="full"
+                      @click="fullTools"
+                    />
                   </div>
                 </div>
                 <iframe
@@ -343,7 +397,11 @@
                 <div class="tools_title">
                   <span>思维网格</span>
                   <div>
-                    <img src="../assets/full.png" class="full" @click="fullTools" />
+                    <img
+                      src="../assets/full.png"
+                      class="full"
+                      @click="fullTools"
+                    />
                   </div>
                 </div>
                 <iframe
@@ -390,7 +448,9 @@
                 </div>
               </div>
               <div class="nextStepBox">
-                <div class="nextStepOne" @click="(isBlock = 4), (full = false)">返回</div>
+                <div class="nextStepOne" @click="(isBlock = 4), (full = false)">
+                  返回
+                </div>
               </div>
               <div
                 class="nextStepOne"
@@ -426,7 +486,11 @@
             style="padding: 0 0 0 25px"
           >
             <div>
-              <div class="score_box" v-for="(ra,raIndex) in rateArray" :key="raIndex">
+              <div
+                class="score_box"
+                v-for="(ra, raIndex) in tools[ppage - 1].rateArray"
+                :key="raIndex"
+              >
                 <span>{{ ra }} </span>
                 <el-rate v-model="rateList[raIndex]"></el-rate>
               </div>
@@ -434,7 +498,12 @@
             <span
               slot="footer"
               class="dialog-footer sztFooter"
-              style="padding: 0 0 30px 0px; position: absolute; right: 20px; bottom: 0"
+              style="
+                padding: 0 0 30px 0px;
+                position: absolute;
+                right: 20px;
+                bottom: 0;
+              "
             >
               <!-- <el-button @click="isBlock = 0">取消</el-button> -->
               <el-button type="primary" @click="addWork(6)">确定</el-button>
@@ -451,7 +520,9 @@
           >
             <div>
               <div v-for="(tk, tIndex) in 7" :key="tIndex" class="tkCss">
-                <div style="margin-right: 10px; font-size: 18px">{{ tIndex + 1 }}、</div>
+                <div style="margin-right: 10px; font-size: 18px">
+                  {{ tIndex + 1 }}、
+                </div>
                 <el-select v-model="tkAnswer[tIndex]" placeholder="请选择答案">
                   <el-option
                     v-for="(tkA, tkAIndex) in tkAnswerBox"
@@ -473,13 +544,22 @@
             <span
               slot="footer"
               class="dialog-footer sztFooter"
-              style="padding: 0 0 30px 0px; position: absolute; right: 20px; bottom: 0"
+              style="
+                padding: 0 0 30px 0px;
+                position: absolute;
+                right: 20px;
+                bottom: 0;
+              "
             >
               <!-- <el-button @click="isBlock = 0">取消</el-button> -->
               <el-button type="primary" @click="addWork(5)">提交</el-button>
             </span>
           </div>
-          <div class="answerBox" v-if="isBlock == 5" style="padding: 10px 0 0 25px">
+          <div
+            class="answerBox"
+            v-if="isBlock == 5"
+            style="padding: 10px 0 0 25px"
+          >
             <div style="color: #d1d1d1; font-size: 24px">课堂实践</div>
             <div
               style="
@@ -506,13 +586,21 @@
                 v-if="tools[ppage - 1].file && tools[ppage - 1].file.length"
                 class="fileBox"
               >
-                <div class="fileListCss" v-for="(v, vIndex) in videoList" :key="vIndex">
+                <div
+                  class="fileListCss"
+                  v-for="(v, vIndex) in videoList"
+                  :key="vIndex"
+                >
                   <div class="fileCss" @click="playVideo(v.src, vIndex)">
                     <img src="../assets/uploadMp4.png" alt />
                   </div>
                   <div>{{ v.name }}</div>
                 </div>
-                <div class="fileListCss" v-for="(f, fIndex) in fileList" :key="fIndex">
+                <div
+                  class="fileListCss"
+                  v-for="(f, fIndex) in fileList"
+                  :key="fIndex"
+                >
                   <div class="fileCss" @click="openFile(f.src)">
                     <img src="../assets/file.png" alt />
                   </div>
@@ -557,7 +645,11 @@
               </div>
             </div>
           </div>
-          <div class="answerBox" :class="{ fullStyle: full }" v-if="isBlock == 9">
+          <div
+            class="answerBox"
+            :class="{ fullStyle: full }"
+            v-if="isBlock == 9"
+          >
             <div style="height: 70%; width: 100%">
               <div class="wheel">
                 <div style="height: 100%">
@@ -612,7 +704,9 @@
     </div>
     <div v-if="proVisible" class="mask">
       <div class="progressBox">
-        <div class="lbox"><img src="../assets/loading.gif" />上传中，请稍后</div>
+        <div class="lbox">
+          <img src="../assets/loading.gif" />上传中，请稍后
+        </div>
         <el-progress
           :text-inside="true"
           :stroke-width="20"
@@ -744,17 +838,16 @@ export default {
           file: [
             {
               name: "视频1.mp4",
-              src:
-                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%AA%92%E4%BD%9311661413782505.mp4",
+              src: "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%AA%92%E4%BD%9311661413782505.mp4",
             },
           ],
         },
         "", //问答题
-        { tools: [9],choice:3 },
-        { tools: [9],choice:3 }, //协同文档
-        { tools: [9],choice:3 }, //思维导图
-        { tools: [9],choice:3 },
-        { tools: [9],choice:3 },
+        { tools: [9], choice: 3 },
+        { tools: [9], choice: 3 }, //协同文档
+        { tools: [9], choice: 3 }, //思维导图
+        { tools: [9], choice: 3 },
+        { tools: [9], choice: 3 },
         { tools: [12] },
         {
           tools: [27],
@@ -772,15 +865,22 @@ export default {
           file: [
             {
               name: "视频2.mp4",
-              src:
-                "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%AA%92%E4%BD%9321661413797366.mp4",
+              src: "https://ccrb.s3.cn-northwest-1.amazonaws.com.cn/%E5%AA%92%E4%BD%9321661413797366.mp4",
             },
           ],
         },
         { tools: [9] },
         { tools: [3, 28] },
         { tools: [16] },
-        { tools: [14] },
+        {
+          tools: [14],
+          rateArray: [
+            "聚焦主题",
+            "有开头结尾",
+            "语言正确,流畅",
+            "书写规范,美观",
+          ],
+        },
         "",
         "",
         { tools: [29] },
@@ -788,12 +888,6 @@ export default {
         "",
         //1、电子白板 2、便签 3、思维导图 4、问卷调查 5、量规评分 6、协同文档 7、思维网格 8、素材库 9、选择题 10、倒计时 11、问答题 12、选人回答 13、分小组 14、老师对提交作业进行评价 15、问答 16、作业提交 17、学习资料 18、训练平台 19、目标管理 20、课程设计 21、编程平台 22、AI体验 23、python 24、AI平台
       ],
-      rateArray:[
-        "聚焦主题",
-        "有开头结尾",
-        "语言正确,流畅",
-        "书写规范,美观",
-      ],
       rateList: [],
       tkAnswerBox: [
         "Feelings",
@@ -878,11 +972,14 @@ export default {
     },
     //uuid生成
     guid() {
-      return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
-        var r = (Math.random() * 16) | 0,
-          v = c == "x" ? r : (r & 0x3) | 0x8;
-        return v.toString(16);
-      });
+      return "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(
+        /[xy]/g,
+        function (c) {
+          var r = (Math.random() * 16) | 0,
+            v = c == "x" ? r : (r & 0x3) | 0x8;
+          return v.toString(16);
+        }
+      );
     },
     time() {
       if (!this.now) {
@@ -1316,12 +1413,16 @@ export default {
       for (var i = 0; i < b.length; i++) {
         if (
           a.indexOf(
-            b[i].src.split(".")[b[i].src.split(".").length - 1].toLocaleUpperCase()
+            b[i].src
+              .split(".")
+              [b[i].src.split(".").length - 1].toLocaleUpperCase()
           ) != -1
         ) {
           this.fileList.push(b[i]);
         } else if (
-          b[i].src.split(".")[b[i].src.split(".").length - 1].toLocaleUpperCase() == "MP3"
+          b[i].src
+            .split(".")
+            [b[i].src.split(".").length - 1].toLocaleUpperCase() == "MP3"
         ) {
           this.videoList2.push(b[i]);
         } else {
@@ -1369,7 +1470,10 @@ export default {
         // this.isBlock = 3;
       } else {
         this.isBlock = 0;
-        if (this.tools[page - 1].tools && this.tools[page - 1].tools.indexOf(9) != -1) {
+        if (
+          this.tools[page - 1].tools &&
+          this.tools[page - 1].tools.indexOf(9) != -1
+        ) {
           this.isBlock = 1;
         }
         // if (this.ppage > 3) {
@@ -1380,7 +1484,8 @@ export default {
         this.toolCount = 0;
         if (
           this.tools[page - 1].tools &&
-          (this.tools[page - 1].tools[0] == 14 || this.tools[page - 1].tools[0] == 12)
+          (this.tools[page - 1].tools[0] == 14 ||
+            this.tools[page - 1].tools[0] == 12)
         ) {
           this.isBlock = 0;
         }
@@ -1392,7 +1497,10 @@ export default {
         ) {
           this.isBlock = 4;
         }
-        if (this.tools[page - 1].tools && this.tools[page - 1].tools.length > 1) {
+        if (
+          this.tools[page - 1].tools &&
+          this.tools[page - 1].tools.length > 1
+        ) {
           this.isBlock = 4;
         }
         if (this.tools[page - 1].tools && !this.tools[page - 1].tools.length) {
@@ -1430,7 +1538,10 @@ export default {
           this.isBlock = 8;
         }
 
-        if (this.tools[this.ppage - 1].file && this.tools[this.ppage - 1].file.length) {
+        if (
+          this.tools[this.ppage - 1].file &&
+          this.tools[this.ppage - 1].file.length
+        ) {
         } else {
           this.videoBlock = 0;
         }
@@ -1510,17 +1621,25 @@ export default {
             "https://pbl.cocorobo.cn/pbl-student-table/dist/js/aws-sdk-2.235.1.min.js";
           const script3 = document.createElement("script");
           script3.type = "text/javascript";
-          script3.src = "https://html2canvas.hertzen.com/dist/js/html2canvas.min.js";
+          script3.src =
+            "https://html2canvas.hertzen.com/dist/js/html2canvas.min.js";
           const script4 = document.createElement("script");
           script4.type = "text/javascript";
-          script4.src = "https://pbl.cocorobo.cn/pbl-student-table/dist/js/jietu.js";
+          script4.src =
+            "https://pbl.cocorobo.cn/pbl-student-table/dist/js/jietu.js";
 
           if (_this.toolCount == 1) {
             _this.$refs.whiteBoard.onload = () => {
-              _this.$refs.whiteBoard.contentWindow.document.body.appendChild(script1);
-              _this.$refs.whiteBoard.contentWindow.document.body.appendChild(script2);
+              _this.$refs.whiteBoard.contentWindow.document.body.appendChild(
+                script1
+              );
+              _this.$refs.whiteBoard.contentWindow.document.body.appendChild(
+                script2
+              );
               // _this.$refs.whiteBoard.contentWindow.document.body.appendChild(script3);
-              _this.$refs.whiteBoard.contentWindow.document.body.appendChild(script4);
+              _this.$refs.whiteBoard.contentWindow.document.body.appendChild(
+                script4
+              );
             };
           } else if (_this.toolCount == 3) {
             _this.$refs.mind.onload = () => {

src/router/index.js

@@ -14,6 +14,7 @@ import noticeDetail from '@/components/noticeDetail'
 import study from '@/components/study'
 import liveRoom from '@/components/liveRoom'
 import liveProjectDetail from '@/components/liveProjectDetail'
+import audioDemo from '@/components/audioDemo'
 
 Vue.use(Router).use(ElementUI)
 
@@ -94,5 +95,11 @@ export default new Router({
             component: liveProjectDetail,
             requireAuth: ''
         },
+        {
+            path: '/audioDemo',
+            name: 'audioDemo',
+            component: audioDemo,
+            requireAuth: ''
+        },
     ]
 })