feat: 声扬课堂观察录音

build/webpack.dev.conf.js

@@ -43,7 +43,8 @@ const devWebpackConfig = merge(baseWebpackConfig, {
     quiet: true, // necessary for FriendlyErrorsPlugin
     watchOptions: {
       poll: config.dev.poll,
-    }
+    },
+    https: true // Enable HTTPS
   },
   plugins: [
     new webpack.DefinePlugin({

src/components/pages/classroomObservation/components/addNewTeacherVoiceprintDialog.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <el-dialog :center="true" :visible.sync="dialogVisible" width="600px" class="addTemplateDialog">
+    <el-dialog :center="true" :visible.sync="dialogVisible" width="600px" class="addTemplateDialog" :before-close="close">
       <!-- <div v-if="showDialog == true" class="a-dialog" v-el-drag-dialog> -->
       <div class="a-d-top">
         <div class="a-d-topTit">
@@ -54,10 +54,10 @@
                 <div>
                   <div v-if="status === 1">
                     <el-button @click="stop({ drop: true })">取消录制</el-button>
-                    <el-button :disabled="isRecorderStopable" @click="stop({ drop: false })">停止录制</el-button>
+                    <el-button :disabled="isRecorderStopDisabled" @click="stop({ drop: false })">停止录制</el-button>
                   </div>
                   <div v-else-if="recorderContext.file">
-                    {{ recorderContext.file.name }}
+                    <el-tag style="cursor: pointer" @click="download">{{ recorderContext.file.name }}</el-tag>
                     <el-button :loading="registerLoading" @click="register()">注册该声纹</el-button>
                   </div>
                 </div>
@@ -76,6 +76,7 @@
 // import Recorder from 'recorder-core/recorder.mp3.min'
 import Recorder from 'recorder-core/recorder.wav.min'
 import * as Sy from '@/lib/shengyang'
+import { saveAs } from 'file-saver';
 
 export default {
   emits: ['complete'],
@@ -121,7 +122,7 @@ export default {
       const seconds = Math.floor((elapsed % 60000) / 1000)
       return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`
     },
-    isRecorderStopable() {
+    isRecorderStopDisabled() {
       return (this.recorderContext.endTime - this.recorderContext.startTime) <= 60 * 1000
     }
   },
@@ -129,13 +130,19 @@ export default {
     open() {
       this.dialogVisible = true;
     },
-    close() {
+    beforeClose(done) {
       if (this.status === 1) {
         this.$message.info('请先停止录制')
-        return
+        return false
       }
+      done && done()
       this.$emit('complete')
-      this.dialogVisible = false;
+      return true
+    },
+    close() {
+      if (this.beforeClose()) {
+        this.dialogVisible = false;
+      }
     },
     start() {
       if (!this.form.name) {
@@ -208,6 +215,11 @@ export default {
         this.recorderContext.timer = null
       }
     },
+    download() {
+      if (this.recorderContext.file) {
+        saveAs(this.recorderContext.file, `voiceprint_${Date.now()}.wav`);
+      }
+    }
   },
 
 };

src/components/pages/classroomObservation/components/chatArea.vue

@@ -20,7 +20,7 @@
     </div>
     <div class="ca-top">
       <!-- 开始页面 -->
-      <startPage v-show="showIndexPage" @startTape="recordedStart" @uploadTape="uploadRecording"
+      <startPage v-show="showIndexPage" @startTape="onClickStartRecord" @uploadTape="uploadRecording"
         :uploadFileLoading="uploadFileLoading" ref="startPageRef" />
       <!-- 原文速递 -->
       <transcription v-show="pageStatus == 1 && !showIndexPage" :showGetTextLoading="showGetTextLoading"
@@ -78,49 +78,59 @@
 							<span class="ca-b-o-h-s-l-icon2 el-icon-caret-top"></span>
 						</div> -->
 
-            <div class="ca-b-o-h-l-select" style="color: #3681fc">
-              <div style="cursor: pointer" class="ca-b-o-h-s-l-text" @click.stop="languageShow = !languageShow">
-                {{ languageList.find(i => i.label == languageRadio).lang }}
-              </div>
-
-              <div class="languageList" v-click-outside="handleBlur" v-if="languageShow">
-                <el-radio v-for="(i, index) in languageList" :key="index + 'lag'"
-                  :class="i.label == languageRadio ? 'radioBg' : ''" v-model.number="languageRadio"
-                  @input="languageShow = false" :label.Num="i.label">{{ i.lang }}</el-radio>
-              </div>
+            <div style="margin-right: 16px">
+              选择解析器:
+              <el-select v-model="recorderProvider" size="small" style="width: 120px" :disabled="controlsStatus === 1">
+                <el-option key="shengyang" label="声扬" value="shengyang">
+                </el-option>
+                <el-option key="microsoft" label="微软" value="microsoft">
+                </el-option>
+              </el-select>
             </div>
 
-            <div class="ca-b-o-h-l-btn">
-              <div class="ca-b-o-h-b-l-text" @click.stop="showTeacherVoiceprintBox = !showTeacherVoiceprintBox">
-                教师声纹</div>
-              <div class="ca_teacherVoiceprintBox" style="cursor: default;"
-                v-click-outside="() => showTeacherVoiceprintBox = !showTeacherVoiceprintBox"
-                v-if="showTeacherVoiceprintBox">
-
-                <p>选择本次使用的教师声纹</p>
-                <el-select v-model="choseTeacherVoiceprint" multiple placeholder="请选择" :multiple-limit="10" filterable
-                  clearable style="width: 200px; padding: 0; margin-bottom: 8px;">
-                  <el-option v-for="item in teacherVoiceprintList" :key="item.id" :label="item.name" :value="item.id">
-                  </el-option>
-                </el-select>
-                <div class="ca_tvb_itemHead" @click.stop="addNewTeacherVoiceprintBtn()"
-                  style="width: 200px; box-sizing: border-box">
-                  <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
-                    <path d="M5.33337 2H6.66671V10H5.33337V2Z" fill="#3681FC" />
-                    <path d="M10 5.33301V6.66634H2V5.33301H10Z" fill="#3681FC" />
-                  </svg>
-                  添加声纹
+            <template v-if="recorderProvider === 'microsoft'">
+              <div class="ca-b-o-h-l-select" style="color: #3681fc">
+                <div style="cursor: pointer" class="ca-b-o-h-s-l-text" @click.stop="languageShow = !languageShow">
+                  {{ languageList.find(i => i.label == languageRadio).lang }}
+                </div>
+
+                <div class="languageList" v-click-outside="handleBlur" v-if="languageShow">
+                  <el-radio v-for="(i, index) in languageList" :key="index + 'lag'"
+                    :class="i.label == languageRadio ? 'radioBg' : ''" v-model.number="languageRadio"
+                    @input="languageShow = false" :label.Num="i.label">{{ i.lang }}</el-radio>
                 </div>
-                <!-- <div
-                  :class="['ca_tvb_item', (choseTeacherVoiceprint && choseTeacherVoiceprint.id == item.id) ? 'ca_tvb_itemActive' : '']"
-                  v-for="item in teacherVoiceprintList" :key="item.id" @click.stop="choseTeacherVoiceprintFn(item)">{{
-                    item.name }}</div> -->
               </div>
-            </div>
+              <div class="ca-b-o-h-l-btn" @click.stop="uploadRecording()" v-loading="uploadFileLoading">
+                <div class="ca-b-o-h-b-l-text">上传文件</div>
+              </div>
+            </template>
+            <template v-if="recorderProvider === 'shengyang'">
+
+              <div class="ca-b-o-h-l-btn">
+                <div class="ca-b-o-h-b-l-text" @click.stop="showTeacherVoiceprintBox = !showTeacherVoiceprintBox">
+                  教师声纹</div>
+                <div class="ca_teacherVoiceprintBox" style="cursor: default;"
+                  v-click-outside="() => showTeacherVoiceprintBox = !showTeacherVoiceprintBox"
+                  v-if="showTeacherVoiceprintBox">
+
+                  <p>选择本次使用的教师声纹</p>
+                  <el-select v-model="chosenVoiceprint" multiple placeholder="请选择" :multiple-limit="10" filterable
+                    clearable :disabled="controlsStatus === 1" style="width: 200px; padding: 0; margin-bottom: 8px;">
+                    <el-option v-for="item in teacherVoiceprintList" :key="item.id" :label="item.name" :value="item.id">
+                    </el-option>
+                  </el-select>
+                  <div class="ca_tvb_itemHead" @click.stop="onClickAddNewVoiceprint()"
+                    style="width: 200px; box-sizing: border-box">
+                    <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+                      <path d="M5.33337 2H6.66671V10H5.33337V2Z" fill="#3681FC" />
+                      <path d="M10 5.33301V6.66634H2V5.33301H10Z" fill="#3681FC" />
+                    </svg>
+                    添加声纹
+                  </div>
+                </div>
+              </div>
+            </template>
 
-            <div class="ca-b-o-h-l-btn" @click.stop="uploadRecording()" v-loading="uploadFileLoading">
-              <div class="ca-b-o-h-b-l-text">上传文件</div>
-            </div>
           </div>
           <div class="ca-b-o-h-right">
             <div class="ca-b-o-h-r-radio">
@@ -155,7 +165,7 @@
           </div>
         </div>
         <div class="ca-b-o-main">
-          <div class="ca-b-o-m-tape" v-show="controlsStatus == 0" @click.stop="recordedStart()"
+          <div class="ca-b-o-m-tape" v-show="controlsStatus == 0" @click.stop="onClickStartRecord()"
             v-loading="uploadFileLoading">
             <span class="el-icon-microphone"></span>
             <div class="ca-b-o-m-t-text">点击开始录音</div>
@@ -172,7 +182,7 @@
                 display: flex;
                 justify-content: center;
                 align-items: center;
-              " @click="recordedStart()">
+              " @click="onClickStartRecord()">
               <img style="width: 10px; height: 16px" src="../../../../assets/icon/classroomObservation/mai1.svg"
                 alt="" />
             </div>
@@ -233,13 +243,13 @@
 							alt=""
 						/> -->
             <div style="width: 100px; display: flex; justify-content: space-between">
-              <div class="lyStart" @click="stopRecorded()" v-loading="recordedForm.loading">
+              <div class="lyStart" @click="onClickPauseOrContinueRecord()" v-loading="recordedForm.loading">
                 <img style="width: 12px; height: 12px" src="@/assets/icon/classroomObservation/lyStart.svg" alt=""
                   v-if="recordedForm.status == 1" />
                 <img style="width: 12px; height: 12px" src="@/assets/icon/classroomObservation/start.png" alt=""
                   v-if="recordedForm.status == 2" />
               </div>
-              <div class="lyStart" @click="finishRecorded()" v-loading="recordedForm.loading">
+              <div class="lyStart" @click="onClickFinishRecord()" v-loading="recordedForm.loading">
                 <img style="width: 12px; height: 12px" src="@/assets/icon/classroomObservation/lyStop.svg" alt="" />
               </div>
             </div>
@@ -277,7 +287,7 @@
             "></el-progress>
         <span v-if="jobContext.status === 'paused' && jobContext.error">{{
           jobContext.error
-        }}</span>
+          }}</span>
         <div :style="{ display: 'flex' }">
           <el-button v-if="jobContext.status === 'paused'" @click="() => jobContext.restart()" icon="el-icon-video-play"
             type="primary">
@@ -303,7 +313,6 @@ import startPage from "./startPage";
 import transcription from "./transcription";
 import tape from "./tape";
 import { v4 as uuidv4 } from "uuid";
-// import Recorder from "js-audio-recorder";
 import MarkdownIt from "markdown-it";
 import EditorBar from "./wangEnduit";
 const lamejs = require("lamejs");
@@ -312,22 +321,12 @@ import _ from "lodash";
 import Papa from "papaparse";
 import addNewTeacherVoiceprintDialog from "./addNewTeacherVoiceprintDialog.vue";
 import * as Sy from '@/lib/shengyang'
-// 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---------------')
-// };
+import Recorder from 'recorder-core/recorder.mp3.min'
+
+// import { saveAs } from "file-saver";
+
+// import Recorder from 'recorder-core/recorder.wav.min'
+
 const OPTIONS_GROUP = {
   default: [
     "老师讲课",
@@ -524,7 +523,12 @@ export default {
       jobContext: null,
       showTeacherVoiceprintBox: false,
       teacherVoiceprintList: [],
-      choseTeacherVoiceprint: [],
+      chosenVoiceprint: [],
+      recorderProvider: 'shengyang',
+      shengyangContext: {
+        recorder: null,
+        ws: null,
+      },
     };
   },
   computed: {
@@ -635,149 +639,6 @@ export default {
         this.showIndexPage = true;
       }
     },
-    recordedStart() {
-      if (!this.tid) {
-        return this.$parent.addNewCourse().then(_ => {
-          this.recordedStart();
-        });
-      }
-      if (this.uploadFileLoading) return this.$message.info("请稍等...");
-      // 开始录音
-      if (this.audioUrl) {
-        this.$confirm("是否创建新的课堂并开始录音？", "提醒", {
-          confirmButtonText: "确定",
-          cancelButtonText: "取消",
-          type: "warning"
-        })
-          .then(() => {
-            this.recordedForm.status = 0;
-            this.audioUrl = "";
-            // recorder.initRecorder(); //初始化录音
-            // recorder.destroy(); // 销毁录音
-            // this.recordedStart();
-            return this.$parent.addNewCourse().then(_ => {
-              this.recordedStart();
-            });
-          })
-          .catch(e => {
-            console.log(e);
-            console.log("不顶替");
-          });
-      } else if (this.controlsStatus != 1 && this.recordedForm.status == 0) {
-        let iiframe = this.$refs["iiframe"];
-        iiframe.contentWindow.window.document.getElementById(
-          "languageOptions"
-        ).selectedIndex = this.languageRadio;
-        iiframe.contentWindow.testdoContinuousPronunciationAssessment();
-        this.controlsStatus = 1;
-        this.recordedForm.status = 1;
-        this.$message.success("已开始录音");
-        this.recordedForm.timer = setInterval(() => {
-          this.recordedForm.timeDuration += 1;
-          this.recordedForm.time = this.updateRecordedTime({
-            duration: this.recordedForm.timeDuration
-          });
-          console.log(this.recordedForm);
-        }, 1000);
-        let flag = true;
-        this.recordedForm.textList = [];
-        this.recordedForm.timeDuration = 0;
-        this.recordedForm.startTime = 1;
-        this.recordedForm.endTime = 0;
-        this.showIndexPage = false;
-        this.pageStatus = 2;
-        // 录音开始
-        iiframe.contentWindow.onRecognizedResult = e => {
-          // let e = {
-          // 	privText:"测试测试"
-          // }
-          this.recordedForm.endTime = this.recordedForm.timeDuration;
-          if (flag) {
-            this.controlsStatus = 1;
-            this.showIndexPage = false;
-            this.pageStatus = 2;
-            this.editorBarData.type = "0";
-            flag = false;
-            this.uploadFileLoading = false;
-            this.transcriptionData.content = "";
-            this.editorBarData.content = "";
-            this.recordedForm.textList = [];
-          }
-          this.showGetTextLoading = true;
-          let privText = e.privText;
-          if (privText == undefined || privText == "undefined") return;
-          console.log("👇转译对象👇");
-          console.log(e);
-          console.log("👇转译结果👇");
-          console.log(privText);
-          const newItem = {
-            value: privText,
-            startTime: this.updateRecordedTime({
-              duration: this.recordedForm.startTime
-            }),
-            endTime: this.updateRecordedTime({
-              duration: this.recordedForm.endTime
-            }),
-            time: this.updateRecordedTime({
-              duration: this.recordedForm.endTime - this.recordedForm.startTime
-            })
-          }
-          this.recordedForm.textList.push(newItem);
-          this.recordedForm.startTime = this.recordedForm.timeDuration + 1;
-          this.transcriptionData.content += privText;
-
-          const _div = document.createElement("div");
-          _div.innerHTML = this.editorBarData.content;
-          const _rows = Array.from(_div.querySelectorAll("table tbody tr")).slice(1);
-          const newRow = document.createElement('tr')
-          newRow.innerHTML = `
-            <td>${this.recordedForm.textList.length}</td>
-            <td>${newItem.startTime}</td>
-            <td>${newItem.endTime}</td>
-            <td>${newItem.value}</td>
-            <td>${newItem.time}</td>
-            <td></td>
-            <td></td>`
-          _rows.push(newRow)
-          const _actionTypeColumn = _.get(this.actionTypesMap, ["jsonData", "default"], []);
-          this.editorBarData.content = `<table
-            border="0"
-            width="100%"
-            cellpadding="0"
-            cellspacing="0"
-            style="text-align: center"
-          >
-            <tbody>
-              <tr>
-									<th>序号</th>
-									<th>开始时间</th>
-									<th>结束时间</th>
-									<th>发言内容</th>
-									<th>时长</th>
-									<th>说话人身份</th>
-									<th>行为编码</th>
-							</tr>
-              ${_.zip(_rows, _actionTypeColumn)
-              .map(([_row, _actionType], index) => {
-                while (_row.cells.length >= 7) {
-                  _row.removeChild(_row.lastElementChild);
-                }
-                const ch = document.createElement('td');
-                ch.innerHTML = _actionType || "";
-                _row.appendChild(ch);
-                return _row.outerHTML;
-              })
-              .join("")}
-            </tbody>
-          </table>
-          `;
-        }
-      } else if ([1, 2].includes(this.recordedForm.status)) {
-        this.controlsStatus = 1;
-        this.$message.info("还在录音中");
-      }
-      // this.controlsStatus = 1;
-    },
     updateRecordedTime({ duration }) {
       // 更新currentTime，将秒数转换为时分秒格式
       let hours = Math.floor(duration / 3600);
@@ -800,215 +661,6 @@ export default {
     changeContinuousDialogue(newValue) {
       this.continuousDialogue = newValue;
     },
-    // 点击发送旁的录音
-    // tapeSubmit() {
-    // this.$message.info("发送旁的录音");
-    // this.mainBtnStatus = 0;
-    // this.pageStatus = 1;
-    // this.TapeNum = 0;
-    // },
-    async finishRecorded() {
-      if (this.recordedForm.status == 1) {
-        //正在录音时
-        let iiframe = this.$refs["iiframe"];
-        iiframe.contentWindow.window.document
-          .getElementById("scenarioStopButton")
-          .click();
-        // 录音借宿
-        iiframe.contentWindow.onSessionStopped = (s, e) => {
-          this.recordedForm.status = 3;
-          this.controlsStatus = 2;
-          this.showGetTextLoading = false;
-          this.$message.success("已结束录音");
-          clearInterval(this.recordedForm.timer);
-          console.log("结束录音👇");
-          console.log("结束录音", e);
-          this.recordedForm.audioBlob.push(e.preaudio);
-          let blob = new Blob(this.recordedForm.audioBlob, {
-            type: "audio/wav"
-          });
-          let file = new File([blob], "recordedFile.wav", {
-            type: "text/plain"
-          });
-          this.uploadFile(file, { changeText: false, flag: true });
-          iiframe.contentWindow.onSessionStopped = null;
-          iiframe.contentWindow.onRecognizedResult = null;
-        };
-      } else if (this.recordedForm.status == 2) {
-        //暂停录音时
-        this.recordedForm.status = 3;
-        this.controlsStatus = 2;
-        this.showGetTextLoading = false;
-        clearInterval(this.recordedForm.timer);
-        let blob = new Blob(this.recordedForm.audioBlob, {
-          type: "audio/wav"
-        });
-        let file = new File([blob], "recordedFile.wav", { type: "text/plain" });
-        this.uploadFile(file, { changeText: false, flag: true });
-      }
-
-      // this.uploadFileLoading = true;
-      // recorder.stop();
-      // this.$message.success("已结束录音");
-      // this.showIndexPage = false;
-      // this.pageStatus = 1;
-      // this.controlsStatus = 2;
-      // this.recordedForm.status = 3;
-      // // let file = this.convertToMp3(recorder.getWAV());
-      // const mp3Blob = recorder.getWAVBlob();
-      // let audioFile = this.dataURLtoAudio(mp3Blob, "wav");
-      // this.uploadFile(audioFile);
-      // this.uploadWavFileAndGetText(audioFile);
-    },
-    stopRecorded() {
-      if (this.recordedForm.loading) return this.$message.info("请稍等");
-      if (this.recordedForm.status == 1) {
-        //暂停
-        this.recordedForm.loading = true;
-        let iiframe = this.$refs["iiframe"];
-        iiframe.contentWindow.window.document
-          .getElementById("scenarioStopButton")
-          .click();
-        // 录音借宿
-        iiframe.contentWindow.onSessionStopped = (s, e) => {
-          this.recordedForm.status = 2;
-
-          this.$message.success("已停止录音");
-          clearInterval(this.recordedForm.timer);
-          console.log("停止录音👇");
-          console.log("停止录音", e);
-          this.recordedForm.audioBlob.push(e.preaudio);
-          iiframe.contentWindow.onSessionStopped = null;
-          iiframe.contentWindow.onRecognizedResult = null;
-          this.recordedForm.loading = false;
-        };
-        // this.recordedForm.status = 2;
-        // clearInterval(this.recordedForm.timer)
-        // this.$message.success("已暂停录音")
-      } else if (this.recordedForm.status == 2) {
-        //开始
-        this.recordedForm.loading = true;
-        let iiframe = this.$refs["iiframe"];
-        iiframe.contentWindow.window.document.getElementById(
-          "languageOptions"
-        ).selectedIndex = this.languageRadio;
-        iiframe.contentWindow.testdoContinuousPronunciationAssessment();
-        this.controlsStatus = 1;
-        this.recordedForm.status = 1;
-        this.$message.success("已开始录音");
-        this.recordedForm.loading = false;
-        this.recordedForm.timer = setInterval(() => {
-          this.recordedForm.timeDuration += 1;
-          this.recordedForm.time = this.updateRecordedTime({
-            duration: this.recordedForm.timeDuration
-          });
-        }, 1000);
-        // let flag = false;
-        // this.recordedForm.textList = [];
-        // this.recordedForm.timeDuration = 0;
-        // this.recordedForm.startTime = 1;
-        // this.recordedForm.endTime = 0;
-        // 录音开始
-        iiframe.contentWindow.onRecognizedResult = e => {
-          // let e = {
-          // 	privText:"测试测试"
-          // }
-          this.recordedForm.endTime = this.recordedForm.timeDuration;
-          // if (flag) {
-          // 	// this.controlsStatus = 1;
-          // 	this.showIndexPage = false;
-          // 	this.pageStatus = 1;
-          // 	this.editorBarData.type = "0";
-          // 	flag = false;
-          // 	this.uploadFileLoading = false;
-          // 	this.transcriptionData.content = "";
-          // 	this.editorBarData.content = "";
-          // 	this.recordedForm.textList = [];
-          // }
-          this.showGetTextLoading = true;
-          let privText = e.privText;
-          if (privText == undefined || privText == "undefined") return;
-          console.log("👇转译对象👇");
-          console.log(e);
-          console.log("👇转译结果👇");
-          console.log(privText);
-          this.recordedForm.textList.push({
-            value: privText,
-            startTime: this.updateRecordedTime({
-              duration: this.recordedForm.startTime
-            }),
-            endTime: this.updateRecordedTime({
-              duration: this.recordedForm.endTime
-            }),
-            time: this.updateRecordedTime({
-              duration: this.recordedForm.endTime - this.recordedForm.startTime
-            })
-          });
-          this.recordedForm.startTime = this.recordedForm.timeDuration + 1;
-          this.transcriptionData.content += privText;
-
-          const _div = document.createElement("div");
-          _div.innerHTML = this.editorBarData.content;
-          const _rows = Array.from(_div.querySelectorAll("table tbody tr")).slice(1);
-          const newRow = document.createElement('tr')
-          newRow.innerHTML = `
-            <td>${this.recordedForm.textList.length}</td>
-            <td>${newItem.startTime}</td>
-            <td>${newItem.endTime}</td>
-            <td>${newItem.value}</td>
-            <td>${newItem.time}</td>
-            <td></td>
-            <td></td>`
-          _rows.push(newRow)
-          const _actionTypeColumn = _.get(this.actionTypesMap, ["jsonData", "default"], []);
-          this.editorBarData.content = `<table
-            border="0"
-            width="100%"
-            cellpadding="0"
-            cellspacing="0"
-            style="text-align: center"
-          >
-            <tbody>
-              <tr>
-									<th>序号</th>
-									<th>开始时间</th>
-									<th>结束时间</th>
-									<th>发言内容</th>
-									<th>时长</th>
-									<th>说话人身份</th>
-									<th>行为编码</th>
-							</tr>
-              ${_.zip(_rows, _actionTypeColumn)
-              .map(([_row, _actionType], index) => {
-                while (_row.cells.length >= 7) {
-                  _row.removeChild(_row.lastElementChild);
-                }
-                const ch = document.createElement('td');
-                ch.innerHTML = _actionType || "";
-                _row.appendChild(ch);
-                return _row.outerHTML;
-              })
-              .join("")}
-            </tbody>
-          </table>
-          `;
-        };
-        // this.$message.success("已开始录音")
-        // this.recordedForm.timer = setInterval(() => {
-        // this.recordedForm.timeDuration+=1,
-        // this.recordedForm.time = this.updateRecordedTime({duration:this.recordedForm.timeDuration});
-        // }, 1000);
-      }
-      // if (!recorder.ispause) {
-      // 	recorder.pause();
-      // 	this.recordedForm.status = 2;
-      // 	this.$message.warning("已暂停录音");
-      // } else {
-      // 	recorder.resume();
-      // 	this.recordedForm.status = 1;
-      // 	this.$message.success("已继续录音");
-      // }
-    },
     changeAudioUrl(newValue) {
       if (!newValue) return;
       this.audioUrl = newValue;
@@ -2410,8 +2062,10 @@ ${JSON.stringify(_list)}
       const div = document.createElement('div')
       div.innerHTML = value
       const table = div.querySelector('table')
-      const rows = Array.from(table.querySelectorAll(`tbody tr`)).slice(1);
-      this.actionTypesMap.jsonData.default = rows.map(row => _.get(row, ['cells', 6, 'textContent'], ''))
+      if (table) {
+        const rows = Array.from(table.querySelectorAll(`tbody tr`)).slice(1);
+        this.actionTypesMap.jsonData.default = rows.map(row => _.get(row, ['cells', 6, 'textContent'], ''))
+      }
 
       this.editorBarData.content = value
     },
@@ -2472,13 +2126,447 @@ ${JSON.stringify(_list)}
         view.setUint8(offset + i, string.charCodeAt(i));
       }
     },
-    addNewTeacherVoiceprintBtn() {
+    onClickAddNewVoiceprint() {
       this.showTeacherVoiceprintBox = false;
       this.$refs.addNewTeacherVoiceprintDialogRef.open();
     },
     async loadVoiceprints() {
-      this.teacherVoiceprintList = await Sy.getVoiceprints({userId: this.$route.query["userid"], organizeId: this.$route.query['org']})
+      this.teacherVoiceprintList = await Sy.getVoiceprints({ userId: this.$route.query["userid"], organizeId: this.$route.query['org'] })
+    },
+    onClickStartRecord() {
+      if (!this.tid) {
+        return this.$parent.addNewCourse().then(_ => {
+          this.onClickStartRecord();
+        });
+      }
+      if (this.uploadFileLoading) return this.$message.info("请稍等...");
+      // 开始录音
+      if (this.audioUrl) {
+        this.$confirm("是否创建新的课堂并开始录音？", "提醒", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        })
+          .then(() => {
+            this.recordedForm.status = 0;
+            this.audioUrl = "";
+            // recorder.initRecorder(); //初始化录音
+            // recorder.destroy(); // 销毁录音
+            // this.onClickStartRecord();
+            return this.$parent.addNewCourse().then(_ => {
+              this.onClickStartRecord();
+            });
+          })
+          .catch(e => {
+            console.log(e);
+            console.log("不顶替");
+          });
+      } else if (this.controlsStatus != 1 && this.recordedForm.status == 0) {
+        this.controlsStatus = 1;
+        this.recordedForm.status = 1;
+        this.$message.success("已开始录音");
+        this.recordedForm.timer = setInterval(() => {
+          this.recordedForm.timeDuration += 1;
+          this.recordedForm.time = this.updateRecordedTime({
+            duration: this.recordedForm.timeDuration
+          });
+          // console.log(this.recordedForm);
+        }, 1000);
+        this.recordedForm.textList = [];
+        this.recordedForm.timeDuration = 0;
+        this.recordedForm.startTime = 1;
+        this.recordedForm.endTime = 0;
+        this.showIndexPage = false;
+        this.pageStatus = 2;
+
+        switch (this.recorderProvider) {
+          case 'microsoft':
+            this.onStartRecordWithMicrosoft()
+            break;
+          case 'shengyang':
+            this.onStartRecordWithShengyang()
+            break;
+          default:
+            break;
+        }
+      } else if ([1, 2].includes(this.recordedForm.status)) {
+        this.controlsStatus = 1;
+        this.$message.info("还在录音中");
+      }
+      // this.controlsStatus = 1;
+    },
+    onClickPauseOrContinueRecord() {
+      if (this.recordedForm.loading) return this.$message.info("请稍等");
+      if (this.recordedForm.status == 1) {
+        //暂停
+        this.recordedForm.loading = true;
+        clearInterval(this.recordedForm.timer);
+
+        switch (this.recorderProvider) {
+          case 'microsoft':
+            this.onPauseRecordWithMicrosoft().then(() => {
+              this.recordedForm.loading = false;
+            })
+            break;
+          case 'shengyang':
+            this.onPauseRecordWithShengyang().then(() => {
+              this.recordedForm.status = 2;
+              this.$message.success("已停止录音");
+              this.recordedForm.loading = false;
+            })
+            break;
+          default:
+            break;
+        }
+
+      } else if (this.recordedForm.status == 2) {
+        //开始
+        this.recordedForm.loading = true;
+        this.controlsStatus = 1;
+        this.recordedForm.status = 1;
+        this.$message.success("已开始录音");
+        this.recordedForm.loading = false;
+        this.recordedForm.timer = setInterval(() => {
+          this.recordedForm.timeDuration += 1;
+          this.recordedForm.time = this.updateRecordedTime({
+            duration: this.recordedForm.timeDuration
+          });
+        }, 1000);
+
+        switch (this.recorderProvider) {
+          case 'microsoft':
+            this.onContinueRecordWithMicrosoft()
+            break;
+          case 'shengyang':
+            this.onContinueRecordWithShengyang()
+            break;
+          default:
+            break;
+        }
+      }
+    },
+    async onClickFinishRecord() {
+      clearInterval(this.recordedForm.timer);
+      switch (this.recorderProvider) {
+        case 'microsoft':
+          this.onFinishRecordWithMicrosoft()
+          break;
+        case 'shengyang':
+          this.onFinishRecordWithShengyang()
+          break;
+        default:
+          break;
+      }
+    },
+    onRecordAddLine(newItem) {
+      const _div = document.createElement("div");
+      _div.innerHTML = this.editorBarData.content;
+      const _rows = Array.from(_div.querySelectorAll("table tbody tr")).slice(1);
+      const newRow = document.createElement('tr')
+      newRow.innerHTML = `
+            <td>${this.recordedForm.textList.length}</td>
+            <td>${newItem.startTime}</td>
+            <td>${newItem.endTime}</td>
+            <td>${newItem.value}</td>
+            <td>${newItem.time}</td>
+            <td>${newItem.role}</td>
+            <td></td>`
+      _rows.push(newRow)
+      const _actionTypeColumn = _.get(this.actionTypesMap, ["jsonData", "default"], []);
+      this.editorBarData.content = `<table
+            border="0"
+            width="100%"
+            cellpadding="0"
+            cellspacing="0"
+            style="text-align: center"
+          >
+            <tbody>
+              <tr>
+									<th>序号</th>
+									<th>开始时间</th>
+									<th>结束时间</th>
+									<th>发言内容</th>
+									<th>时长</th>
+									<th>说话人身份</th>
+									<th>行为编码</th>
+							</tr>
+              ${_.zip(_rows, _actionTypeColumn)
+          .map(([_row, _actionType], index) => {
+            while (_row.cells.length >= 7) {
+              _row.removeChild(_row.lastElementChild);
+            }
+            const ch = document.createElement('td');
+            ch.innerHTML = _actionType || "";
+            _row.appendChild(ch);
+            return _row.outerHTML;
+          })
+          .join("")}
+            </tbody>
+          </table>
+          `;
+    },
+    // ============ start 微软录音转译
+    onStartRecordWithMicrosoft() {
+      let iiframe = this.$refs["iiframe"];
+      iiframe.contentWindow.window.document.getElementById(
+        "languageOptions"
+      ).selectedIndex = this.languageRadio;
+      iiframe.contentWindow.testdoContinuousPronunciationAssessment();
+      // 录音开始
+      let flag = true;
+      iiframe.contentWindow.onRecognizedResult = e => {
+        // let e = {
+        // 	privText:"测试测试"
+        // }
+        this.recordedForm.endTime = this.recordedForm.timeDuration;
+        if (flag) {
+          this.controlsStatus = 1;
+          this.showIndexPage = false;
+          this.pageStatus = 2;
+          this.editorBarData.type = "0";
+          flag = false;
+          this.uploadFileLoading = false;
+          this.transcriptionData.content = "";
+          this.editorBarData.content = "";
+          this.recordedForm.textList = [];
+        }
+        this.showGetTextLoading = true;
+        let privText = e.privText;
+        if (privText == undefined || privText == "undefined") return;
+        console.log("👇转译对象👇");
+        console.log(e);
+        console.log("👇转译结果👇");
+        console.log(privText);
+        const newItem = {
+          value: privText,
+          role: '',
+          startTime: this.updateRecordedTime({
+            duration: this.recordedForm.startTime
+          }),
+          endTime: this.updateRecordedTime({
+            duration: this.recordedForm.endTime
+          }),
+          time: this.updateRecordedTime({
+            duration: this.recordedForm.endTime - this.recordedForm.startTime
+          })
+        }
+        this.recordedForm.textList.push(newItem);
+        this.recordedForm.startTime = this.recordedForm.timeDuration + 1;
+        this.transcriptionData.content += privText;
+        this.onRecordAddLine(newItem)
+      }
+    },
+    async onPauseRecordWithMicrosoft() {
+      let _resolve
+      const p = new Promise(resolve => _resolve = resolve)
+      let iiframe = this.$refs["iiframe"];
+      iiframe.contentWindow.window.document
+        .getElementById("scenarioStopButton")
+        .click();
+      // 录音借宿
+      iiframe.contentWindow.onSessionStopped = (s, e) => {
+        this.recordedForm.status = 2;
+        this.$message.success("已停止录音");
+        console.log("停止录音👇");
+        console.log("停止录音", e);
+        this.recordedForm.audioBlob.push(e.preaudio);
+        iiframe.contentWindow.onSessionStopped = null;
+        iiframe.contentWindow.onRecognizedResult = null;
+        _resolve()
+      };
+      return p
+    },
+    onContinueRecordWithMicrosoft() {
+      let iiframe = this.$refs["iiframe"];
+      iiframe.contentWindow.window.document.getElementById(
+        "languageOptions"
+      ).selectedIndex = this.languageRadio;
+      iiframe.contentWindow.testdoContinuousPronunciationAssessment();
+      // 录音开始
+      iiframe.contentWindow.onRecognizedResult = e => {
+        this.recordedForm.endTime = this.recordedForm.timeDuration;
+        this.showGetTextLoading = true;
+        let privText = e.privText;
+        if (privText == undefined || privText == "undefined") return;
+        console.log("👇转译对象👇");
+        console.log(e);
+        console.log("👇转译结果👇");
+        console.log(privText);
+        const newItem = {
+          value: privText,
+          role: '',
+          startTime: this.updateRecordedTime({
+            duration: this.recordedForm.startTime
+          }),
+          endTime: this.updateRecordedTime({
+            duration: this.recordedForm.endTime
+          }),
+          time: this.updateRecordedTime({
+            duration: this.recordedForm.endTime - this.recordedForm.startTime
+          })
+        }
+        this.recordedForm.textList.push(newItem);
+        this.recordedForm.startTime = this.recordedForm.timeDuration + 1;
+        this.transcriptionData.content += privText;
+        this.onRecordAddLine(newItem)
+      };
+    },
+    onFinishRecordWithMicrosoft() {
+      if (this.recordedForm.status == 1) {
+        //正在录音时
+        let iiframe = this.$refs["iiframe"];
+        iiframe.contentWindow.window.document
+          .getElementById("scenarioStopButton")
+          .click();
+        // 录音借宿
+        iiframe.contentWindow.onSessionStopped = (s, e) => {
+          this.recordedForm.status = 3;
+          this.controlsStatus = 2;
+          this.showGetTextLoading = false;
+          this.$message.success("已结束录音");
+          console.log("结束录音👇");
+          console.log("结束录音", e);
+          this.recordedForm.audioBlob.push(e.preaudio);
+          let blob = new Blob(this.recordedForm.audioBlob, {
+            type: "audio/wav"
+          });
+          let file = new File([blob], "recordedFile.wav", {
+            type: "audio/wav"
+          });
+          this.uploadFile(file, { changeText: false, flag: true });
+          iiframe.contentWindow.onSessionStopped = null;
+          iiframe.contentWindow.onRecognizedResult = null;
+        };
+      } else if (this.recordedForm.status == 2) {
+        //暂停录音时
+        this.recordedForm.status = 3;
+        this.controlsStatus = 2;
+        this.showGetTextLoading = false;
+        let blob = new Blob(this.recordedForm.audioBlob, {
+          type: "audio/wav"
+        });
+        let file = new File([blob], "recordedFile.wav", { type: "audio/wav" });
+        this.uploadFile(file, { changeText: false, flag: true });
+      }
+    },
+    // ============ end 微软录音转译
+    // ============ start 声扬录音转译
+    onStartRecordWithShengyang() {
+      const onProcess = (buffers) => {
+        const data_8 = new Uint8Array(buffers[buffers.length - 1].buffer);
+        if (data_8.byteLength > 0 && this.shengyangContext.ws.readyState === 1) {
+          this.shengyangContext.ws.send(data_8)
+        }
+      }
+      this.shengyangContext.recorder = Recorder({
+        type: 'mp3',
+        sampleRate: 16000,
+        bitRate: 16,
+        disableEnvInFix: false,
+        onProcess
+      })
+      this.shengyangContext.recorder.open(
+        async () => {
+          this.shengyangContext.ws = await Sy.createWs({
+            enroll_infos: _.map(_.filter(this.teacherVoiceprintList, item => this.chosenVoiceprint.includes(item.id)), item => ({ feature_data: item.featureData, name: item.name }))
+          })
+          let flag = true
+          this.shengyangContext.ws.onmessage = _.throttle((e) => {
+            console.log('maxwaited')
+            this.recordedForm.endTime = this.recordedForm.timeDuration;
+            if (flag) {
+              this.controlsStatus = 1;
+              this.showIndexPage = false;
+              this.pageStatus = 2;
+              this.editorBarData.type = "0";
+              flag = false;
+              this.uploadFileLoading = false;
+              this.transcriptionData.content = "";
+              this.editorBarData.content = "";
+              this.recordedForm.textList = [];
+            }
+            this.showGetTextLoading = true;
+
+            const all = _.get(JSON.parse(e.data), ['userdata', 'results'], [])
+
+            const _actionTypeColumn = _.get(this.actionTypesMap, ["jsonData", "default"], []);
+            const secondsToHms = (seconds) => {
+              const h = Math.floor(seconds / 3600).toString().padStart(2, '0');
+              const m = Math.floor((seconds % 3600) / 60).toString().padStart(2, '0');
+              const s = Math.floor(seconds % 60).toString().padStart(2, '0');
+              return `${h}:${m}:${s}`;
+            }
+            this.editorBarData.content = `<table
+              border="0"
+              width="100%"
+              cellpadding="0"
+              cellspacing="0"
+              style="text-align: center"
+            >
+              <tbody>
+                <tr>
+                    <th>序号</th>
+                    <th>开始时间</th>
+                    <th>结束时间</th>
+                    <th>发言内容</th>
+                    <th>时长</th>
+                    <th>说话人身份</th>
+                    <th>行为编码</th>
+                </tr>
+                ${_.zip(all, _actionTypeColumn)
+                .map(([row, _actionType], index) => {
+                  return `
+                    <tr>
+                      <td>${index + 1}</td>
+                      <td>${secondsToHms(row.start_time_s)}</td>
+                      <td>${secondsToHms(row.end_time_s)}</td>
+                      <td>${row.transcription}</td>
+                      <td>${secondsToHms(row.end_time_s - row.start_time_s)}</td>
+                      <td>${row.voiceprint_profile_id}</td>
+                      <td>${_actionType || ''}</td>
+                      </tr>
+                    `
+                })
+                .join("")}
+              </tbody>
+            </table>
+            `;
+            // this.transcriptionData.content += privText;
+          }, 5000);
+          this.shengyangContext.recorder.start()
+        },
+        (msg, isUserNotAllow) => {
+          console.log('Recorder Info: isUserNotAllow', isUserNotAllow, msg)
+        }
+      )
+    },
+    async onPauseRecordWithShengyang() {
+      this.shengyangContext.recorder.pause()
+    },
+    onContinueRecordWithShengyang() {
+      this.shengyangContext.recorder.resume()
+    },
+    onFinishRecordWithShengyang() {
+      this.shengyangContext.recorder.stop(
+        async (blob, duration, mime) => {
+          this.recordedForm.status = 3;
+          this.controlsStatus = 2;
+          this.showGetTextLoading = false;
+          this.$message.success("已结束录音");
+          const file = new File([blob], `recorded_${Date.now()}.mp3`, { type: mime });
+          this.uploadFile(file, { changeText: false, flag: true });
+        },
+        (errMsg) => {
+          this.$message.error(errMsg)
+        },
+        true
+      )
+      this.shengyangContext.ws.close()
+      this.shengyangContext.recorder = null
+      this.shengyangContext.ws = null
+      // TODO
     },
+    // ============ end 声扬录音转译
   },
   mounted() {
     this.loadVoiceprints()

src/lib/shengyang.js

@@ -47,25 +47,20 @@ export async function getVoiceprints({ userId, organizeId }) {
       hwMac: organizeId
     }
   }).then(res => res.json())
-  console.log('fuck: ',res)
   if (!_.get(res, ['FunctionResponse'])) {
     throw new Error('获取声纹列表失败')
   }
   return JSON.parse(res.FunctionResponse)
 }
 
-export function createWs({ enroll_infos }) {
+export async function createWs({ enroll_infos }) {
   // 创建一个WebSocket实例
 
   const ws = new WebSocket(
     'wss://conference.voiceaitech.com/api/convoice/streaming'
   );
-  // this.select_man_list.forEach(item => {
-  //   enroll_infos.push({
-  //     name: item.name,
-  //     feature_data: item.feature_data
-  //   })
-  // })
+  let _resolve
+  // const p = new Promise(resolve => _resolve = resolve)
   ws.onopen = () => {
     const data = {
       eventName: 'start',
@@ -74,13 +69,21 @@ export function createWs({ enroll_infos }) {
       convoiceInfo: {
         options: 2,
         hotwords: [
+          {
+            weight: 5,
+            hotword: '上课',
+          },
           // TODO
         ],
         enroll_infos,
       },
     };
     ws.send(JSON.stringify(data));
+    // setTimeout(() => {
+    //   _resolve()
+    // }, 3000)
   };
+  // await p
   // 处理来自服务器的消息
   // ws.onmessage = (e) => {
   //   const res = JSON.parse(e.data);