|
|
@@ -0,0 +1,2501 @@
|
|
|
+<!-- -->
|
|
|
+<template>
|
|
|
+ <div :class="['voicefull', bgIndex == 0 ? 'bg1' : 'bg2']" v-loading="loading">
|
|
|
+ <template v-if="sentList">
|
|
|
+ <div class="voicefull-top">
|
|
|
+ <!--
|
|
|
+ @mouseover="setTopShow(true)"
|
|
|
+ @mouseleave="setTopShow(false)"
|
|
|
+ -->
|
|
|
+ <div
|
|
|
+ :class="[isTopShow ? 'voicefull-top-show' : 'voicefull-top-hidden']"
|
|
|
+ >
|
|
|
+ <div class="top-left">
|
|
|
+ <!-- <div :class="['select-bg', bgIndex == 1 ? 'select-bg-blue' : '']">
|
|
|
+ <div :class="['bg-green-box', bgIndex == 1 ? 'active' : '']">
|
|
|
+ <span
|
|
|
+ :class="['bg-green', bgIndex == 1 ? 'active' : '']"
|
|
|
+ @click="changeBg(1)"
|
|
|
+ ></span>
|
|
|
+ </div>
|
|
|
+ <div :class="['bg-white-box', bgIndex == 0 ? 'active' : '']">
|
|
|
+ <span
|
|
|
+ :class="['bg-white', bgIndex == 0 ? 'active' : '']"
|
|
|
+ @click="changeBg(0)"
|
|
|
+ ></span>
|
|
|
+ </div>
|
|
|
+ </div> -->
|
|
|
+ <div
|
|
|
+ :class="[
|
|
|
+ 'set-fontSize',
|
|
|
+ bgIndex == 1 ? 'set-fontSize-green' : '',
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ <template v-if="hzSize >= 34">
|
|
|
+ <span
|
|
|
+ :class="[
|
|
|
+ 'font-jian-black',
|
|
|
+ bgIndex == 1 ? 'font-jian-yellow' : '',
|
|
|
+ ]"
|
|
|
+ @click="setFontSize('-')"
|
|
|
+ ></span>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <span
|
|
|
+ :class="[
|
|
|
+ 'font-jian-black',
|
|
|
+ bgIndex == 1
|
|
|
+ ? 'font-jian-yellow-disabled'
|
|
|
+ : 'font-jian-white-disabled',
|
|
|
+ ]"
|
|
|
+ ></span>
|
|
|
+ </template>
|
|
|
+ <span
|
|
|
+ :class="[
|
|
|
+ 'font-img-black',
|
|
|
+ bgIndex == 1 ? 'font-img-yellow' : '',
|
|
|
+ ]"
|
|
|
+ ></span>
|
|
|
+ <template v-if="hzSize <= 76">
|
|
|
+ <span
|
|
|
+ :class="[
|
|
|
+ 'font-jia-black',
|
|
|
+ bgIndex == 1 ? 'font-jia-yellow' : '',
|
|
|
+ ]"
|
|
|
+ @click="setFontSize('+')"
|
|
|
+ ></span>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <span
|
|
|
+ :class="[
|
|
|
+ 'font-jia-black',
|
|
|
+ bgIndex == 1
|
|
|
+ ? 'font-jia-yellow-disabled'
|
|
|
+ : 'font-jia-white-disabled',
|
|
|
+ ]"
|
|
|
+ ></span>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']"
|
|
|
+ @click="changeStatus('isKeyboard')"
|
|
|
+ title="键盘控制开启后，可用方向键控制翻页，空格键播放暂停，回车键录音"
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ :class="[
|
|
|
+ 'keyboard-icon',
|
|
|
+ !isKeyboard ? 'disabled' : '',
|
|
|
+ isKeyboard && bgIndex == 1 ? 'keyboard-icon-yellow' : '',
|
|
|
+ ]"
|
|
|
+ ></span>
|
|
|
+ </div>
|
|
|
+ <div class="top-middle">
|
|
|
+ <!-- <template v-if="mp3">
|
|
|
+ <AudioLineSentence
|
|
|
+ :key="'sent' + curSentIndex"
|
|
|
+ :mp3="mp3"
|
|
|
+ :getCurTime="getCurTime"
|
|
|
+ ref="audioLineSent"
|
|
|
+ :audioId="'artPraAudioId' + curSentIndex"
|
|
|
+ :stopAudio="stopAudio"
|
|
|
+ :width="120"
|
|
|
+ :hideSlider="true"
|
|
|
+ :bg="bg"
|
|
|
+ :ed="ed"
|
|
|
+ :curTime="curTime"
|
|
|
+ :maxTime="maxTime"
|
|
|
+ :bgIndex="bgIndex"
|
|
|
+ :isRepeat="isRepeat"
|
|
|
+ :isAuto="isAuto"
|
|
|
+ @playChange="playChange"
|
|
|
+ @rollSentence="rollSentence"
|
|
|
+ />
|
|
|
+ </template> -->
|
|
|
+ <!-- <div
|
|
|
+ :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']"
|
|
|
+ @click="setStatus"
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ :class="[
|
|
|
+ 'repeat-icon',
|
|
|
+ !isRepeat && !isAuto ? 'disabled' : '',
|
|
|
+ !isRepeat && isAuto ? 'auto-icon' : '',
|
|
|
+ isRepeat && bgIndex == 1 ? 'repeat-icon-yellow' : '',
|
|
|
+ !isRepeat && isAuto && bgIndex == 1
|
|
|
+ ? 'auto-icon-yellow'
|
|
|
+ : '',
|
|
|
+ ]"
|
|
|
+ ></span>
|
|
|
+ </div> -->
|
|
|
+ <div
|
|
|
+ :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']"
|
|
|
+ @click="changePinyin"
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ :class="[
|
|
|
+ 'pinyin-icon',
|
|
|
+ !config.isShowPY ? 'disabled' : '',
|
|
|
+ config.isShowPY && bgIndex == 1 ? 'pinyin-icon-yellow' : '',
|
|
|
+ ]"
|
|
|
+ ></span>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']"
|
|
|
+ @click="changeEN"
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ :class="[
|
|
|
+ 'en-icon',
|
|
|
+ !enwords ? 'disabled' : '',
|
|
|
+ !config.isShowEN ? 'disabled' : '',
|
|
|
+ config.isShowEN && bgIndex == 1 ? 'en-icon-yellow' : '',
|
|
|
+ ]"
|
|
|
+ ></span>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']"
|
|
|
+ @click="handleColl"
|
|
|
+ title="点击收藏后可在“个人中心”-“我的收藏”查看"
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ :class="[
|
|
|
+ 'coll-icon',
|
|
|
+ !isCollArr[curSentIndex] ? 'disabled' : '',
|
|
|
+ isCollArr[curSentIndex] && bgIndex == 1
|
|
|
+ ? 'coll-icon-yellow'
|
|
|
+ : '',
|
|
|
+ ]"
|
|
|
+ ></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div
|
|
|
+ :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']"
|
|
|
+ @click="exitFullScreen"
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ :class="['close-icon', bgIndex == 1 ? 'close-icon-white' : '']"
|
|
|
+ ></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="voicefull-content" v-if="item">
|
|
|
+ <div
|
|
|
+ class="vc-box"
|
|
|
+ @mousemove="showPrevNext(true, 'isShowLeft')"
|
|
|
+ @mouseleave="showPrevNext(false, 'isShowLeft')"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ :class="[
|
|
|
+ 'vc-left vc-left-grey',
|
|
|
+ isShowLeft && bgIndex == 0 ? 'vc-left-black' : '',
|
|
|
+ isShowLeft && bgIndex == 1 ? 'vc-left-white' : '',
|
|
|
+ curSentIndex == 0 ? 'hidden' : '',
|
|
|
+ ]"
|
|
|
+ @click="prevSentence"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ <div class="vc-main">
|
|
|
+ <div class="NNPE-words-box">
|
|
|
+ <div
|
|
|
+ class="NNPE-words"
|
|
|
+ v-for="(pItem, pIndex) in item"
|
|
|
+ :key="'wordsList' + pIndex"
|
|
|
+ :class="[
|
|
|
+ pItem.chs != '“' && pItem.wordIndex == 0
|
|
|
+ ? 'textLeft'
|
|
|
+ : 'textCenter',
|
|
|
+ pItem.chs == '“' ? 'textRight' : '',
|
|
|
+ ]"
|
|
|
+ @dblclick="showWordDetail($event, pItem)"
|
|
|
+ @click="playWord(pItem)"
|
|
|
+ >
|
|
|
+ <template v-if="!pItem.width">
|
|
|
+ <template v-if="pItem.isShow">
|
|
|
+ <template
|
|
|
+ v-if="
|
|
|
+ item[pIndex + 1] &&
|
|
|
+ item[pIndex + 1].chs &&
|
|
|
+ chsFhList.indexOf(item[pIndex + 1].chs) > -1
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <span class="NNPE-words-box">
|
|
|
+ <template v-if="curQue.pyPosition == 'top'">
|
|
|
+ <span
|
|
|
+ v-if="config.isShowPY"
|
|
|
+ class="NNPE-pinyin"
|
|
|
+ :class="[
|
|
|
+ pItem.className ? pItem.className : '',
|
|
|
+ noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
|
|
|
+ bgIndex == 1 ? 'font-white' : '',
|
|
|
+ ]"
|
|
|
+ :style="'font-size:' + pySize + 'px'"
|
|
|
+ >{{ pItem.pinyin }}</span
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ <span
|
|
|
+ class="NNPE-chs"
|
|
|
+ :class="[
|
|
|
+ pItem.padding && config.isShowPY ? 'padding' : '',
|
|
|
+ curQue.pyPosition == 'top' ? 'bottom' : '',
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ <template>
|
|
|
+ <span
|
|
|
+ v-for="(wItem, wIndex) in pItem.leg"
|
|
|
+ :key="'ci' + wIndex + pIndex"
|
|
|
+ :class="[
|
|
|
+ isPlaying &&
|
|
|
+ pItem.timeList &&
|
|
|
+ pItem.timeList[wIndex] &&
|
|
|
+ curTime >= pItem.timeList[wIndex].wordBg &&
|
|
|
+ curQue.wordTime &&
|
|
|
+ curQue.wordTime[curSentIndex] &&
|
|
|
+ curTime <= curQue.wordTime[curSentIndex].ed
|
|
|
+ ? bgIndex == 0
|
|
|
+ ? 'active'
|
|
|
+ : 'active-yellow'
|
|
|
+ : '',
|
|
|
+ bgIndex == 1 ? 'font-white' : '',
|
|
|
+ bgIndex == 0 && wordIndex == pItem.wordIndex
|
|
|
+ ? 'wordActive'
|
|
|
+ : '',
|
|
|
+ bgIndex == 1 && wordIndex == pItem.wordIndex
|
|
|
+ ? 'wordActive-blue'
|
|
|
+ : '',
|
|
|
+ ]"
|
|
|
+ :style="'font-size:' + hzSize + 'px'"
|
|
|
+ >{{ pItem.chs[wIndex] }}</span
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </span>
|
|
|
+ <template v-if="curQue.pyPosition == 'bottom'">
|
|
|
+ <span
|
|
|
+ v-if="config.isShowPY"
|
|
|
+ class="NNPE-pinyin bottom"
|
|
|
+ :class="[
|
|
|
+ pItem.className ? pItem.className : '',
|
|
|
+ noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
|
|
|
+ bgIndex == 1 ? 'font-white' : '',
|
|
|
+ ]"
|
|
|
+ :style="'font-size:' + pySize + 'px'"
|
|
|
+ >{{ pItem.pinyin }}</span
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </span>
|
|
|
+ <span class="NNPE-words-box">
|
|
|
+ <template v-if="curQue.pyPosition == 'top'">
|
|
|
+ <span
|
|
|
+ v-if="config.isShowPY"
|
|
|
+ :class="[
|
|
|
+ 'NNPE-pinyin',
|
|
|
+ noFont.indexOf(item[pIndex + 1].pinyin) > -1
|
|
|
+ ? 'noFont'
|
|
|
+ : '',
|
|
|
+ bgIndex == 1 ? 'font-white' : '',
|
|
|
+ ]"
|
|
|
+ :style="{ fontSize: pySize + 'px', textAlign: left }"
|
|
|
+ >{{ item[pIndex + 1].pinyin }}</span
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ <span
|
|
|
+ :class="[
|
|
|
+ 'NNPE-chs',
|
|
|
+ curQue.pyPosition == 'top' ? 'bottom' : '',
|
|
|
+ ]"
|
|
|
+ :style="{ fontSize: hzSize + 'px', textAlign: left }"
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ :class="[
|
|
|
+ isPlaying &&
|
|
|
+ pItem.timeList[pItem.leg - 1] &&
|
|
|
+ curTime >= pItem.timeList[pItem.leg - 1].wordBg &&
|
|
|
+ curQue.wordTime &&
|
|
|
+ curQue.wordTime[curSentIndex] &&
|
|
|
+ curTime <= curQue.wordTime[curSentIndex].ed
|
|
|
+ ? bgIndex == 0
|
|
|
+ ? 'active'
|
|
|
+ : 'active-yellow'
|
|
|
+ : '',
|
|
|
+ bgIndex == 1 ? 'font-white' : '',
|
|
|
+ ]"
|
|
|
+ :style="{ fontSize: pySize + 'px' }"
|
|
|
+ >{{ item[pIndex + 1].chs }}</span
|
|
|
+ >
|
|
|
+ </span>
|
|
|
+ <template v-if="curQue.pyPosition == 'bottom'">
|
|
|
+ <span
|
|
|
+ v-if="config.isShowPY"
|
|
|
+ :class="[
|
|
|
+ 'NNPE-pinyin',
|
|
|
+ noFont.indexOf(item[pIndex + 1].pinyin) > -1
|
|
|
+ ? 'noFont'
|
|
|
+ : '',
|
|
|
+ bgIndex == 1 ? 'font-white' : '',
|
|
|
+ 'bottom',
|
|
|
+ ]"
|
|
|
+ :style="{ fontSize: pySize + 'px', textAlign: left }"
|
|
|
+ >{{ item[pIndex + 1].pinyin }}</span
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </span>
|
|
|
+ <span
|
|
|
+ class="NNPE-words-box"
|
|
|
+ v-if="
|
|
|
+ item[pIndex + 2] &&
|
|
|
+ item[pIndex + 2].chs &&
|
|
|
+ chsFhList.indexOf(item[pIndex + 2].chs) > -1
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <template v-if="curQue.pyPosition == 'top'">
|
|
|
+ <span
|
|
|
+ v-if="config.isShowPY"
|
|
|
+ :class="[
|
|
|
+ 'NNPE-pinyin',
|
|
|
+ noFont.indexOf(item[pIndex + 2].pinyin) > -1
|
|
|
+ ? 'noFont'
|
|
|
+ : '',
|
|
|
+ bgIndex == 1 ? 'font-white' : '',
|
|
|
+ ]"
|
|
|
+ :style="{ fontSize: pySize + 'px', textAlign: left }"
|
|
|
+ >{{ item[pIndex + 2].pinyin }}</span
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ <span
|
|
|
+ :class="[
|
|
|
+ 'NNPE-chs',
|
|
|
+ curQue.pyPosition == 'top' ? 'bottom' : '',
|
|
|
+ ]"
|
|
|
+ :style="{ fontSize: hzSize + 'px', textAlign: left }"
|
|
|
+ >
|
|
|
+ <span
|
|
|
+ :class="[
|
|
|
+ isPlaying &&
|
|
|
+ pItem.timeList[pItem.leg - 1] &&
|
|
|
+ curTime >= pItem.timeList[pItem.leg - 1].wordBg &&
|
|
|
+ curQue.wordTime &&
|
|
|
+ curQue.wordTime[curSentIndex] &&
|
|
|
+ curTime <= curQue.wordTime[curSentIndex].ed
|
|
|
+ ? bgIndex == 0
|
|
|
+ ? 'active'
|
|
|
+ : 'active-yellow'
|
|
|
+ : '',
|
|
|
+ bgIndex == 1 ? 'font-white' : '',
|
|
|
+ ]"
|
|
|
+ :style="{ fontSize: pySize + 'px' }"
|
|
|
+ >{{ item[pIndex + 2].chs }}</span
|
|
|
+ >
|
|
|
+ </span>
|
|
|
+ <template v-if="curQue.pyPosition == 'bottom'">
|
|
|
+ <span
|
|
|
+ v-if="config.isShowPY"
|
|
|
+ :class="[
|
|
|
+ 'NNPE-pinyin',
|
|
|
+ noFont.indexOf(item[pIndex + 2].pinyin) > -1
|
|
|
+ ? 'noFont'
|
|
|
+ : '',
|
|
|
+ bgIndex == 1 ? 'font-white' : '',
|
|
|
+ 'bottom',
|
|
|
+ ]"
|
|
|
+ :style="{ fontSize: pySize + 'px', textAlign: left }"
|
|
|
+ >{{ item[pIndex + 2].pinyin }}</span
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </span>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <template v-if="curQue.pyPosition == 'top'">
|
|
|
+ <template v-if="NumberList.indexOf(pItem.pinyin) < 0">
|
|
|
+ <span
|
|
|
+ v-if="config.isShowPY"
|
|
|
+ class="NNPE-pinyin"
|
|
|
+ :class="[
|
|
|
+ pItem.chs != '“' && pItem.padding ? 'padding' : '',
|
|
|
+ pItem.className ? pItem.className : '',
|
|
|
+ noFont.indexOf(pItem.pinyin) > -1 ? 'noFont' : '',
|
|
|
+ bgIndex == 1 ? 'font-white' : '',
|
|
|
+ ]"
|
|
|
+ :style="{ fontSize: pySize + 'px' }"
|
|
|
+ >{{ pItem.pinyin }}</span
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ <span
|
|
|
+ v-if="pItem.chs != '#'"
|
|
|
+ class="NNPE-chs"
|
|
|
+ :class="[
|
|
|
+ pItem.chs != '“' && pItem.padding && config.isShowPY
|
|
|
+ ? 'padding'
|
|
|
+ : '',
|
|
|
+ curQue.pyPosition == 'top' ? 'bottom' : '',
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ <template>
|
|
|
+ <span
|
|
|
+ v-for="(wItem, wIndex) in pItem.leg"
|
|
|
+ :key="'ci' + wIndex + pIndex + curSentIndex"
|
|
|
+ :class="[
|
|
|
+ isPlaying &&
|
|
|
+ pItem.timeList &&
|
|
|
+ pItem.timeList[wIndex] &&
|
|
|
+ curTime >= pItem.timeList[wIndex].wordBg &&
|
|
|
+ curQue.wordTime &&
|
|
|
+ curQue.wordTime[curSentIndex] &&
|
|
|
+ curTime <= curQue.wordTime[curSentIndex].ed
|
|
|
+ ? bgIndex == 0
|
|
|
+ ? 'active'
|
|
|
+ : 'active-yellow'
|
|
|
+ : '',
|
|
|
+ bgIndex == 1 ? 'font-white' : '',
|
|
|
+ bgIndex == 0 && wordIndex == pItem.wordIndex
|
|
|
+ ? 'wordActive'
|
|
|
+ : '',
|
|
|
+ bgIndex == 1 && wordIndex == pItem.wordIndex
|
|
|
+ ? 'wordActive-blue'
|
|
|
+ : '',
|
|
|
+ ]"
|
|
|
+ :style="{ fontSize: hzSize + 'px' }"
|
|
|
+ >{{ pItem.chs[wIndex] }}</span
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </span>
|
|
|
+ <template v-if="curQue.pyPosition == 'bottom'">
|
|
|
+ <template v-if="NumberList.indexOf(pItem.pinyin) < 0">
|
|
|
+ <span
|
|
|
+ v-if="config.isShowPY"
|
|
|
+ class="NNPE-pinyin bottom"
|
|
|
+ :class="[
|
|
|
+ pItem.chs != '“' && pItem.padding ? 'padding' : '',
|
|
|
+ pItem.className ? pItem.className : '',
|
|
|
+ bgIndex == 1 ? 'font-white' : '',
|
|
|
+ ]"
|
|
|
+ :style="{ fontSize: pySize + 'px' }"
|
|
|
+ >{{ pItem.pinyin }}</span
|
|
|
+ >
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <span
|
|
|
+ :style="{
|
|
|
+ height: pItem.height + 'px',
|
|
|
+ width: pItem.width + 'px',
|
|
|
+ }"
|
|
|
+ ></span>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div style="clear: both; overflow: hidden"></div>
|
|
|
+
|
|
|
+ <div
|
|
|
+ v-if="enwords && config.isShowEN"
|
|
|
+ :class="['enwords', bgIndex == 1 ? 'enwords-green' : '']"
|
|
|
+ :style="{ fontSize: enSize + 'px' }"
|
|
|
+ >
|
|
|
+ {{ enwords }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ class="vc-box-right"
|
|
|
+ @mousemove="showPrevNext(true, 'isShowRight')"
|
|
|
+ @mouseleave="showPrevNext(false, 'isShowRight')"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ :class="[
|
|
|
+ 'vc-left vc-right-grey',
|
|
|
+ isShowRight && bgIndex == 0 ? 'vc-right-black' : '',
|
|
|
+ isShowRight && bgIndex == 1 ? 'vc-right-white' : '',
|
|
|
+ curSentIndex == sentList.length - 1 ? 'hidden' : '',
|
|
|
+ ]"
|
|
|
+ @click="nextSentence"
|
|
|
+ ></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="waveform-wrapper">
|
|
|
+ <div class="big" @click="selepaly('yp')">
|
|
|
+ <div
|
|
|
+ :class="[playList.indexOf('yp') != -1 ? 'play_erji' : 'erji']"
|
|
|
+ v-if="LYstatus != '未开始'"
|
|
|
+ >
|
|
|
+ <template v-if="playList.indexOf('yp') != -1">
|
|
|
+ <img src="../../../assets/NPC/qp-erji-sele.png" alt="" />
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <img src="../../../assets/NPC/qp-erji.png" alt="" />
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <div class="big_dv2">
|
|
|
+ <div id="waveform_big" ref="waveform_big" />
|
|
|
+ <div id="timeline" ref="timeline"></div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- <template v-show="startLyShow"> -->
|
|
|
+ <!-- <div id="waveform_ly" ref="waveform_ly" />
|
|
|
+ <div id="timeline_ly" ref="timeline_ly"></div> -->
|
|
|
+ <div class="big ly" @click="selepaly('ly')">
|
|
|
+ <div
|
|
|
+ :class="[playList.indexOf('ly') != -1 ? 'play_erji' : 'erji']"
|
|
|
+ v-if="LYstatus != '未开始'"
|
|
|
+ >
|
|
|
+ <template v-if="playList.indexOf('ly') != -1">
|
|
|
+ <img src="../../../assets/NPC/qp-erji-sele.png" alt="" />
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <img src="../../../assets/NPC/qp-erji.png" alt="" />
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <div class="big_dv2">
|
|
|
+ <canvas id="canvas" style="display: none; height: 134px"></canvas>
|
|
|
+ <canvas
|
|
|
+ id="playChart"
|
|
|
+ style="display: none; height: 134px"
|
|
|
+ ></canvas>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- </template> -->
|
|
|
+
|
|
|
+ <div id="waveform" ref="waveform" style="margin-top: 20px" />
|
|
|
+ </div>
|
|
|
+ <div class="voicefull-bottom">
|
|
|
+ <!--
|
|
|
+ @mouseover="setBottomShow(true)"
|
|
|
+ @mouseleave="setBottomShow(false)"
|
|
|
+ -->
|
|
|
+ <div
|
|
|
+ :class="[
|
|
|
+ isBottomShow ? 'voicefull-bottom-show' : 'voicefull-bottom-hidden',
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ :class="[
|
|
|
+ 'bottom-left',
|
|
|
+ TaskModel == 'ANSWER' ? 'bottom-left-margin' : '',
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ <!-- <Soundrecorddiff
|
|
|
+ ref="Soundrecorddiff"
|
|
|
+ @handleWav="handleWav"
|
|
|
+ @getWavblob="getWavblob"
|
|
|
+ @handleParentPlay="handleParentPlay"
|
|
|
+ @sentPause="sentPause"
|
|
|
+ @getRerordStatus="getRerordStatus"
|
|
|
+ @getMicrophoneStatus="getMicrophoneStatus"
|
|
|
+ @getPlayStatus="getPlayStatus"
|
|
|
+ :bgIndex="bgIndex"
|
|
|
+ :TaskModel="TaskModel"
|
|
|
+ :answerRecordList="
|
|
|
+ curQue.Bookanswer.practiceModel[curSentIndex] &&
|
|
|
+ curQue.Bookanswer.practiceModel[curSentIndex].recordList
|
|
|
+ "
|
|
|
+ :tmIndex="curSentIndex"
|
|
|
+ :key="'Soundrecorddiff' + curSentIndex"
|
|
|
+ />
|
|
|
+ <div
|
|
|
+ :class="['compare-box', bgIndex == 1 ? 'compare-box-white' : '']"
|
|
|
+ v-if="isShowCompare"
|
|
|
+ >
|
|
|
+ <Audio-compare
|
|
|
+ :bgIndex="bgIndex"
|
|
|
+ type="full"
|
|
|
+ :themeColor="themeColor"
|
|
|
+ :index="curSentIndex"
|
|
|
+ :sentIndex="curSentIndex"
|
|
|
+ :url="curQue.mp3_list[0].id"
|
|
|
+ :bg="bg"
|
|
|
+ :ed="ed"
|
|
|
+ :wavblob="wavblob"
|
|
|
+ :getCurTime="getCurCompareTime"
|
|
|
+ :sentPause="sentPause"
|
|
|
+ :isRecord="isRecord"
|
|
|
+ :handleChangeStopAudio="handleChangeStopAudio"
|
|
|
+ :getPlayStatus="getPlayStatus"
|
|
|
+ :key="'mp3Compare' + curSentIndex"
|
|
|
+ />
|
|
|
+ </div> -->
|
|
|
+ <template v-if="LYstatus == '未开始' || LYstatus == '已结束'">
|
|
|
+ <img
|
|
|
+ @click="startLY"
|
|
|
+ src="../../../assets/NPC/qp-ly-start.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <template v-else-if="LYstatus == '录音中'">
|
|
|
+ <img
|
|
|
+ @click="stopLY"
|
|
|
+ src="../../../assets/NPC/qp-ly-stop.png"
|
|
|
+ alt=""
|
|
|
+ style="margin-right: 20px"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ @click="endLY"
|
|
|
+ src="../../../assets/NPC/qp-ly-end.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <template v-else-if="LYstatus == '暂停中'">
|
|
|
+ <img
|
|
|
+ @click="goonLY"
|
|
|
+ src="../../../assets/NPC/qp-ly-jx.png"
|
|
|
+ alt=""
|
|
|
+ style="margin-right: 20px"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ @click="endLY"
|
|
|
+ src="../../../assets/NPC/qp-ly-end.png"
|
|
|
+ alt=""
|
|
|
+ />
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <span @click="playLY"> 播放录音 </span>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <div class="cuttentime">{{ ShowcurentTime }}</div>
|
|
|
+ <div class="operate">
|
|
|
+ <img
|
|
|
+ v-show="isPlaying"
|
|
|
+ @click="playMusic"
|
|
|
+ src="../../../assets/NPC/pause-fill.png"
|
|
|
+ alt=""
|
|
|
+ style="width: 16px; height: 24px"
|
|
|
+ />
|
|
|
+ <img
|
|
|
+ v-show="!isPlaying"
|
|
|
+ @click="playMusic"
|
|
|
+ src="../../../assets/NPC/play-fill.png"
|
|
|
+ alt=""
|
|
|
+ style="width: 21px; height: 24px"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ :class="[
|
|
|
+ 'page-count',
|
|
|
+ bgIndex == 0 ? 'page-count-white' : 'page-count-green',
|
|
|
+ ]"
|
|
|
+ >
|
|
|
+ {{ curSentIndex + 1 }}/{{ sentList.length }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <template v-if="isShow">
|
|
|
+ <div
|
|
|
+ ref="wordcard"
|
|
|
+ class="NNPE-wordDetail"
|
|
|
+ :style="{ top: top + 'px', left: left + 'px' }"
|
|
|
+ >
|
|
|
+ <Wordcard
|
|
|
+ :word="word"
|
|
|
+ :changeWordCard="changeWordCard"
|
|
|
+ :themeColor="themeColor"
|
|
|
+ :currentTreeID="currentTreeID"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <div class="word-play-audio" v-if="isWordPlay">
|
|
|
+ <AudioLineSentence
|
|
|
+ :mp3="mp3"
|
|
|
+ :getCurTime="getCurWordTime"
|
|
|
+ ref="audioLineWord"
|
|
|
+ :audioId="'artPraAudioId' + curSentIndex + wordIndex"
|
|
|
+ :stopAudio="stopAudio"
|
|
|
+ :width="120"
|
|
|
+ :hideSlider="false"
|
|
|
+ :bg="wordbg"
|
|
|
+ :ed="worded"
|
|
|
+ :maxTime="wordMaxTime"
|
|
|
+ :bgIndex="bgIndex"
|
|
|
+ :isRepeat="isRepeat"
|
|
|
+ :wordPlay="true"
|
|
|
+ @changePlayStatus="changePlayStatus"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import AudioLineSentence from "./AudioLineSentence.vue";
|
|
|
+import Soundrecorddiff from "./Soundrecorddiff.vue";
|
|
|
+import AudioCompare from "./AudioCompare.vue";
|
|
|
+import Wordcard from "./components/Wordcard.vue";
|
|
|
+import { LearnWebSI, WebFileDownload } from "../../../api/ajax";
|
|
|
+import Recorder from "js-audio-recorder"; // 录音插件
|
|
|
+
|
|
|
+import WaveSurfer from "wavesurfer.js";
|
|
|
+import Timeline from "wavesurfer.js/dist/plugin/wavesurfer.timeline.js";
|
|
|
+export default {
|
|
|
+ components: {
|
|
|
+ AudioLineSentence,
|
|
|
+ Soundrecorddiff,
|
|
|
+ AudioCompare,
|
|
|
+ Wordcard,
|
|
|
+ },
|
|
|
+ props: [
|
|
|
+ "sentList",
|
|
|
+ "sentIndex",
|
|
|
+ "mp3",
|
|
|
+ "wordTimeList",
|
|
|
+ "curQue",
|
|
|
+ "noFont",
|
|
|
+ "themeColor",
|
|
|
+ "NNPENewWordList",
|
|
|
+ "currentTreeID",
|
|
|
+ "config",
|
|
|
+ "TaskModel",
|
|
|
+ ],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ playList: [],
|
|
|
+ recorder: new Recorder({
|
|
|
+ sampleBits: 16, // 采样位数，支持 8 或 16，默认是16
|
|
|
+ sampleRate: 16000, // 采样率，支持 11025、16000、22050、24000、44100、48000，根据浏览器默认值，我的chrome是48000
|
|
|
+ numChannels: 1, // 声道，支持 1 或 2， 默认是1
|
|
|
+ compiling: true,
|
|
|
+ }),
|
|
|
+ pySize: 32,
|
|
|
+ hzSize: 48,
|
|
|
+ enSize: 24,
|
|
|
+ bgIndex: 0,
|
|
|
+ maxTime: 0,
|
|
|
+ item: null,
|
|
|
+ bg: 0,
|
|
|
+ ed: 0,
|
|
|
+ isRepeat: false,
|
|
|
+ NumberList: [
|
|
|
+ "①",
|
|
|
+ "②",
|
|
|
+ "③",
|
|
|
+ "④",
|
|
|
+ "⑤",
|
|
|
+ "⑥",
|
|
|
+ "⑦",
|
|
|
+ "⑧",
|
|
|
+ "⑨",
|
|
|
+ "⑩",
|
|
|
+ "⑪",
|
|
|
+ "⑫",
|
|
|
+ "⑬",
|
|
|
+ "⑭",
|
|
|
+ "⑮",
|
|
|
+ "⑯",
|
|
|
+ "⑰",
|
|
|
+ "⑱",
|
|
|
+ "⑲",
|
|
|
+ "⑳",
|
|
|
+ ],
|
|
|
+ chsFhList: ["，", "。", "”", "：", "》", "《", "？", "！", "；"],
|
|
|
+ enFhList: [",", ".", ";", "?", "!", ":", ">", "<"],
|
|
|
+ curTime: 0,
|
|
|
+ wavblob: null,
|
|
|
+ stopAudio: false,
|
|
|
+ isRecord: false,
|
|
|
+ isShowCompare: false,
|
|
|
+ isShowRight: false,
|
|
|
+ isShowLeft: false,
|
|
|
+ curSentIndex: 0,
|
|
|
+ oldHz: "",
|
|
|
+ hz: "",
|
|
|
+ clientY: 0,
|
|
|
+ top: 0,
|
|
|
+ left: 0,
|
|
|
+ newWordList: [],
|
|
|
+ pinyin: "",
|
|
|
+ wordIndex: -1,
|
|
|
+ isShow: false,
|
|
|
+ wordbg: 0,
|
|
|
+ worded: 0,
|
|
|
+ wordMaxTime: 0,
|
|
|
+ isWordPlay: false,
|
|
|
+ curWordTime: 0,
|
|
|
+ isPlaying: false,
|
|
|
+ isAuto: false,
|
|
|
+ key: "isRepeat",
|
|
|
+ isKeyboard: true,
|
|
|
+ isTopShow: true,
|
|
|
+ isBottomShow: true,
|
|
|
+ isRecording: false,
|
|
|
+ recordPlaying: false,
|
|
|
+ isCollArr: [],
|
|
|
+ enwords: "",
|
|
|
+ screenHeight: 0,
|
|
|
+ wavesurfer: null,
|
|
|
+ wavesurfer_big: null,
|
|
|
+ wavesurfer_ly: null,
|
|
|
+ loading: null,
|
|
|
+ timer: null,
|
|
|
+ ShowcurentTime: 0,
|
|
|
+ LYstatus: "未开始",
|
|
|
+ startLyShow: false,
|
|
|
+ //波浪图-录音
|
|
|
+ drawRecordId: null,
|
|
|
+ oCanvas: null,
|
|
|
+ ctx: null,
|
|
|
+ //波浪图-播放
|
|
|
+ drawPlayId: null,
|
|
|
+ pCanvas: null,
|
|
|
+ pCtx: null,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ // isPlaying: function () {
|
|
|
+ // let playing = false;
|
|
|
+ // if (this.$refs.audioLineSent) {
|
|
|
+ // playing = this.$refs.audioLineSent.audio.isPlaying;
|
|
|
+ // }
|
|
|
+ // console.log(playing);
|
|
|
+ // return playing;
|
|
|
+ // },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ isRecording: {
|
|
|
+ handler: function (newVal, oldVal) {
|
|
|
+ if (newVal) {
|
|
|
+ this.isBottomShow = newVal;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ deep: true,
|
|
|
+ },
|
|
|
+ recordPlaying: {
|
|
|
+ handler: function (newVal, oldVal) {
|
|
|
+ if (newVal) {
|
|
|
+ this.isBottomShow = newVal;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ deep: true,
|
|
|
+ },
|
|
|
+ sentIndex: {
|
|
|
+ handler: function (newVal, oldVal) {
|
|
|
+ this.curSentIndex = newVal;
|
|
|
+ this.getSentence();
|
|
|
+ },
|
|
|
+ deep: true,
|
|
|
+ },
|
|
|
+ hz: {
|
|
|
+ handler: function (val, oldVal) {
|
|
|
+ let _this = this;
|
|
|
+ if (val) {
|
|
|
+ _this.handleNewWords(val);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 深度观察监听
|
|
|
+ deep: true,
|
|
|
+ },
|
|
|
+ isShow: {
|
|
|
+ handler: function (val, oldVal) {
|
|
|
+ let _this = this;
|
|
|
+ if (val) {
|
|
|
+ setTimeout(() => {
|
|
|
+ _this.cardHeight = _this.$refs.wordcard.offsetHeight;
|
|
|
+ if (_this.screenHeight - _this.clientY > _this.cardHeight) {
|
|
|
+ _this.top = _this.clientY + 20;
|
|
|
+ } else {
|
|
|
+ _this.top = _this.clientY - _this.cardHeight - 30;
|
|
|
+ }
|
|
|
+ }, 50);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 深度观察监听
|
|
|
+ deep: true,
|
|
|
+ },
|
|
|
+ },
|
|
|
+ //方法集合
|
|
|
+ methods: {
|
|
|
+ selepaly(type) {
|
|
|
+ if (this.LYstatus == "未开始") {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let index = this.playList.indexOf(type);
|
|
|
+ if (index != -1) {
|
|
|
+ this.playList.splice(index, 1);
|
|
|
+ } else {
|
|
|
+ this.playList.push(type);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ startCanvas() {
|
|
|
+ //录音波浪
|
|
|
+ this.oCanvas = document.getElementById("canvas");
|
|
|
+ this.ctx = this.oCanvas.getContext("2d");
|
|
|
+ //播放波浪
|
|
|
+ this.pCanvas = document.getElementById("playChart");
|
|
|
+ this.pCtx = this.pCanvas.getContext("2d");
|
|
|
+ },
|
|
|
+ initaudioImage() {
|
|
|
+ this.loading = true;
|
|
|
+ this.wavesurfer = WaveSurfer.create({
|
|
|
+ container: this.$refs.waveform,
|
|
|
+ barWidth: 1,
|
|
|
+ progressColor: "#000000",
|
|
|
+ backend: "MediaElement",
|
|
|
+ waveColor: "#000000",
|
|
|
+ cursorColor: "#1370F6",
|
|
|
+ cursorWidth: 3,
|
|
|
+ barHeight: 0.8,
|
|
|
+ barGap: 6,
|
|
|
+ height: 44,
|
|
|
+ width: 400,
|
|
|
+ interact: false,
|
|
|
+ });
|
|
|
+ this.wavesurfer_big = WaveSurfer.create({
|
|
|
+ container: this.$refs.waveform_big,
|
|
|
+ barWidth: 1,
|
|
|
+ progressColor: "#000000",
|
|
|
+ backend: "MediaElement",
|
|
|
+ waveColor: "#000000",
|
|
|
+ cursorColor: "#1370F6",
|
|
|
+ cursorWidth: 3,
|
|
|
+ barHeight: 0.8,
|
|
|
+ barGap: 6,
|
|
|
+ height: 300,
|
|
|
+ width: 400,
|
|
|
+ interact: false,
|
|
|
+ plugins: [
|
|
|
+ Timeline.create({
|
|
|
+ container: "#timeline",
|
|
|
+ primaryColor: "#c0c0c0",
|
|
|
+ secondaryColor: "#c0c0c0",
|
|
|
+ primaryFontColor: "#c0c0c0",
|
|
|
+ secondaryFontColor: "#c0c0c0",
|
|
|
+ formatTimeCallback: this.formatTimeCallback,
|
|
|
+ timeInterval: 0.025,
|
|
|
+ primaryLabelInterval: 4,
|
|
|
+ secondaryLabelInterval: 400,
|
|
|
+ notchPercentHeight: 40,
|
|
|
+ }),
|
|
|
+ ],
|
|
|
+ });
|
|
|
+ // this.wavesurfer_ly = WaveSurfer.create({
|
|
|
+ // container: this.$refs.waveform_ly,
|
|
|
+ // barWidth: 1,
|
|
|
+ // progressColor: "#FF5C5C",
|
|
|
+ // backend: "MediaElement",
|
|
|
+ // waveColor: "#FF5C5C",
|
|
|
+ // cursorColor: "#1370F6",
|
|
|
+ // cursorWidth: 3,
|
|
|
+ // barHeight: 0.8,
|
|
|
+ // barGap: 6,
|
|
|
+ // height: 0,
|
|
|
+ // width: 400,
|
|
|
+ // interact: false,
|
|
|
+ // plugins: [
|
|
|
+ // Timeline.create({
|
|
|
+ // container: "#timeline_ly",
|
|
|
+ // primaryColor: "#c0c0c0",
|
|
|
+ // secondaryColor: "#c0c0c0",
|
|
|
+ // primaryFontColor: "#c0c0c0",
|
|
|
+ // secondaryFontColor: "#c0c0c0",
|
|
|
+ // formatTimeCallback: this.formatTimeCallback,
|
|
|
+ // timeInterval: 0.025,
|
|
|
+ // primaryLabelInterval: 4,
|
|
|
+ // secondaryLabelInterval: 400,
|
|
|
+ // notchPercentHeight: 40,
|
|
|
+ // }),
|
|
|
+ // ],
|
|
|
+ // });
|
|
|
+ let that = this;
|
|
|
+ WebFileDownload({
|
|
|
+ FileID: this.curQue.mp3_list[0].file_id,
|
|
|
+ }).then((res) => {
|
|
|
+ const objectUrl = window.URL.createObjectURL(res);
|
|
|
+ this.wavesurfer.load(objectUrl);
|
|
|
+ this.wavesurfer_big.load(objectUrl);
|
|
|
+ let start = this.bg / 1000;
|
|
|
+ let end = this.ed / 1000;
|
|
|
+ that.wavesurfer.on("ready", function (e) {
|
|
|
+ that.wavesurfer.play(start, end);
|
|
|
+ that.loading = false;
|
|
|
+ that.wavesurfer.zoom(Number(0.001));
|
|
|
+ });
|
|
|
+ that.wavesurfer_big.on("ready", function (e) {
|
|
|
+ that.wavesurfer_big.play(start, end);
|
|
|
+ that.loading = false;
|
|
|
+ that.wavesurfer_big.zoom(Number(600));
|
|
|
+ that.wavesurfer_big.setMute(true);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ that.wavesurfer.on("play", function (e) {
|
|
|
+ that.isPlaying = true;
|
|
|
+ });
|
|
|
+ that.wavesurfer.on("pause", function (e) {
|
|
|
+ that.isPlaying = false;
|
|
|
+ });
|
|
|
+ that.wavesurfer.on("click", function (e) {
|
|
|
+ console.log(e);
|
|
|
+ });
|
|
|
+ that.wavesurfer.on("audioprocess", function (e) {
|
|
|
+ that.curTime = e * 1000;
|
|
|
+ let time = e.toFixed(2);
|
|
|
+ let arr = time.split(".");
|
|
|
+ let newtime = "";
|
|
|
+ arr.forEach((item, i) => {
|
|
|
+ if (item.length == 1) {
|
|
|
+ item = "0" + item;
|
|
|
+ }
|
|
|
+ if (i == 0) {
|
|
|
+ newtime += item + ":";
|
|
|
+ } else {
|
|
|
+ newtime += item;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ that.ShowcurentTime = newtime;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ formatTimeCallback(seconds, pxPerSec) {
|
|
|
+ seconds = Number(seconds);
|
|
|
+ let minutes = Math.floor(seconds / 60);
|
|
|
+ seconds = seconds % 60;
|
|
|
+
|
|
|
+ // fill up seconds with zeroes
|
|
|
+ let secondsStr = Math.round(seconds).toString();
|
|
|
+ if (pxPerSec >= 25 * 10) {
|
|
|
+ secondsStr = seconds.toFixed(2);
|
|
|
+ } else if (pxPerSec >= 25 * 1) {
|
|
|
+ secondsStr = seconds.toFixed(1);
|
|
|
+ }
|
|
|
+
|
|
|
+ if (minutes > 0) {
|
|
|
+ if (seconds < 10) {
|
|
|
+ secondsStr = "0" + secondsStr;
|
|
|
+ }
|
|
|
+ return `${minutes}:${secondsStr}`;
|
|
|
+ }
|
|
|
+ return secondsStr;
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 绘制波浪图-录音
|
|
|
+ * */
|
|
|
+ drawRecord() {
|
|
|
+ let node = document.getElementById("waveform_big");
|
|
|
+ node.children[0].style.height = "134px";
|
|
|
+ // 用requestAnimationFrame稳定60fps绘制
|
|
|
+ this.oCanvas.style.display = "block";
|
|
|
+ this.oCanvas.style.width = "100%";
|
|
|
+ // 用requestAnimationFrame稳定60fps绘制
|
|
|
+ this.drawRecordId = requestAnimationFrame(this.drawRecord);
|
|
|
+
|
|
|
+ // 实时获取音频大小数据
|
|
|
+ let dataArray = this.recorder.getRecordAnalyseData(),
|
|
|
+ bufferLength = dataArray.length;
|
|
|
+
|
|
|
+ // 填充背景色
|
|
|
+ this.ctx.fillStyle = "#F3F3F4";
|
|
|
+ this.ctx.fillRect(0, 0, this.oCanvas.width, this.oCanvas.height);
|
|
|
+
|
|
|
+ // 设定波形绘制颜色
|
|
|
+ this.ctx.lineWidth = 2;
|
|
|
+ this.ctx.strokeStyle = "rgb(0, 0, 0)";
|
|
|
+
|
|
|
+ this.ctx.beginPath();
|
|
|
+
|
|
|
+ var sliceWidth = (this.oCanvas.width * 1.0) / bufferLength, // 一个点占多少位置，共有bufferLength个点要绘制
|
|
|
+ x = 0; // 绘制点的x轴位置
|
|
|
+
|
|
|
+ for (var i = 0; i < bufferLength; i++) {
|
|
|
+ var v = dataArray[i] / 128.0;
|
|
|
+ var y = (v * this.oCanvas.height) / 2;
|
|
|
+
|
|
|
+ if (i === 0) {
|
|
|
+ // 第一个点
|
|
|
+ this.ctx.moveTo(x, y);
|
|
|
+ } else {
|
|
|
+ // 剩余的点
|
|
|
+ this.ctx.lineTo(x, y);
|
|
|
+ }
|
|
|
+ // 依次平移，绘制所有点
|
|
|
+ x += sliceWidth;
|
|
|
+ }
|
|
|
+
|
|
|
+ this.ctx.lineTo(this.oCanvas.width, this.oCanvas.height / 2);
|
|
|
+ this.ctx.stroke();
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 绘制波浪图-播放
|
|
|
+ * */
|
|
|
+ drawPlay() {
|
|
|
+ // 用requestAnimationFrame稳定60fps绘制
|
|
|
+ this.drawPlayId = requestAnimationFrame(this.drawPlay);
|
|
|
+ this.pCanvas.style.display = "block";
|
|
|
+ this.oCanvas.style.display = "none";
|
|
|
+ this.pCanvas.style.width = "100%";
|
|
|
+
|
|
|
+ // 实时获取音频大小数据
|
|
|
+ let dataArray = this.recorder.getPlayAnalyseData(),
|
|
|
+ bufferLength = dataArray.length;
|
|
|
+
|
|
|
+ // 填充背景色
|
|
|
+ this.pCtx.fillStyle = "#F3F3F4";
|
|
|
+ this.pCtx.fillRect(0, 0, this.pCanvas.width, this.pCanvas.height);
|
|
|
+
|
|
|
+ // 设定波形绘制颜色
|
|
|
+ this.pCtx.lineWidth = 2;
|
|
|
+ this.pCtx.strokeStyle = "rgb(0, 0, 0)";
|
|
|
+
|
|
|
+ this.pCtx.beginPath();
|
|
|
+
|
|
|
+ var sliceWidth = (this.pCanvas.width * 1.0) / bufferLength, // 一个点占多少位置，共有bufferLength个点要绘制
|
|
|
+ x = 0; // 绘制点的x轴位置
|
|
|
+
|
|
|
+ for (var i = 0; i < bufferLength; i++) {
|
|
|
+ var v = dataArray[i] / 128.0;
|
|
|
+ var y = (v * this.pCanvas.height) / 2;
|
|
|
+
|
|
|
+ if (i === 0) {
|
|
|
+ // 第一个点
|
|
|
+ this.pCtx.moveTo(x, y);
|
|
|
+ } else {
|
|
|
+ // 剩余的点
|
|
|
+ this.pCtx.lineTo(x, y);
|
|
|
+ }
|
|
|
+ // 依次平移，绘制所有点
|
|
|
+ x += sliceWidth;
|
|
|
+ }
|
|
|
+
|
|
|
+ this.pCtx.lineTo(this.pCanvas.width, this.pCanvas.height / 2);
|
|
|
+ this.pCtx.stroke();
|
|
|
+ },
|
|
|
+ initLyAudioImage(url) {
|
|
|
+ this.startLyShow = true;
|
|
|
+ let node = document.getElementById("waveform_big");
|
|
|
+ node.children[0].style.height = "134px";
|
|
|
+ // let lynode = document.getElementById("waveform_ly");
|
|
|
+ // lynode.children[0].style.height = "134px";
|
|
|
+ // this.wavesurfer_ly.load(url);
|
|
|
+ // 用requestAnimationFrame稳定60fps绘制
|
|
|
+ this.oCanvas.style.height = "134px";
|
|
|
+ this.pCanvas.style.height = "134px";
|
|
|
+
|
|
|
+ this.drawRecordId = requestAnimationFrame(this.initLyAudioImage);
|
|
|
+
|
|
|
+ // 实时获取音频大小数据
|
|
|
+ let dataArray = this.recorder.getRecordAnalyseData(),
|
|
|
+ bufferLength = dataArray.length;
|
|
|
+ // 填充背景色
|
|
|
+ this.ctx.fillStyle = "rgb(200, 200, 200)";
|
|
|
+ this.ctx.fillRect(0, 0, this.oCanvas.width, this.oCanvas.height);
|
|
|
+ // 设定波形绘制颜色
|
|
|
+ this.ctx.lineWidth = 2;
|
|
|
+ this.ctx.strokeStyle = "rgb(0, 0, 0)";
|
|
|
+
|
|
|
+ this.ctx.beginPath();
|
|
|
+
|
|
|
+ var sliceWidth = (this.oCanvas.width * 1.0) / bufferLength, // 一个点占多少位置，共有bufferLength个点要绘制
|
|
|
+ x = 0; // 绘制点的x轴位置
|
|
|
+
|
|
|
+ for (var i = 0; i < bufferLength; i++) {
|
|
|
+ var v = dataArray[i] / 128.0;
|
|
|
+ var y = (v * this.oCanvas.height) / 2;
|
|
|
+
|
|
|
+ if (i === 0) {
|
|
|
+ // 第一个点
|
|
|
+ this.ctx.moveTo(x, y);
|
|
|
+ } else {
|
|
|
+ // 剩余的点
|
|
|
+ this.ctx.lineTo(x, y);
|
|
|
+ }
|
|
|
+ // 依次平移，绘制所有点
|
|
|
+ x += sliceWidth;
|
|
|
+ }
|
|
|
+
|
|
|
+ this.ctx.lineTo(this.oCanvas.width, this.oCanvas.height / 2);
|
|
|
+ this.ctx.stroke();
|
|
|
+ },
|
|
|
+ // 播放录音
|
|
|
+ playLY() {
|
|
|
+ this.recorder.play();
|
|
|
+ this.drawPlay(); //绘制波浪图
|
|
|
+ },
|
|
|
+ // 开始录音
|
|
|
+ startLY() {
|
|
|
+ this.recorder.start().then(() => {
|
|
|
+ this.drawRecord();
|
|
|
+ });
|
|
|
+ this.LYstatus = "录音中";
|
|
|
+ // let timer = setInterval(() => {
|
|
|
+ // let newData = this.recorder.getNextData();
|
|
|
+ // // let byteLength = newData[0].byteLength;
|
|
|
+ // // let buffer = new ArrayBuffer(newData.length * byteLength);
|
|
|
+ // // let dataView = new DataView(buffer);
|
|
|
+ // // // 数据合并
|
|
|
+ // // for (let i = 0, iLen = newData.length; i < iLen; ++i) {
|
|
|
+ // // for (let j = 0, jLen = newData[i].byteLength; j < jLen; ++j) {
|
|
|
+ // // dataView.setInt8(i * byteLength + j, newData[i].getInt8(j));
|
|
|
+ // // }
|
|
|
+ // // }
|
|
|
+ // if (newData.length > 0) {
|
|
|
+ // const blob = new Blob(newData);
|
|
|
+ // const objectUrl = window.URL.createObjectURL(blob);
|
|
|
+ // this.initLyAudioImage(objectUrl);
|
|
|
+ // } else {
|
|
|
+ // clearInterval(timer);
|
|
|
+ // timer = null;
|
|
|
+ // }
|
|
|
+ // }, 1000);
|
|
|
+ },
|
|
|
+ // 暂停录音
|
|
|
+ stopLY() {
|
|
|
+ this.recorder.pause();
|
|
|
+ this.LYstatus = "暂停中";
|
|
|
+ this.drawRecordId && cancelAnimationFrame(this.drawRecordId);
|
|
|
+ this.drawRecordId = null;
|
|
|
+ },
|
|
|
+ // 继续录音
|
|
|
+ goonLY() {
|
|
|
+ this.recorder.resume();
|
|
|
+ this.LYstatus = "录音中";
|
|
|
+ this.drawRecord(); //绘制波浪图
|
|
|
+ },
|
|
|
+ // 结束录音
|
|
|
+ endLY() {
|
|
|
+ this.recorder.stop();
|
|
|
+ this.LYstatus = "已结束";
|
|
|
+ this.drawRecordId && cancelAnimationFrame(this.drawRecordId);
|
|
|
+ this.drawRecordId = null;
|
|
|
+ },
|
|
|
+ setTopShow(bool) {
|
|
|
+ this.isTopShow = bool;
|
|
|
+ },
|
|
|
+ setBottomShow(bool) {
|
|
|
+ if (!this.recordPlaying && !this.isRecording) {
|
|
|
+ this.isBottomShow = bool;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getPlayStatus(bool) {
|
|
|
+ this.recordPlaying = bool;
|
|
|
+ },
|
|
|
+ setFontSize(type) {
|
|
|
+ let _this = this;
|
|
|
+ if (type == "-") {
|
|
|
+ if (_this.hzSize >= 34) {
|
|
|
+ this.hzSize = this.hzSize - 4;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ if (type == "+") {
|
|
|
+ if (_this.hzSize <= 76) {
|
|
|
+ this.hzSize = this.hzSize + 4;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ _this.pySize = parseInt(_this.hzSize / 1.5);
|
|
|
+ _this.enSize = parseInt(_this.hzSize / 2);
|
|
|
+ },
|
|
|
+ playChange(bool) {
|
|
|
+ this.isPlaying = bool;
|
|
|
+ },
|
|
|
+ handleColl() {
|
|
|
+ let _this = this;
|
|
|
+ if (_this.isCollArr[_this.curSentIndex]) {
|
|
|
+ _this.cancleColl();
|
|
|
+ } else {
|
|
|
+ _this.addColl();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //添加收藏
|
|
|
+ addColl() {
|
|
|
+ let Bookdetail = sessionStorage.getItem("Bookdetail");
|
|
|
+ if (Bookdetail) {
|
|
|
+ Bookdetail = JSON.parse(Bookdetail);
|
|
|
+ let MethodName = "order-collection_manager-AddMyCollection";
|
|
|
+ let text = "";
|
|
|
+ this.item.forEach((item) => {
|
|
|
+ if (item.chs != "#") {
|
|
|
+ text += item.chs;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ let sentence_json = {
|
|
|
+ item: JSON.stringify(this.item),
|
|
|
+ bg: this.bg,
|
|
|
+ ed: this.ed,
|
|
|
+ mp3: this.mp3,
|
|
|
+ pyPosition: this.curQue.pyPosition,
|
|
|
+ };
|
|
|
+ let data = {
|
|
|
+ goods_id: this.currentTreeID,
|
|
|
+ goods_type: 502,
|
|
|
+ goods_name: Bookdetail.name,
|
|
|
+ goods_person_name_desc: Bookdetail.description
|
|
|
+ ? Bookdetail.description
|
|
|
+ : "",
|
|
|
+ goods_picture_id: Bookdetail.picture_id ? Bookdetail.picture_id : "",
|
|
|
+ goods_price: Bookdetail.price,
|
|
|
+ sentence: {
|
|
|
+ sentence_text: text,
|
|
|
+ sentence_json: JSON.stringify(sentence_json),
|
|
|
+ },
|
|
|
+ };
|
|
|
+ LearnWebSI(MethodName, data).then((res) => {
|
|
|
+ this.$set(this.isCollArr, this.curSentIndex, true);
|
|
|
+ this.$message.success("收藏成功！");
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.$message.warning("权限不足！");
|
|
|
+ }
|
|
|
+ },
|
|
|
+ //取消收藏
|
|
|
+ cancleColl() {
|
|
|
+ let text = "";
|
|
|
+ this.item.forEach((item) => {
|
|
|
+ if (item.chs != "#") {
|
|
|
+ text += item.chs;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ let MethodName = "order-collection_manager-CancelMyGoodsCollection_WS";
|
|
|
+ let data = {
|
|
|
+ goods_type: 502,
|
|
|
+ goods_list: [
|
|
|
+ {
|
|
|
+ goods_id: this.currentTreeID, //课件的id
|
|
|
+ sentence_text: text,
|
|
|
+ },
|
|
|
+ ],
|
|
|
+ };
|
|
|
+ LearnWebSI(MethodName, data).then((res) => {
|
|
|
+ this.$set(this.isCollArr, this.curSentIndex, false);
|
|
|
+ this.$message.success("取消成功！");
|
|
|
+ });
|
|
|
+ },
|
|
|
+ //检查收藏状态
|
|
|
+ checkCollStatus() {
|
|
|
+ let text = "";
|
|
|
+ this.item.forEach((item) => {
|
|
|
+ if (item.chs != "#") {
|
|
|
+ text += item.chs;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ let MethodName = "order-collection_manager-CheckMyGoodsCollectionStatus";
|
|
|
+ let data = {
|
|
|
+ goods_type: 502,
|
|
|
+ goods_id: this.currentTreeID, //课件的id
|
|
|
+ sentence_text: text,
|
|
|
+ };
|
|
|
+ LearnWebSI(MethodName, data).then((res) => {
|
|
|
+ let collFlag = res.is_collection == "true" ? true : false;
|
|
|
+ this.$set(this.isCollArr, this.curSentIndex, collFlag);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ showPrevNext(bool, key) {
|
|
|
+ this[key] = bool;
|
|
|
+ },
|
|
|
+ prevSentence() {
|
|
|
+ let _this = this;
|
|
|
+ if (_this.curSentIndex == 0) {
|
|
|
+ _this.$message.warning("已经是第一个句子了");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ _this.curSentIndex = _this.curSentIndex - 1;
|
|
|
+ _this.getSentence();
|
|
|
+ if (_this.isAuto) {
|
|
|
+ _this.curTime = _this.bg;
|
|
|
+ _this.$refs.audioLineSent.onTimeupdateTime(_this.bg / 1000);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ nextSentence() {
|
|
|
+ if (this.curSentIndex == this.sentList.length - 1) {
|
|
|
+ this.$message.warning("已经是最后一个句子了");
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.curSentIndex = this.curSentIndex + 1;
|
|
|
+ this.getSentence();
|
|
|
+ },
|
|
|
+ rollSentence() {
|
|
|
+ if (this.curSentIndex == this.sentList.length - 1) {
|
|
|
+ this.curSentIndex = 0;
|
|
|
+ } else {
|
|
|
+ this.curSentIndex = this.curSentIndex + 1;
|
|
|
+ }
|
|
|
+ this.getSentence();
|
|
|
+ },
|
|
|
+ changeStatus(key) {
|
|
|
+ if (key == "config.isShowEN") {
|
|
|
+ if (this.enwords) {
|
|
|
+ this[key] = !this[key];
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ this[key] = !this[key];
|
|
|
+ }
|
|
|
+ },
|
|
|
+ changePinyin() {
|
|
|
+ this.$emit("changePinyin");
|
|
|
+ },
|
|
|
+ changeEN() {
|
|
|
+ this.$emit("changeEN");
|
|
|
+ },
|
|
|
+ setStatus() {
|
|
|
+ let _this = this;
|
|
|
+ if (_this.key == "isRepeat") {
|
|
|
+ if (_this.isRepeat) {
|
|
|
+ _this.isRepeat = false;
|
|
|
+ _this.isAuto = true;
|
|
|
+ _this.key = "isAuto";
|
|
|
+ } else {
|
|
|
+ _this.isRepeat = true;
|
|
|
+ _this.key = "isRepeat";
|
|
|
+ }
|
|
|
+ } else if (_this.key == "isAuto") {
|
|
|
+ if (_this.isAuto) {
|
|
|
+ _this.isRepeat = false;
|
|
|
+ _this.isAuto = false;
|
|
|
+ _this.key = "isRepeat";
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getRerordStatus(bool) {
|
|
|
+ this.isShowCompare = bool;
|
|
|
+ },
|
|
|
+ getMicrophoneStatus(bool) {
|
|
|
+ this.isRecording = bool;
|
|
|
+ },
|
|
|
+ getWavblob(wavblob) {
|
|
|
+ this.wavblob = wavblob;
|
|
|
+ },
|
|
|
+ sentPause(isRecord) {
|
|
|
+ this.isRecord = isRecord;
|
|
|
+ },
|
|
|
+ getCurTime(curTime) {
|
|
|
+ let _this = this;
|
|
|
+ if (_this.isRepeat) {
|
|
|
+ let time = curTime * 1000;
|
|
|
+ if (time > _this.ed || time < _this.bg) {
|
|
|
+ _this.curTime = _this.bg;
|
|
|
+ this.$refs.audioLineSent.onTimeupdateTime(_this.bg / 1000);
|
|
|
+ } else {
|
|
|
+ _this.curTime = curTime * 1000;
|
|
|
+ }
|
|
|
+ } else if (_this.isAuto) {
|
|
|
+ let time = curTime * 1000;
|
|
|
+
|
|
|
+ if (time > _this.ed) {
|
|
|
+ _this.rollSentence();
|
|
|
+ _this.curTime = _this.bg;
|
|
|
+ _this.$refs.audioLineSent.onTimeupdateTime(_this.bg / 1000);
|
|
|
+ } else {
|
|
|
+ _this.curTime = curTime * 1000;
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ _this.curTime = curTime * 1000;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getCurCompareTime(curTime) {
|
|
|
+ let _this = this;
|
|
|
+ _this.curTime = curTime * 1000;
|
|
|
+ },
|
|
|
+ getCurWordTime(curTime) {
|
|
|
+ let _this = this;
|
|
|
+ _this.curWordTime = curTime * 1000;
|
|
|
+ },
|
|
|
+ changeBg(bgIndex) {
|
|
|
+ this.bgIndex = bgIndex;
|
|
|
+ },
|
|
|
+ getSentence() {
|
|
|
+ let _this = this;
|
|
|
+ _this.isShowCompare =
|
|
|
+ _this.curQue.Bookanswer.practiceModel[_this.curSentIndex] &&
|
|
|
+ _this.curQue.Bookanswer.practiceModel[_this.curSentIndex].recordList &&
|
|
|
+ _this.curQue.Bookanswer.practiceModel[_this.curSentIndex].recordList
|
|
|
+ .length > 0;
|
|
|
+ _this.pauseAudio();
|
|
|
+ _this.isPlaying = false;
|
|
|
+ let item = JSON.parse(JSON.stringify(_this.sentList[_this.curSentIndex]));
|
|
|
+ if (item.sentArr) {
|
|
|
+ _this.item = item.sentArr;
|
|
|
+ _this.enwords = item.enwords;
|
|
|
+ } else {
|
|
|
+ _this.item = item;
|
|
|
+ }
|
|
|
+ _this.sentList.forEach((item) => {
|
|
|
+ this.isCollArr.push(false);
|
|
|
+ });
|
|
|
+ _this.bg = _this.curQue.wordTime[_this.curSentIndex].bg;
|
|
|
+ _this.ed = _this.curQue.wordTime[_this.curSentIndex].ed;
|
|
|
+ let maxTime = (_this.ed - _this.bg) / 1000;
|
|
|
+ if (maxTime < 1) {
|
|
|
+ _this.maxTime = 1;
|
|
|
+ } else {
|
|
|
+ _this.maxTime = maxTime;
|
|
|
+ }
|
|
|
+ _this.checkCollStatus();
|
|
|
+ },
|
|
|
+ pauseAudio() {
|
|
|
+ let audio = document.getElementsByTagName("audio");
|
|
|
+ audio.forEach((item) => {
|
|
|
+ item.pause();
|
|
|
+ });
|
|
|
+ },
|
|
|
+ exitFullScreen() {
|
|
|
+ this.pauseAudio();
|
|
|
+ this.$emit("exitFullscreen");
|
|
|
+ },
|
|
|
+ changeFullScreen() {
|
|
|
+ this.pauseAudio();
|
|
|
+ this.$emit("changeIsFull");
|
|
|
+ },
|
|
|
+ handleWav(list, tmIndex) {
|
|
|
+ tmIndex = tmIndex ? tmIndex : 0;
|
|
|
+ this.$emit("handleWav", list, tmIndex);
|
|
|
+ },
|
|
|
+ // 录音时暂停音频播放
|
|
|
+ handleParentPlay() {
|
|
|
+ this.stopAudio = true;
|
|
|
+ },
|
|
|
+ // 音频播放时改变布尔值
|
|
|
+ handleChangeStopAudio() {
|
|
|
+ this.stopAudio = false;
|
|
|
+ },
|
|
|
+ //播放音频
|
|
|
+ playWord(item) {
|
|
|
+ let _this = this;
|
|
|
+ _this.pauseAudio();
|
|
|
+ _this.isWordPlay = false;
|
|
|
+ _this.wordIndex = item.wordIndex;
|
|
|
+ setTimeout(() => {
|
|
|
+ let leg = item.timeList.length;
|
|
|
+ _this.wordbg = item.timeList[0].wordBg;
|
|
|
+ _this.worded = item.timeList[leg - 1].wordEd;
|
|
|
+ let wordMaxTime = (_this.worded - _this.wordbg) / 1000;
|
|
|
+ if (wordMaxTime < 1) {
|
|
|
+ _this.wordMaxTime = 1;
|
|
|
+ } else {
|
|
|
+ _this.wordMaxTime = wordMaxTime;
|
|
|
+ }
|
|
|
+ _this.isWordPlay = true;
|
|
|
+ }, 50);
|
|
|
+ },
|
|
|
+ changePlayStatus() {
|
|
|
+ this.isWordPlay = false;
|
|
|
+ this.wordIndex = -1;
|
|
|
+ },
|
|
|
+ showWordDetail(e, item) {
|
|
|
+ let _this = this;
|
|
|
+ if (_this.TaskModel == "ANSWER") {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (_this.chsFhList.indexOf(item.chs) > -1) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (_this.oldHz != item.chs) {
|
|
|
+ this.isShow = false;
|
|
|
+ setTimeout(() => {
|
|
|
+ _this.hz = item.chs;
|
|
|
+ _this.pinyin = item.pinyin;
|
|
|
+ _this.wordIndex = item.wordIndex;
|
|
|
+ }, 50);
|
|
|
+ }
|
|
|
+ _this.clientY = e.clientY;
|
|
|
+
|
|
|
+ let left = e.clientX;
|
|
|
+ let width = 0;
|
|
|
+ if (item.chs.length == 1 || item.chs.length == 2) {
|
|
|
+ width = 304;
|
|
|
+ } else if (item.chs.length == 3 || item.chs.length == 4) {
|
|
|
+ width = 432;
|
|
|
+ } else if (item.chs.length > 3) {
|
|
|
+ width = 560;
|
|
|
+ }
|
|
|
+ // if (left - this.bodyLeft > this.contentWidth / 2) {
|
|
|
+ // _this.left = left - width + 10;
|
|
|
+ // } else {
|
|
|
+ _this.left = left - width / 2;
|
|
|
+ //}
|
|
|
+ },
|
|
|
+ changeWordCard(isShow) {
|
|
|
+ let _this = this;
|
|
|
+ _this.isShow = isShow;
|
|
|
+ _this.oldHz = "";
|
|
|
+ _this.hz = "";
|
|
|
+ _this.wordIndex = -1;
|
|
|
+ },
|
|
|
+ // 处理分词数据
|
|
|
+ handleNewWords(val) {
|
|
|
+ let _this = this;
|
|
|
+ _this.isShow = true;
|
|
|
+ _this.word = null;
|
|
|
+
|
|
|
+ if (_this.newWordList.indexOf(val) > -1) {
|
|
|
+ for (let i = 0; i < this.NNPENewWordList.length; i++) {
|
|
|
+ let pItem = this.NNPENewWordList[i];
|
|
|
+ for (let j = 0; j < pItem.length; j++) {
|
|
|
+ let item = pItem[j];
|
|
|
+ if (item.new_word.trim() == val.trim()) {
|
|
|
+ let wordlist = val.split("");
|
|
|
+ this.word = { list: wordlist, detail: item };
|
|
|
+ break;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ let wordlist = val.split("");
|
|
|
+ let option = {
|
|
|
+ definition_list: [],
|
|
|
+ mp3_list: [],
|
|
|
+ new_word: val,
|
|
|
+ pinyin: _this.pinyin,
|
|
|
+ };
|
|
|
+ _this.word = { list: wordlist, detail: option };
|
|
|
+ }
|
|
|
+ _this.oldHz = val;
|
|
|
+ },
|
|
|
+ handleNewword() {
|
|
|
+ let NewWordList = [];
|
|
|
+ this.NNPENewWordList.forEach((item) => {
|
|
|
+ item.forEach((wItem) => {
|
|
|
+ NewWordList.push(wItem.new_word);
|
|
|
+ });
|
|
|
+ });
|
|
|
+ this.newWordList = JSON.parse(JSON.stringify(NewWordList));
|
|
|
+ },
|
|
|
+ getScreenHeight() {
|
|
|
+ this.screenHeight = window.innerHeight;
|
|
|
+ },
|
|
|
+ playMusic() {
|
|
|
+ let YPindex = this.playList.indexOf("yp");
|
|
|
+ let LYindex = this.playList.indexOf("ly");
|
|
|
+ if (YPindex != -1) {
|
|
|
+ let time = this.wavesurfer_big.getCurrentTime();
|
|
|
+ let start = this.bg / 1000;
|
|
|
+ let end = this.ed / 1000;
|
|
|
+ if (time * 1000 == this.ed) {
|
|
|
+ this.wavesurfer.play(start, end);
|
|
|
+ this.wavesurfer_big.play(start, end);
|
|
|
+ } else {
|
|
|
+ this.wavesurfer.playPause.bind(this.wavesurfer)();
|
|
|
+ this.wavesurfer_big.playPause.bind(this.wavesurfer)();
|
|
|
+ }
|
|
|
+ } else if (LYindex != -1) {
|
|
|
+ this.playLY();
|
|
|
+ } else {
|
|
|
+ let time = this.wavesurfer_big.getCurrentTime();
|
|
|
+ let start = this.bg / 1000;
|
|
|
+ let end = this.ed / 1000;
|
|
|
+ if (time * 1000 == this.ed) {
|
|
|
+ this.wavesurfer.play(start, end);
|
|
|
+ this.wavesurfer_big.play(start, end);
|
|
|
+ } else {
|
|
|
+ this.wavesurfer.playPause.bind(this.wavesurfer)();
|
|
|
+ this.wavesurfer_big.playPause.bind(this.wavesurfer)();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ //生命周期 - 创建完成（可以访问当前this实例）
|
|
|
+ created() {},
|
|
|
+ //生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
+ mounted() {
|
|
|
+ this.startCanvas();
|
|
|
+ this.initaudioImage();
|
|
|
+ let _this = this;
|
|
|
+ $(window).resize(() => {
|
|
|
+ _this.getScreenHeight();
|
|
|
+ });
|
|
|
+ _this.getScreenHeight();
|
|
|
+ document.addEventListener("keyup", function (e) {
|
|
|
+ if (_this.isKeyboard) {
|
|
|
+ if (e.keyCode == 32) {
|
|
|
+ //空格
|
|
|
+ _this.$nextTick(() => {
|
|
|
+ if (_this.$refs.audioLineSent) {
|
|
|
+ _this.$refs.audioLineSent.PlayAudio();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else if (e.keyCode == 38) {
|
|
|
+ _this.prevSentence();
|
|
|
+ } else if (e.keyCode == 40) {
|
|
|
+ _this.nextSentence();
|
|
|
+ } else if (e.keyCode == 13) {
|
|
|
+ _this.$nextTick(() => {
|
|
|
+ _this.$refs.Soundrecorddiff.microphone();
|
|
|
+ });
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ if (_this.NNPENewWordList) {
|
|
|
+ _this.handleNewword();
|
|
|
+ }
|
|
|
+ _this.curSentIndex = _this.sentIndex;
|
|
|
+ _this.getSentence();
|
|
|
+ document.addEventListener("fullscreenchange", () => {
|
|
|
+ let isFullscreen =
|
|
|
+ document.fullscreenElement ||
|
|
|
+ document.mozFullScreenElement ||
|
|
|
+ document.webkitFullscreenElement ||
|
|
|
+ document.fullScreen ||
|
|
|
+ document.mozFullScreen ||
|
|
|
+ document.webkitIsFullScreen;
|
|
|
+
|
|
|
+ if (!isFullscreen) {
|
|
|
+ _this.changeFullScreen();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ document.addEventListener("mozfullscreenchange", () => {
|
|
|
+ let isFullscreen =
|
|
|
+ document.fullscreenElement ||
|
|
|
+ document.mozFullScreenElement ||
|
|
|
+ document.webkitFullscreenElement ||
|
|
|
+ document.fullScreen ||
|
|
|
+ document.mozFullScreen ||
|
|
|
+ document.webkitIsFullScreen;
|
|
|
+
|
|
|
+ if (!isFullscreen) {
|
|
|
+ _this.changeFullScreen();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ document.addEventListener("webkitfullscreenchange", () => {
|
|
|
+ let isFullscreen =
|
|
|
+ document.fullscreenElement ||
|
|
|
+ document.mozFullScreenElement ||
|
|
|
+ document.webkitFullscreenElement ||
|
|
|
+ document.fullScreen ||
|
|
|
+ document.mozFullScreen ||
|
|
|
+ document.webkitIsFullScreen;
|
|
|
+
|
|
|
+ if (!isFullscreen) {
|
|
|
+ _this.changeFullScreen();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ document.addEventListener("msfullscreenchange", () => {
|
|
|
+ let isFullscreen =
|
|
|
+ document.fullscreenElement ||
|
|
|
+ document.mozFullScreenElement ||
|
|
|
+ document.webkitFullscreenElement ||
|
|
|
+ document.fullScreen ||
|
|
|
+ document.mozFullScreen ||
|
|
|
+ document.webkitIsFullScreen;
|
|
|
+
|
|
|
+ if (!isFullscreen) {
|
|
|
+ _this.changeFullScreen();
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ beforeCreate() {}, //生命周期 - 创建之前
|
|
|
+ beforeMount() {}, //生命周期 - 挂载之前
|
|
|
+ beforeUpdate() {}, //生命周期 - 更新之前
|
|
|
+ updated() {}, //生命周期 - 更新之后
|
|
|
+ beforeDestroy() {}, //生命周期 - 销毁之前
|
|
|
+ destroyed() {
|
|
|
+ clearInterval(this.timer);
|
|
|
+ this.timer = null;
|
|
|
+ }, //生命周期 - 销毁完成
|
|
|
+ activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang='scss' scoped>
|
|
|
+//@import url(); 引入公共css类
|
|
|
+.waveform-wrapper {
|
|
|
+ .big {
|
|
|
+ display: flex;
|
|
|
+ .big_dv2 {
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .ly {
|
|
|
+ .play_erji {
|
|
|
+ margin-top: 0;
|
|
|
+ }
|
|
|
+ .erji {
|
|
|
+ margin-top: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .play_erji {
|
|
|
+ margin-top: 16px;
|
|
|
+ width: 64px;
|
|
|
+ height: 134px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ background: #4f92f6;
|
|
|
+ img {
|
|
|
+ width: 28px;
|
|
|
+ height: 28px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .erji {
|
|
|
+ margin-top: 16px;
|
|
|
+ width: 64px;
|
|
|
+ height: 134px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ background: #ffffff;
|
|
|
+ img {
|
|
|
+ width: 28px;
|
|
|
+ height: 28px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+#waveform_big {
|
|
|
+ margin-top: 16px;
|
|
|
+ background: #f3f3f48e;
|
|
|
+}
|
|
|
+#waveform {
|
|
|
+ background: #f3f3f48e;
|
|
|
+ border-radius: 8px;
|
|
|
+ width: 92%;
|
|
|
+ margin: 0 auto;
|
|
|
+}
|
|
|
+.cuttentime {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 32px;
|
|
|
+ line-height: 150%;
|
|
|
+ color: #000000;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.operate {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ img {
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+}
|
|
|
+.voicefull {
|
|
|
+ width: 100%;
|
|
|
+ height: 100vh;
|
|
|
+ overflow: hidden;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ .NNPE-wordDetail {
|
|
|
+ position: fixed;
|
|
|
+ z-index: 9999;
|
|
|
+ }
|
|
|
+ &.bg1 {
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+ &.bg2 {
|
|
|
+ background: linear-gradient(180deg, #274533 0%, #385f45 100%);
|
|
|
+ }
|
|
|
+ &-top {
|
|
|
+ height: 136px;
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+
|
|
|
+ padding: 0 40px;
|
|
|
+
|
|
|
+ .voicefull-top-hidden {
|
|
|
+ width: 100%;
|
|
|
+ height: 136px;
|
|
|
+ visibility: hidden;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .voicefull-top-show {
|
|
|
+ width: 100%;
|
|
|
+ height: 136px;
|
|
|
+ visibility: visible;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .top-left {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .select-bg {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ width: 96px;
|
|
|
+ height: 56px;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ border-radius: 40px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ box-sizing: border-box;
|
|
|
+ margin-right: 32px;
|
|
|
+ &.select-bg-blue {
|
|
|
+ background: rgba(255, 255, 255, 0.1);
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ }
|
|
|
+ > div {
|
|
|
+ width: 36px;
|
|
|
+ height: 36px;
|
|
|
+ border-radius: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ &.bg-white-box {
|
|
|
+ background: 0 0;
|
|
|
+ margin-right: 4px;
|
|
|
+ &.active {
|
|
|
+ background: #de4444;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.bg-green-box {
|
|
|
+ background: #fff;
|
|
|
+ &.active {
|
|
|
+ background: #ffc600;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ > span {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ border-radius: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ cursor: pointer;
|
|
|
+ &.bg-white {
|
|
|
+ background: #fff;
|
|
|
+ }
|
|
|
+ &.bg-green {
|
|
|
+ background: linear-gradient(180deg, #274533 0%, #385f45 100%);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .set-fontSize {
|
|
|
+ padding: 0 20px;
|
|
|
+ height: 56px;
|
|
|
+ background: #ffffff;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ border-radius: 40px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ &-green {
|
|
|
+ background: rgba(255, 255, 255, 0.1);
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ }
|
|
|
+ > span {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ margin: 0 4px;
|
|
|
+ &.font-jian {
|
|
|
+ &-black {
|
|
|
+ background: url("../../../assets/NPC/jian-black.png") no-repeat left
|
|
|
+ top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ &-yellow {
|
|
|
+ background: url("../../../assets/NPC/jian-white.png") no-repeat left
|
|
|
+ top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ &-white-disabled {
|
|
|
+ background: url("../../../assets/NPC/jian-white-disabled.png")
|
|
|
+ no-repeat left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ &-yellow-disabled {
|
|
|
+ background: url("../../../assets/NPC/jian-yellow-disabled.png")
|
|
|
+ no-repeat left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.font-img {
|
|
|
+ &-black {
|
|
|
+ background: url("../../../assets/NPC/fontSize-black.png") no-repeat
|
|
|
+ left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ &-yellow {
|
|
|
+ background: url("../../../assets/NPC/fontSize-white.png") no-repeat
|
|
|
+ left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.font-jia {
|
|
|
+ &-black {
|
|
|
+ background: url("../../../assets/NPC/jia-black.png") no-repeat left
|
|
|
+ top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ &-yellow {
|
|
|
+ background: url("../../../assets/NPC/jia-white.png") no-repeat left
|
|
|
+ top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ &-white-disabled {
|
|
|
+ background: url("../../../assets/NPC/jia-white-disabled.png")
|
|
|
+ no-repeat left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ &-yellow-disabled {
|
|
|
+ background: url("../../../assets/NPC/jia-yellow-disabled.png")
|
|
|
+ no-repeat left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .top-middle {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ .audio-box {
|
|
|
+ width: 56px;
|
|
|
+ height: 56px;
|
|
|
+ background: #ffffff;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ border-radius: 40px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ &-green {
|
|
|
+ background: rgba(255, 255, 255, 0.1);
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .op-btn {
|
|
|
+ width: 56px;
|
|
|
+ height: 56px;
|
|
|
+ border-radius: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ cursor: pointer;
|
|
|
+ margin-left: 32px;
|
|
|
+ background: #ffffff;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ box-sizing: border-box;
|
|
|
+ &-green {
|
|
|
+ background: rgba(255, 255, 255, 0.1);
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ }
|
|
|
+ &.close-btn {
|
|
|
+ background: #274533;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ }
|
|
|
+ > span {
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ &.close-icon {
|
|
|
+ background: url("../../../assets/icon/cross-24-normal-black.png")
|
|
|
+ no-repeat left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ &-white {
|
|
|
+ background: url("../../../assets/icon/cross-24-normal-white.png")
|
|
|
+ no-repeat left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .repeat-icon {
|
|
|
+ background: url("../../../assets/icon/Repeat-24-normal-red.png") no-repeat
|
|
|
+ left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ &.disabled {
|
|
|
+ background: url("../../../assets/icon/Repeat-24-disable-Black.png")
|
|
|
+ no-repeat left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ &-yellow {
|
|
|
+ background: url("../../../assets/icon/Repeat-24-normal-yellow.png")
|
|
|
+ no-repeat left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ &.auto-icon {
|
|
|
+ background: url("../../../assets/icon/Auto-24-next-red.png") no-repeat
|
|
|
+ left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ &-yellow {
|
|
|
+ background: url("../../../assets/icon/Auto-24-next-yellow.png")
|
|
|
+ no-repeat left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pinyin-icon {
|
|
|
+ background: url("../../../assets/icon/pinyin-24-normal-red.png") no-repeat
|
|
|
+ left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ &.disabled {
|
|
|
+ background: url("../../../assets/icon/pinyin-24-disable-Black.png")
|
|
|
+ no-repeat left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ &-yellow {
|
|
|
+ background: url("../../../assets/icon/pinyin-24-normal-yellow.png")
|
|
|
+ no-repeat left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .en-icon {
|
|
|
+ background: url("../../../assets/icon/EN-24-normal-Red.png") no-repeat left
|
|
|
+ top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ &.disabled {
|
|
|
+ background: url("../../../assets/icon/EN-24-disable-Black.png") no-repeat
|
|
|
+ left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ &-yellow {
|
|
|
+ background: url("../../../assets/icon/EN-24-normal-yellow.png") no-repeat
|
|
|
+ left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .coll-icon {
|
|
|
+ background: url("../../../assets/icon/bookmarkfill-24-normal-red.png")
|
|
|
+ no-repeat left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ &.disabled {
|
|
|
+ background: url("../../../assets/icon/bookmarkfill-24-disable-Black.png")
|
|
|
+ no-repeat left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ &-yellow {
|
|
|
+ background: url("../../../assets/icon/bookmarkfill-24-normal-yellow.png")
|
|
|
+ no-repeat left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .keyboard-icon {
|
|
|
+ background: url("../../../assets/icon/enter-24-keyboard-red.png") no-repeat
|
|
|
+ left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ &.disabled {
|
|
|
+ background: url("../../../assets/icon/enter-24-keyboard-disable-Black.png")
|
|
|
+ no-repeat left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ &-yellow {
|
|
|
+ background: url("../../../assets/icon/enter-24-keyboard-yellow.png")
|
|
|
+ no-repeat left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &-content {
|
|
|
+ flex: 1;
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ .vc-box {
|
|
|
+ padding: 0 8px 0 36px;
|
|
|
+ &-right {
|
|
|
+ padding: 0 36px 0 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .vc-left {
|
|
|
+ width: 64px;
|
|
|
+ height: 64px;
|
|
|
+ cursor: pointer;
|
|
|
+ &-grey {
|
|
|
+ background: url("../../../assets/NPC/left-grey.png") no-repeat left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ &-black {
|
|
|
+ background: url("../../../assets/NPC/left-black.png") no-repeat left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ &-white {
|
|
|
+ background: url("../../../assets/NPC/left-white.png") no-repeat left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ &.hidden {
|
|
|
+ visibility: hidden;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .vc-right {
|
|
|
+ width: 64px;
|
|
|
+ height: 64px;
|
|
|
+ cursor: pointer;
|
|
|
+ &-grey {
|
|
|
+ background: url("../../../assets/NPC/right-grey.png") no-repeat left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ &-black {
|
|
|
+ background: url("../../../assets/NPC/right-black.png") no-repeat left
|
|
|
+ top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ &-white {
|
|
|
+ background: url("../../../assets/NPC/right-white.png") no-repeat left
|
|
|
+ top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .vc-main {
|
|
|
+ width: fit-content;
|
|
|
+ margin: 0 auto;
|
|
|
+ padding: 0 67px;
|
|
|
+ .enwords {
|
|
|
+ padding: 0 3px;
|
|
|
+ margin-top: 24px;
|
|
|
+ color: rgba(0, 0, 0, 0.45);
|
|
|
+ font-size: 24px;
|
|
|
+ line-height: 32px;
|
|
|
+ font-family: "robot";
|
|
|
+ &-green {
|
|
|
+ color: rgba(255, 255, 255, 0.65);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .NNPE-words {
|
|
|
+ float: left;
|
|
|
+ user-select: none;
|
|
|
+ -webkit-user-select: none;
|
|
|
+ -moz-user-select: none;
|
|
|
+ -ms-user-select: none;
|
|
|
+ &-box {
|
|
|
+ float: left;
|
|
|
+ > span {
|
|
|
+ display: block;
|
|
|
+ &.NNPE-pinyin {
|
|
|
+ font-family: "GB-PINYINOK-B";
|
|
|
+ font-weight: normal;
|
|
|
+ font-size: 32px;
|
|
|
+ line-height: 1.25;
|
|
|
+ box-sizing: border-box;
|
|
|
+ color: rgba(0, 0, 0, 0.85);
|
|
|
+ &.bottom {
|
|
|
+ padding-bottom: 16px;
|
|
|
+ }
|
|
|
+ &.noFont {
|
|
|
+ font-family: initial;
|
|
|
+ }
|
|
|
+ &.textLeft {
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ &.font-white {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ &.wordBlank {
|
|
|
+ color: rgba(0, 0, 0, 0.85);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.NNPE-chs {
|
|
|
+ font-family: "FZJCGFKTK";
|
|
|
+ font-size: 48px;
|
|
|
+ line-height: 1.17;
|
|
|
+ color: rgba(0, 0, 0, 0.85);
|
|
|
+ &.bottom {
|
|
|
+ padding-bottom: 16px;
|
|
|
+ }
|
|
|
+ .font-white {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .active {
|
|
|
+ color: #de4444;
|
|
|
+ &-yellow {
|
|
|
+ color: #ffc600;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .wordActive {
|
|
|
+ color: #de4444;
|
|
|
+ }
|
|
|
+ .wordActive-blue {
|
|
|
+ color: #ffc600;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // &.padding {
|
|
|
+ // padding-right: 6px;
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.textLeft {
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ &.textCenter {
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ &.textRight {
|
|
|
+ text-align: right;
|
|
|
+ }
|
|
|
+ > span {
|
|
|
+ display: block;
|
|
|
+ &.NNPE-pinyin {
|
|
|
+ font-family: "GB-PINYINOK-B";
|
|
|
+ font-weight: normal;
|
|
|
+ font-size: 32px;
|
|
|
+ line-height: 1.25;
|
|
|
+ box-sizing: border-box;
|
|
|
+ color: rgba(0, 0, 0, 0.85);
|
|
|
+ &.bottom {
|
|
|
+ padding-bottom: 16px;
|
|
|
+ }
|
|
|
+ &.font-white {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ &.noFont {
|
|
|
+ font-family: initial;
|
|
|
+ }
|
|
|
+ &.textLeft {
|
|
|
+ text-align: left;
|
|
|
+ }
|
|
|
+ &.wordBlank {
|
|
|
+ color: rgba(0, 0, 0, 0.85);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.NNPE-chs {
|
|
|
+ font-family: "FZJCGFKTK";
|
|
|
+ font-size: 48px;
|
|
|
+ line-height: 1.17;
|
|
|
+ color: rgba(0, 0, 0, 0.85);
|
|
|
+ &.bottom {
|
|
|
+ padding-bottom: 16px;
|
|
|
+ }
|
|
|
+ .font-white {
|
|
|
+ color: #fff;
|
|
|
+ }
|
|
|
+ .active {
|
|
|
+ color: #de4444;
|
|
|
+ &-yellow {
|
|
|
+ color: #ffc600;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .wordActive {
|
|
|
+ color: #de4444;
|
|
|
+ }
|
|
|
+ .wordActive-blue {
|
|
|
+ color: #ffc600;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &.padding {
|
|
|
+ padding-left: 3px;
|
|
|
+ padding-right: 3px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &-bottom {
|
|
|
+ height: 136px;
|
|
|
+ width: 100%;
|
|
|
+ box-sizing: border-box;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding-right: 40px;
|
|
|
+
|
|
|
+ .voicefull-bottom-show {
|
|
|
+ height: 136px;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ visibility: visible;
|
|
|
+ }
|
|
|
+ .voicefull-bottom-hidden {
|
|
|
+ height: 136px;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ visibility: hidden;
|
|
|
+ }
|
|
|
+ .bottom-left {
|
|
|
+ display: flex;
|
|
|
+ justify-content: flex-start;
|
|
|
+ align-items: center;
|
|
|
+ padding-left: 40px;
|
|
|
+ > img {
|
|
|
+ width: 72px;
|
|
|
+ height: 48px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ &-margin {
|
|
|
+ margin-left: 40px;
|
|
|
+ }
|
|
|
+ .compare-box {
|
|
|
+ height: 56px;
|
|
|
+ padding: 16px 16px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ border-radius: 0 40px 40px 0;
|
|
|
+ border-left: 0px solid rgba(0, 0, 0, 0.1);
|
|
|
+ &-white {
|
|
|
+ background: rgba(255, 255, 255, 0.1);
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ border-left: 0;
|
|
|
+ }
|
|
|
+ &-answer {
|
|
|
+ border-radius: 40px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .page-count {
|
|
|
+ padding: 8px;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 24px;
|
|
|
+ font-family: "robot";
|
|
|
+ color: #000000;
|
|
|
+ min-width: 60px;
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 8px;
|
|
|
+ background: #fff;
|
|
|
+ text-align: center;
|
|
|
+ &-green {
|
|
|
+ color: #ffffff;
|
|
|
+ background: rgba(255, 255, 255, 0.2);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.word-play-audio {
|
|
|
+ position: absolute;
|
|
|
+ left: -1000px;
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss">
|
|
|
+#waveform_big {
|
|
|
+ > :nth-child(1) {
|
|
|
+ overflow: hidden !important;
|
|
|
+ }
|
|
|
+}
|
|
|
+.NPC-Big-Book-preview-green {
|
|
|
+ .bg1 {
|
|
|
+ .repeat-icon {
|
|
|
+ background: url("../../../assets/icon/Repeat-24-normal-Green.png")
|
|
|
+ no-repeat left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ .pinyin-icon {
|
|
|
+ background: url("../../../assets/icon/pinyin-24-normal-green.png")
|
|
|
+ no-repeat left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ .en-icon {
|
|
|
+ background: url("../../../assets/icon/EN-24-normal-Green.png") no-repeat
|
|
|
+ left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ .coll-icon {
|
|
|
+ background: url("../../../assets/icon/bookmarkfill-24-normal-green.png")
|
|
|
+ no-repeat left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+.NPC-Big-Book-preview-brown {
|
|
|
+ .bg1 {
|
|
|
+ .repeat-icon {
|
|
|
+ background: url("../../../assets/icon/Repeat-24-normal-Brown.png")
|
|
|
+ no-repeat left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ .pinyin-icon {
|
|
|
+ background: url("../../../assets/icon/pinyin-24-normal-brown.png")
|
|
|
+ no-repeat left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ .en-icon {
|
|
|
+ background: url("../../../assets/icon/EN-24-normal-Brown.png") no-repeat
|
|
|
+ left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ .coll-icon {
|
|
|
+ background: url("../../../assets/icon/bookmarkfill-24-normal-brown.png")
|
|
|
+ no-repeat left top;
|
|
|
+ background-size: 100% 100%;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
qinpeng