pbl-teacher-table/src/components/pages/aiAddCourse/record.vue

<template>
    <div class="record_box">
        <div class="ca-b-o-main">
            <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>
            </div>
            <div class="ca-b-o-m-tapeTwo" v-show="controlsStatus == 2" v-loading="uploadFileLoading">
                <mini-audio v-if="audioUrl" :audio-source="audioUrl" class="audio_class"></mini-audio>
                <div style="
                width: 32px;
                height: 32px;
                margin-left: 20px;
                cursor: pointer;
                background-color: #3681fc;
                border-radius: 50%;
                display: flex;
                justify-content: center;
                align-items: center;
              " @click="onClickStartRecord()">
                    <img style="width: 10px; height: 16px" src="../../../assets/icon/classroomObservation/mai1.svg"
                        alt="" />
                </div>
            </div>
            <div class="ca-b-o-m-TapeArea" v-show="controlsStatus == 1" v-loading="uploadFileLoading">
                <div class="ca-b-o-m-i-left">
                    <img style="height: 120%" src="@/assets/icon/classroomObservation/isTape.svg" alt="" />
                    <div>
                        <div v-if="recordedForm.status == 1" style="color: #ee3e3e">
                            录音中...
                        </div>
                        <div v-if="recordedForm.status == 2" style="color: #6b798e">
                            已暂停...
                        </div>
                        <span>{{ recordedForm.time }}</span>
                    </div>
                </div>
                <div style="width: 100px; display: flex; justify-content: space-between">
                    <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="onClickFinishRecord()" v-loading="recordedForm.loading">
                        <img style="width: 12px; height: 12px" src="@/assets/icon/classroomObservation/lyStop.svg"
                            alt="" />
                    </div>
                </div>
            </div>
        </div>
        <div class="text_box">
            <textarea :disabled="recordedForm.status == 1" ref="videoTextTextarea" rows="2" class="binfo_input binfo_textarea" style="height: 100%;" cols v-model="videoText" placeholder="等待录音中..."></textarea>
        </div>
        <iframe allow="camera *; microphone *;display-capture;midi;encrypted-media;"
            src="https://beta.cloud.cocorobo.cn/browser/public/index.html" ref="iiframe" v-show="false"></iframe>
    </div>
</template>

<script>
export default {
    data() {
        return {
            videoText: "",
            recorderProvider: "microsoft",//shengyang
            uploadFileLoading: false,
            controlsStatus: 0,  //0--点击开始录音  1--录音中   2--录音完毕预览  3--文字输入
            audioUrl: "",
            languageRadio: 2, //设置选择语言
            recordedForm: {
                time: "00:00:00", //时间
                status: 0, //0--未录音  1--正在录音  2--暂停  3--录音结束
                timer: null,
                timeDuration: 0,
                audioBlob: [],
                startTime: 0,
                endTime: 0,
                textList: [],
                loading: false
            },
            progressData: {
                uploadLoading: false,
                value: 0
            },
        }
    },
    methods: {
        updateRecordedTime({ duration }) {
            // 更新currentTime，将秒数转换为时分秒格式
            let hours = Math.floor(duration / 3600);
            let minutes = Math.floor((duration % 3600) / 60);
            let seconds = Math.floor(duration % 60);
            // this.recordedForm.time = `${hours.toString().padStart(2, "0")}:${minutes
            // 	.toString()
            // 	.padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
            return `${hours
                .toString()
                .padStart(2, "0")}:${minutes
                    .toString()
                    .padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
        },
        onClickStartRecord() {
            if (this.uploadFileLoading) return this.$message.info("请稍等...");
            // 开始录音
            if (this.audioUrl) {
                this.$confirm("是否删掉此音频并开始录音？", "提醒", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning"
                })
                    .then(() => {
                        this.recordedForm.status = 0;
                        this.audioUrl = "";
                        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.onStartRecordWithMicrosoft();

                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("还在录音中");
            }
        },
        // ============ 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;
                    flag = false;
                    this.uploadFileLoading = false;
                }
                let privText = e.privText;
                if (privText == undefined || privText == "undefined") return;
                console.log("👇转译对象👇");
                console.log(e);
                console.log("👇转译结果👇");
                console.log(privText);
                this.recordedForm.startTime = this.recordedForm.timeDuration + 1;
                this.videoText += privText;
                // 将textarea滚动到最底部
                this.$nextTick(() => {
                    this.$refs.videoTextTextarea.scrollTop = this.$refs.videoTextTextarea.scrollHeight;
                });
            };
        },
        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;
        },
        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;
                }
            }
        },
        onClickFinishRecord() {
            clearInterval(this.recordedForm.timer);
            switch (this.recorderProvider) {
                case "microsoft":
                    this.onFinishRecordWithMicrosoft();
                    break;
                case "shengyang":
                    // this.onFinishRecordWithShengyang();
                    break;
                default:
                    break;
            }
        },
        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 });
            }
        },
        uploadFile(file, { changeText = true, flag = true }) {
            var credentials = {
                accessKeyId: "AKIATLPEDU37QV5CHLMH",
                secretAccessKey: "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"
            }; //秘钥形式的登录上传
            window.AWS.config.update(credentials);
            window.AWS.config.region = "cn-northwest-1"; //设置区域

            var bucket = new window.AWS.S3({ params: { Bucket: "ccrb" } }); //选择桶
            var _this = this;

            if (file) {
                // this.loading = true;
                this.progressData.uploadLoading = true;
                this.progressData.value = 0;
                var params = {
                    Key:
                        file.name.split(".")[0] +
                        new Date().getTime() +
                        "." +
                        file.name.split(".")[file.name.split(".").length - 1],
                    ContentType: file.type,
                    Body: file,
                    "Access-Control-Allow-Credentials": "*",
                    ACL: "public-read"
                }; //key可以设置为桶的相抵路径，Body为文件， ACL最好要设置
                var options = {
                    partSize: 2048 * 1024 * 1024,
                    queueSize: 2,
                    leavePartsOnError: true
                };
                bucket
                    .upload(params, options)
                    .on("httpUploadProgress", function (evt) {
                        //这里可以写进度条
                        _this.progressData.value = parseInt((evt.loaded * 100) / evt.total);
                        // console.log("Uploaded : " + parseInt((evt.loaded * 80) / evt.total) + '%');
                    })
                    .send(function (err, data) {
                        if (err) {
                            _this.$message.error("上传失败");
                            _this.uploadFileLoading = false;
                            _this.loading = false;
                            _this.progressData.uploadLoading = false;
                        } else {
                            // 判断是不是音频文件
                            const audioRegex = /\.(mp3|wav|ogg|flac|m4a)$/i;
                            const txtRegex = /\.(txt|csv)$/i;
                            const otherRegex = /\.(pdf|xlsx|doc|docx)$/i;{

                            console.log(data.Location);
                            if (audioRegex.test(data.Location)) {
                                _this.loading = false;
                                _this.recordedForm.audioBlob = [];
                                _this.recordedForm.time = "00:00:00";
                                _this.recordedForm.timeDuration = 0;
                                _this.progressData.uploadLoading = false;
                                _this.recordedForm.textList = [];
                                _this.changeAudioUrl(data.Location)
                            }
                        }
                    }
                });
            }
        },
        changeAudioUrl(newValue) {
            if (!newValue) return;
            this.audioUrl = newValue;
            if (![1, 2].includes(this.pageStatus)) this.pageStatus = 1;
            this.controlsStatus = 2;
        },
    },
}
</script>

<style scoped>
.record_box {
    width: 100%;
    height: 500px;
    position: relative;
}

.ca-b-o-main {
    width: calc(100% - 20px);
    height: 50px;
    margin: 10px auto;
    border-radius: 5px;
    transition: 0.3s;
    position: relative;
}

.ca-b-o-main:hover {
    box-shadow: 0 5px 5px 5px #e1e8eb;
}

.ca-b-o-m-tape {
    width: 100%;
    height: 100%;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: #3681fc;
    border-radius: 16px;
    background-color: white;
    box-shadow: 0 5px 5px 5px #e6eaeb;
    transition: 0.3s;
}

.ca-b-o-m-tapeTwo {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    color: #3681fc;
    box-sizing: border-box;
    padding: 0 20px;
    border-radius: 16px;
    background-color: white;
    box-shadow: 0 5px 5px 5px #e6eaeb;
    transition: 0.3s;
}

.ca-b-o-m-tapeTwo>>>.vueAudioBetter {
    width: 90%;
}

.ca-b-o-m-tape>span {
    margin-right: 10px;
    font-size: 22px;
}

.ca-b-o-m-tape:hover {
    color: #1467ee;
}

.ca-b-o-m-inputAre {
    width: 100%;
    min-height: 100%;
    height: auto;
    display: flex;
    align-items: flex-end;
    border-radius: 16px;
    background-color: white;
    box-shadow: 0 5px 5px 5px #e6eaeb;
    transition: 0.3s;
    position: absolute;
    bottom: 0;
}

.ca-b-o-m-TapeArea {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    border-radius: 16px;
    background-color: #f0f2f5;
    box-shadow: 0 5px 5px 5px #e6eaeb;
    transition: 0.3s;
    align-items: center;
    padding-right: 20px;
    box-sizing: border-box;
}

.ca-b-o-m-i-left {
    display: flex;
    align-items: center;
}

.ca-b-o-m-i-left>div>div {
    color: #ee3e3e;
    font-weight: bold;
}

.ca-b-o-m-i-left>div>span {
    font-size: 14px;
    margin-top: 5px;
}

.ca-b-o-m-i-left>img {
    margin-left: 10px;
    border-radius: 50%;
    margin-right: 20px;
}

.ca-b-o-m-left {
    flex: 1;
    height: auto;
    min-height: 64px;
    display: flex;
    /* justify-content: center; */
    align-items: center;
    box-sizing: border-box;
    padding-left: 20px;
}

.ca-b-o-m-left>textarea {
    resize: none;
    min-height: 50px;
    margin: 7px 0;
    max-height: 500px;
    width: 100%;
    font-size: 18px;
    border: none;
    outline: none;
    resize: none;
    overflow: auto;
}

.ca-b-o-m-right {
    width: 100px;
    min-width: 80px;
    height: 64px;
    max-height: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10px;
}

#myTextarea::-webkit-input-placeholder {
    /* Chrome, Opera, Safari */
    font-size: 14px;
    /* 修改placeholder字体大小 */
    color: grey;
    /* 修改placeholder文字颜色 */
}

#myTextarea:-moz-placeholder {
    /* Firefox 18- */
    font-size: 14px;
    /* 修改placeholder字体大小 */
    color: grey;
    /* 修改placeholder文字颜色 */
    opacity: 1;
    /* 修复Firefox的透明度问题 */
}

#myTextarea::-moz-placeholder {
    /* Firefox 19+ */
    font-size: 14px;
    /* 修改placeholder字体大小 */
    color: grey;
    /* 修改placeholder文字颜色 */
    opacity: 1;
    /* 修复Firefox的透明度问题 */
}

#myTextarea:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    font-size: 14px;
    /* 修改placeholder字体大小 */
    color: grey;
    /* 修改placeholder文字颜色 */
}

/* .ca-b-o-m-right > span {
	width: 24px;
	height: 24px;
	background: url("../../../../assets/icon/classroomObservation/tapeIng.png")
		no-repeat;
	background-size: 100% 100%;
	cursor: pointer;
	margin-right: 10px;
} */

.ca-b-o-m-right>div {
    width: 52px;
    height: 30px;

    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    font-size: 14px;
    border-radius: 5px;
    background-color: #1467ee;
    margin-right: 10px;
    cursor: pointer;
}

.ca-b-o-m-r-dsiableBtn {
    /* 禁止手势 */
    cursor: not-allowed !important;
    background-color: #aeccfe !important;
}

.lyStart {
    width: 38px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    border-radius: 5px;
    cursor: pointer;
}

.ca_b_o_m_roleList {
    position: absolute;
    left: 0;
    width: 100%;
    height: auto;
    max-height: calc(100vh - 230px);
    margin-bottom: 70px;
    overflow: auto;
    background-color: white;
    border-radius: 10px;
    box-sizing: border-box;
    padding: 15px;
}

.ca_b_o_m_rl_item {
    width: 100%;
    height: auto;
    margin-bottom: 15px;
    background-color: #f3f7fd;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.3s;
    box-sizing: border-box;
    padding: 10px;
}

.ca_b_o_m_rl_itemActive {
    background-color: #c3ddfa;
}

.ca_b_o_m_rl_i_left {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right: 15px;
}

.ca_b-o_m_rl_i_top {
    display: flex;
}

.ca_b-o_m_rl_i_top>div {
    margin-left: 10px;
}

.ca_b-o_m_rl_i_top>div>span {
    font-size: 14px;
    margin-top: 5px;
    color: #6b798e;
}

.ca_b-o_m_rl_i_bottom {
    margin-top: 10px;
    width: 90%;
    overflow: hidden;
    display: block;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ca-top>>>.editorBar {
    height: 100%;
    position: relative;
    max-height: calc(100vh - 300px);
}

.ca-top>>>.editorBar .text {
    height: calc(100% - 42px);
    max-height: calc(100% - 42px);
    overflow: auto;
}

.chatAreaLoading {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
}

.cal_box {
    width: 300px;
    height: 150px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 0 4px 4px #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    box-sizing: border-box;
    padding: 20px;
}

.cal_box>div:nth-child(1) {
    margin-bottom: 10px;
    font-size: 18px;
    display: flex;
    align-items: center;
}

.cal_box>div:nth-child(1)>img {
    width: 30px;
    height: 30px;
    margin-right: 10px;
}

.cal_box>>>.el-progress-bar__innerText {
    color: #fff !important;
}

.text_box{
    width: calc(100% - 20px);
    margin: 0 auto;
    height: calc(100% - 75px);
}

.binfo_input {
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  display: block;
  min-width: 0;
  outline: none;
  box-sizing: border-box;
  background: none;
  border: none;
  border-radius: 4px;
  background: #fff;
  font-size: 16px;
  resize: none;
  font-family: "Microsoft YaHei";
  min-height: 48px;
  /* border: 1px solid #3682fc00; */
  border: 1.5px solid #cad1dc;
}

.binfo_textarea {
  border: 1.5px solid #cad1dc;
  font-size: 16px;
  resize: none;
  /* background: #f6f6f6; */
  font-family: "Microsoft YaHei";
}

.binfo_input:focus-visible {
  border: 1.5px solid #3681fc !important;
}

.binfo_textarea::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 6px;
  /*高宽分别对应横竖滚动条的尺寸*/
  height: 6px;
}

/*定义滚动条轨道 内阴影+圆角*/
.binfo_textarea::-webkit-scrollbar-track {
  border-radius: 10px;
  background-color: #eee;
}

/*定义滑块 内阴影+圆角*/
.binfo_textarea::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
  background-color: rgba(0, 0, 0, 0.1);
}

.audio_class {
  /* width: 100% !important; */
  /* height: 100% !important; */
  background: #ccc !important;
  margin: 0 !important;
}

.audio_class >>> .slider .process {
  background: #000;
}
</style>