|
|
@@ -1,3527 +0,0 @@
|
|
|
-<!-- -->
|
|
|
-<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" v-if="patternType != '录音模式'">
|
|
|
- <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>
|
|
|
- <div class="top-middle">
|
|
|
- <template v-if="patternType != '录音模式'">
|
|
|
- <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>
|
|
|
- </template>
|
|
|
- <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="['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
|
|
|
- :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>
|
|
|
- <!-- v-show="patternType == '录音模式'" -->
|
|
|
- <div class="waveform-wrapper" v-show="patternType == '录音模式'">
|
|
|
- <div class="big" v-loading="big_loading">
|
|
|
- <div class="zoom_dv">
|
|
|
- <div class="remove" @click="bigZoom('remove')">
|
|
|
- <img src="../../../assets/NPC/qp-remove.png" alt="" />
|
|
|
- </div>
|
|
|
- <!-- <div class="text"></div> -->
|
|
|
- <div class="add" @click="bigZoom('add')">
|
|
|
- <img src="../../../assets/NPC/qp-add.png" alt="" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- :class="[playList.indexOf('yp') != -1 ? 'play_erji' : 'erji']"
|
|
|
- v-if="LYstatus != '未开始'"
|
|
|
- @click="selepaly('yp')"
|
|
|
- >
|
|
|
- <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
|
|
|
- @mousewheel="mousewheelEvent"
|
|
|
- @mousemove="mouseoverEvent"
|
|
|
- @dblclick="Bibdblclick"
|
|
|
- @click="bigClickEvent"
|
|
|
- id="waveform_big"
|
|
|
- ref="waveform_big"
|
|
|
- />
|
|
|
-
|
|
|
- <div id="timeline" ref="timeline"></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="big"
|
|
|
- id="ly_big"
|
|
|
- style="display: none"
|
|
|
- v-loading="ly_loading"
|
|
|
- >
|
|
|
- <div class="zoom_dv">
|
|
|
- <div class="remove" @click="lyZoom('remove')">
|
|
|
- <img src="../../../assets/NPC/qp-remove.png" alt="" />
|
|
|
- </div>
|
|
|
- <!-- <div class="text"></div> -->
|
|
|
- <div class="add" @click="lyZoom('add')">
|
|
|
- <img src="../../../assets/NPC/qp-add.png" alt="" />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- :class="[playList.indexOf('ly') != -1 ? 'play_erji' : 'erji']"
|
|
|
- @click="selepaly('ly')"
|
|
|
- >
|
|
|
- <!--
|
|
|
- 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">
|
|
|
- <div
|
|
|
- @mousewheel="LYmousewheelEvent"
|
|
|
- @dblclick="lydblclick"
|
|
|
- @click="lyClickEvent"
|
|
|
- id="waveform_ly"
|
|
|
- ref="waveform_ly"
|
|
|
- class="elem"
|
|
|
- style="height: 130px"
|
|
|
- />
|
|
|
- <div id="timeline_ly" ref="timeline_ly"></div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </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="patternType == '录音模式'">
|
|
|
- <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>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <div
|
|
|
- :class="['pattern', bgIndex == 1 ? 'darcColor_pattern' : '']"
|
|
|
- style="margin-right: 27px"
|
|
|
- >
|
|
|
- <template v-if="bgIndex == 0">
|
|
|
- <img src="../../../assets/NPC/biaozhu-pattern.png" alt="" />
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <img
|
|
|
- src="../../../assets/NPC/darcColor-biaozhu-pattern.png"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- :class="['pattern', bgIndex == 1 ? 'darcColor_pattern' : '']"
|
|
|
- @click="cutPatternType('录音模式')"
|
|
|
- >
|
|
|
- <template v-if="bgIndex == 0">
|
|
|
- <img src="../../../assets/NPC/luyin-pattern.png" alt="" />
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <img
|
|
|
- src="../../../assets/NPC/darcColor-luyin-pattern.png"
|
|
|
- alt=""
|
|
|
- />
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- <div v-if="patternType == '录音模式'">
|
|
|
- <div class="cuttentime">
|
|
|
- {{
|
|
|
- playList.indexOf("ly") != -1
|
|
|
- ? ly_ShowcurentTime
|
|
|
- : ShowcurentTime
|
|
|
- }}
|
|
|
- </div>
|
|
|
- <div class="operate">
|
|
|
- <img
|
|
|
- v-if="LYstatus == '录音中'"
|
|
|
- src="../../../assets/NPC/qp-back-gray.png"
|
|
|
- alt=""
|
|
|
- style="width: 48px; height: 48px"
|
|
|
- />
|
|
|
- <img
|
|
|
- v-else
|
|
|
- src="../../../assets/NPC/qp-back.png"
|
|
|
- alt=""
|
|
|
- style="width: 48px; height: 48px"
|
|
|
- @click="backStatus(false)"
|
|
|
- />
|
|
|
- <div
|
|
|
- :class="[
|
|
|
- 'speed',
|
|
|
- speedListShow ? 'speed_sele' : '',
|
|
|
- LYstatus == '录音中' ? 'gray_speed' : '',
|
|
|
- ]"
|
|
|
- @click="speedListShowEvent"
|
|
|
- >
|
|
|
- <div v-if="speedListShow" :class="['speedList']">
|
|
|
- <div
|
|
|
- v-for="(item, i) in speedList"
|
|
|
- :key="i + 'speedList'"
|
|
|
- @click.stop="selespeed(i)"
|
|
|
- >
|
|
|
- {{ item }}×
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- {{ speedList[speedIndex] }}×
|
|
|
- </div>
|
|
|
- <img
|
|
|
- v-if="LYstatus == '录音中'"
|
|
|
- src="../../../assets/NPC/play-fill-gray.png"
|
|
|
- alt=""
|
|
|
- style="width: 48px; height: 48px"
|
|
|
- />
|
|
|
- <template v-else>
|
|
|
- <img
|
|
|
- v-show="isPlaying"
|
|
|
- @click="playMusic('pause')"
|
|
|
- src="../../../assets/NPC/pause-fill.png"
|
|
|
- alt=""
|
|
|
- style="width: 16px; height: 24px"
|
|
|
- />
|
|
|
- <img
|
|
|
- v-show="!isPlaying"
|
|
|
- @click="playMusic('play')"
|
|
|
- src="../../../assets/NPC/play-fill.png"
|
|
|
- alt=""
|
|
|
- style="width: 21px; height: 24px"
|
|
|
- />
|
|
|
- </template>
|
|
|
- <img
|
|
|
- v-if="LYstatus == '录音中'"
|
|
|
- src="../../../assets/NPC/qp-xunhuan-gray.png"
|
|
|
- alt=""
|
|
|
- style="width: 48px; height: 48px"
|
|
|
- />
|
|
|
- <template v-else>
|
|
|
- <img
|
|
|
- src="../../../assets/NPC/qp-xunhuan.png"
|
|
|
- alt=""
|
|
|
- style="width: 48px; height: 48px"
|
|
|
- @click="circulationPlay"
|
|
|
- v-if="xunhunShow"
|
|
|
- />
|
|
|
- <img
|
|
|
- src="../../../assets/NPC/qp-no-xunhuan.png"
|
|
|
- alt=""
|
|
|
- style="width: 48px; height: 48px"
|
|
|
- @click="circulationPlay"
|
|
|
- v-else
|
|
|
- />
|
|
|
- </template>
|
|
|
- <img
|
|
|
- v-if="LYstatus != '已结束'"
|
|
|
- src="../../../assets/NPC/qp-duibi.png"
|
|
|
- alt=""
|
|
|
- style="width: 48px; height: 48px"
|
|
|
- />
|
|
|
- <img
|
|
|
- v-else
|
|
|
- src="../../../assets/NPC/qp-duibi-sele.png"
|
|
|
- alt=""
|
|
|
- style="width: 48px; height: 48px"
|
|
|
- @click="comparisonPlay"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div
|
|
|
- :class="[
|
|
|
- 'page-count',
|
|
|
- bgIndex == 0 ? 'page-count-white' : 'page-count-green',
|
|
|
- ]"
|
|
|
- >
|
|
|
- {{ curSentIndex + 1 }}/{{ sentList.length }}
|
|
|
- <div v-if="patternType == '录音模式'">
|
|
|
- <img
|
|
|
- src="../../../assets/NPC/qp-last.png"
|
|
|
- alt=""
|
|
|
- style="width: 48px; height: 48px"
|
|
|
- @click="prevSentence"
|
|
|
- />
|
|
|
- <img
|
|
|
- src="../../../assets/NPC/qp-next.png"
|
|
|
- alt=""
|
|
|
- style="width: 48px; height: 48px; margin-left: 13px"
|
|
|
- @click="nextSentence"
|
|
|
- />
|
|
|
- </div>
|
|
|
- </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 { Base64 } from "js-base64";
|
|
|
-
|
|
|
-function pcmtoWav(pcmsrt, sampleRate, numChannels, bitsPerSample) {
|
|
|
- return new Promise((resolve, reject) => {
|
|
|
- //参数->（base64编码的pcm流，采样频率，声道数，采样位数）
|
|
|
- let header = {
|
|
|
- // OFFS SIZE NOTES
|
|
|
- chunkId: [0x52, 0x49, 0x46, 0x46], // 0 4 "RIFF" = 0x52494646
|
|
|
- chunkSize: 0, // 4 4 36+SubChunk2Size = 4+(8+SubChunk1Size)+(8+SubChunk2Size)
|
|
|
- format: [0x57, 0x41, 0x56, 0x45], // 8 4 "WAVE" = 0x57415645
|
|
|
- subChunk1Id: [0x66, 0x6d, 0x74, 0x20], // 12 4 "fmt " = 0x666d7420
|
|
|
- subChunk1Size: 16, // 16 4 16 for PCM
|
|
|
- audioFormat: 1, // 20 2 PCM = 1
|
|
|
- numChannels: numChannels || 1, // 22 2 Mono = 1, Stereo = 2...
|
|
|
- sampleRate: sampleRate || 16000, // 24 4 8000, 44100...
|
|
|
- byteRate: 0, // 28 4 SampleRate*NumChannels*BitsPerSample/8
|
|
|
- blockAlign: 0, // 32 2 NumChannels*BitsPerSample/8
|
|
|
- bitsPerSample: bitsPerSample || 16, // 34 2 8 bits = 8, 16 bits = 16
|
|
|
- subChunk2Id: [0x64, 0x61, 0x74, 0x61], // 36 4 "data" = 0x64617461
|
|
|
- subChunk2Size: 0, // 40 4 data size = NumSamples*NumChannels*BitsPerSample/8
|
|
|
- };
|
|
|
- function u32ToArray(i) {
|
|
|
- return [i & 0xff, (i >> 8) & 0xff, (i >> 16) & 0xff, (i >> 24) & 0xff];
|
|
|
- }
|
|
|
- function u16ToArray(i) {
|
|
|
- return [i & 0xff, (i >> 8) & 0xff];
|
|
|
- }
|
|
|
- let pcm = Base64.toUint8Array(pcmsrt);
|
|
|
- header.blockAlign = (header.numChannels * header.bitsPerSample) >> 3;
|
|
|
- header.byteRate = header.blockAlign * header.sampleRate;
|
|
|
- header.subChunk2Size = pcm.length * (header.bitsPerSample >> 3);
|
|
|
- header.chunkSize = 36 + header.subChunk2Size;
|
|
|
-
|
|
|
- let wavHeader = header.chunkId.concat(
|
|
|
- u32ToArray(header.chunkSize),
|
|
|
- header.format,
|
|
|
- header.subChunk1Id,
|
|
|
- u32ToArray(header.subChunk1Size),
|
|
|
- u16ToArray(header.audioFormat),
|
|
|
- u16ToArray(header.numChannels),
|
|
|
- u32ToArray(header.sampleRate),
|
|
|
- u32ToArray(header.byteRate),
|
|
|
- u16ToArray(header.blockAlign),
|
|
|
- u16ToArray(header.bitsPerSample),
|
|
|
- header.subChunk2Id,
|
|
|
- u32ToArray(header.subChunk2Size)
|
|
|
- );
|
|
|
- let wavHeaderUnit8 = new Uint8Array(wavHeader);
|
|
|
-
|
|
|
- let mergedArray = new Uint8Array(wavHeaderUnit8.length + pcm.length);
|
|
|
- mergedArray.set(wavHeaderUnit8);
|
|
|
- mergedArray.set(pcm, wavHeaderUnit8.length);
|
|
|
- let blob = new Blob([mergedArray], { type: "audio/wav" });
|
|
|
- let blobUrl = window.URL.createObjectURL(blob);
|
|
|
- resolve(blobUrl);
|
|
|
- });
|
|
|
-}
|
|
|
-
|
|
|
-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 Recorder from "recorder-core";
|
|
|
-import "recorder-core/src/engine/mp3";
|
|
|
-import "recorder-core/src/engine/mp3-engine"; //如果此格式有额外的编码引擎（*-engine.js）的话，必须要加上
|
|
|
-import "recorder-core/src/extensions/waveview";
|
|
|
-import "recorder-core/src/extensions/wavesurfer.view.js";
|
|
|
-import "recorder-core/src/extensions/buffer_stream.player";
|
|
|
-
|
|
|
-import "recorder-core/src/extensions/lib.fft";
|
|
|
-import "recorder-core/src/extensions/frequency.histogram.view";
|
|
|
-
|
|
|
-import WaveSurfer from "wavesurfer.js";
|
|
|
-import Regions from "wavesurfer.js/dist/plugin/wavesurfer.regions.js";
|
|
|
-import CursorPlugin from "wavesurfer.js/dist/plugin/wavesurfer.cursor.js";
|
|
|
-import Timeline from "wavesurfer.js/dist/plugin/wavesurfer.timeline.js";
|
|
|
-
|
|
|
-var stream = Recorder.BufferStreamPlayer({
|
|
|
- play: true, //要播放声音，设为false不播放，只提供MediaStream
|
|
|
- realtime: true /*默认为true实时模式，设为false为非实时模式
|
|
|
- 实时模式：
|
|
|
- 如果有新的input输入数据，但之前输入的数据还未播放完，如果积压的数据量过大则积压的数据将会被直接丢弃，少量积压会和新数据一起加速播放，最终达到尽快播放新输入的数据的目的；这在网络不流畅卡顿时会发挥很大作用，可有效降低播放延迟
|
|
|
- 非实时模式：
|
|
|
- 连续完整的播放完所有input输入的数据，之前输入的还未播放完又有新input输入会加入队列排队播放，比如用于：一次性同时输入几段音频完整播放
|
|
|
- */,
|
|
|
-
|
|
|
- //,onInputError:fn(errMsg, inputIndex) //当input输入出错时回调，参数为input第几次调用和错误消息
|
|
|
- //,onUpdateTime:fn() //已播放时长、总时长更新回调（stop、pause、resume后一定会回调），this.currentTime为已播放时长，this.duration为已输入的全部数据总时长（实时模式下意义不大，会比实际播放的长），单位都是ms
|
|
|
- //,onPlayEnd:fn() //没有可播放的数据时回调（stop后一定会回调），已输入的数据已全部播放完了，可代表正在缓冲中或播放结束；之后如果继续input输入了新数据，播放完后会再次回调，因此会多次回调；非实时模式一次性输入了数据时，此回调相当于播放完成，可以stop掉，重新创建对象来input数据可达到循环播放效果
|
|
|
-
|
|
|
- //,decode:false //input输入的数据在调用transform之前是否要进行一次音频解码成pcm [Int16,...]
|
|
|
- //mp3、wav等都可以设为true，会自动解码成pcm
|
|
|
-
|
|
|
- //transform:fn(inputData,sampleRate,True,False)
|
|
|
- //将input输入的data（如果开启了decode将是解码后的pcm）转换处理成要播放的pcm数据；如果没有解码也没有提供本方法，input的data必须是[Int16,...]并且设置set.sampleRate
|
|
|
- //inputData:any input方法输入的任意格式数据，只要这个转换函数支持处理；如果开启了decode，此数据为input输入的数据解码后的pcm [Int16,...]
|
|
|
- //sampleRate:123 如果设置了decode为解码后的采样率，否则为set.sampleRate || null
|
|
|
- //True(pcm,sampleRate) 回调处理好的pcm数据([Int16,...])和pcm的采样率
|
|
|
- //False(errMsg) 处理失败回调
|
|
|
-
|
|
|
- //sampleRate:16000 //可选input输入的数据默认的采样率，当没有设置解码也没有提供transform时应当明确设置采样率
|
|
|
-});
|
|
|
-
|
|
|
-//创建好后第一件事就是start打开流，打开后就会开始播放input输入的音频
|
|
|
-stream.start(
|
|
|
- () => {
|
|
|
- // stream.currentTime;//当前已播放的时长，单位ms，数值变化时会有onUpdateTime事件
|
|
|
- // stream.duration;//已输入的全部数据总时长，单位ms，数值变化时会有onUpdateTime事件；实时模式下意义不大，会比实际播放的长，因为实时播放时卡了就会丢弃部分数据不播放
|
|
|
- // stream.isStop;//是否已停止，调用了stop方法时会设为true
|
|
|
- // stream.isPause;//是否已暂停，调用了pause方法时会设为true
|
|
|
- // stream.isPlayEnd;//已输入的数据是否播放到了结尾（没有可播放的数据了），input后又会变成false；可代表正在缓冲中或播放结束，状态变更时会有onPlayEnd事件
|
|
|
- // //如果不要默认的播放，可以设置set.play为false，这种情况下只拿到MediaStream来用
|
|
|
- // stream.getMediaStream() //通过getMediaStream方法得到MediaStream流，此流可以作为WebRTC的local流发送到对方，或者直接拿来赋值给audio.srcObject来播放（和赋值audio.src作用一致）；未start时调用此方法将会抛异常
|
|
|
- // stream.getAudioSrc() //【已过时】超低版本浏览器中得到MediaStream流的字符串播放地址，可赋值给audio标签的src，直接播放音频；未start时调用此方法将会抛异常；新版本浏览器已停止支持将MediaStream转换成url字符串，调用本方法新浏览器会抛异常，因此在不需要兼容不支持srcObject的超低版本浏览器时，请直接使用getMediaStream然后赋值给auido.srcObject来播放
|
|
|
- },
|
|
|
- (errMsg) => {
|
|
|
- //start失败，无法播放
|
|
|
- }
|
|
|
-);
|
|
|
-
|
|
|
-var wavesurfer_ly = null;
|
|
|
-var wave;
|
|
|
-var lyData = {
|
|
|
- buffers: [],
|
|
|
-};
|
|
|
-
|
|
|
-export default {
|
|
|
- components: {
|
|
|
- AudioLineSentence,
|
|
|
- Soundrecorddiff,
|
|
|
- AudioCompare,
|
|
|
- Wordcard,
|
|
|
- },
|
|
|
- props: [
|
|
|
- "sentList",
|
|
|
- "sentIndex",
|
|
|
- "mp3",
|
|
|
- "wordTimeList",
|
|
|
- "curQue",
|
|
|
- "noFont",
|
|
|
- "themeColor",
|
|
|
- "NNPENewWordList",
|
|
|
- "currentTreeID",
|
|
|
- "config",
|
|
|
- "TaskModel",
|
|
|
- ],
|
|
|
- data() {
|
|
|
- return {
|
|
|
- speedListShow: false,
|
|
|
- speedList: ["2", "1.5", "1.25", "1", "0.75", "0.5"],
|
|
|
- speedIndex: 3,
|
|
|
- patternType: "",
|
|
|
- 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,
|
|
|
- // }),
|
|
|
- recorder: Recorder({
|
|
|
- //本配置参数请参考下面的文档，有详细介绍
|
|
|
- type: "mp3",
|
|
|
- sampleRate: 16000,
|
|
|
- bitRate: 16, //mp3格式，指定采样率hz、比特率kbps，其他参数使用默认配置；注意：是数字的参数必须提供数字，不要用字符串；需要使用的type类型，需提前把格式支持文件加载进来，比如使用wav格式需要提前加载wav.js编码引擎
|
|
|
- onProcess: function (
|
|
|
- buffers,
|
|
|
- powerLevel,
|
|
|
- bufferDuration,
|
|
|
- bufferSampleRate,
|
|
|
- newBufferIdx,
|
|
|
- asyncEnd
|
|
|
- ) {
|
|
|
- // let pcm = Recorder.SampleData(buffers);
|
|
|
- // pcm.data.toString();
|
|
|
- // let data = JSON.stringify(buffers[buffers.length - 1]);
|
|
|
- // pcmtoWav(data).then((res) => {
|
|
|
- // console.log(res);
|
|
|
- // wavesurfer_ly.load(res);
|
|
|
- // });
|
|
|
- // const blob = new Blob(buffers[buffers.length - 1]);
|
|
|
- // const objectUrl = window.URL.createObjectURL(blob);
|
|
|
- // wavesurfer_ly.load(objectUrl);
|
|
|
- // lyData.buffers = buffers;
|
|
|
- // lyData.bufferSampleRate = bufferSampleRate;
|
|
|
- wave.input(buffers[buffers.length - 1], powerLevel, bufferSampleRate); //输入音频数据，更新显示波形
|
|
|
- //录音实时回调，大约1秒调用12次本回调，buffers为开始到现在的所有录音pcm数据块(16位小端LE)
|
|
|
- //可实时绘制波形（extensions目录内的waveview.js、wavesurfer.view.js、frequency.histogram.view.js插件功能）
|
|
|
- //可利用extensions/sonic.js插件实时变速变调，此插件计算量巨大，onProcess需要返回true开启异步模式
|
|
|
- //可实时上传（发送）数据，配合Recorder.SampleData方法，将buffers中的新数据连续的转换成pcm上传，或使用mock方法将新数据连续的转码成其他格式上传，可以参考文档里面的：Demo片段列表 -> 实时转码并上传-通用版；基于本功能可以做到：实时转发数据、实时保存数据、实时语音识别（ASR）等
|
|
|
- },
|
|
|
- }),
|
|
|
- pySize: 32,
|
|
|
- hzSize: 48,
|
|
|
- enSize: 24,
|
|
|
- bgIndex: 0,
|
|
|
- maxTime: 0,
|
|
|
- item: null,
|
|
|
- bg: 0,
|
|
|
- ed: 0,
|
|
|
- isRepeat: false,
|
|
|
- NumberList: [
|
|
|
- "①",
|
|
|
- "②",
|
|
|
- "③",
|
|
|
- "④",
|
|
|
- "⑤",
|
|
|
- "⑥",
|
|
|
- "⑦",
|
|
|
- "⑧",
|
|
|
- "⑨",
|
|
|
- "⑩",
|
|
|
- "⑪",
|
|
|
- "⑫",
|
|
|
- "⑬",
|
|
|
- "⑭",
|
|
|
- "⑮",
|
|
|
- "⑯",
|
|
|
- "⑰",
|
|
|
- "⑱",
|
|
|
- "⑲",
|
|
|
- "⑳",
|
|
|
- ],
|
|
|
- chsFhList: ["，", "。", "”", "：", "》", "《", "？", "！", "；"],
|
|
|
- enFhList: [",", ".", ";", "?", "!", ":", ">", "<"],
|
|
|
- curTime: 0,
|
|
|
- LY_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,
|
|
|
- loading: null,
|
|
|
- big_loading: null,
|
|
|
- ly_loading: null,
|
|
|
- timer: null,
|
|
|
- ShowcurentTime: "00:00",
|
|
|
- ly_ShowcurentTime: "00:00",
|
|
|
- LYstatus: "未开始",
|
|
|
- startLyShow: false,
|
|
|
- //波浪图-录音
|
|
|
- drawRecordId: null,
|
|
|
- oCanvas: null,
|
|
|
- ctx: null,
|
|
|
- //波浪图-播放
|
|
|
- drawPlayId: null,
|
|
|
- pCanvas: null,
|
|
|
- pCtx: null,
|
|
|
- zoomNumber: 0,
|
|
|
- lyzoomNumber: 0,
|
|
|
- xunhunShow: false,
|
|
|
- regionData: null,
|
|
|
- LY_regionData: null,
|
|
|
- LY_url: "",
|
|
|
- comparisonPlayStatus: false,
|
|
|
- };
|
|
|
- },
|
|
|
- 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: {
|
|
|
- bigZoom(type) {
|
|
|
- if (type == "add") {
|
|
|
- this.zoomNumber = this.zoomNumber + 100;
|
|
|
- } else {
|
|
|
- if (this.zoomNumber == 0) {
|
|
|
- return;
|
|
|
- }
|
|
|
- this.zoomNumber = this.zoomNumber - 100;
|
|
|
- }
|
|
|
- let time = this.wavesurfer_big.getCurrentTime();
|
|
|
- this.wavesurfer_big.zoom(Number(this.zoomNumber), time);
|
|
|
- },
|
|
|
- lyZoom(type) {
|
|
|
- if (type == "add") {
|
|
|
- this.lyzoomNumber = this.lyzoomNumber + 100;
|
|
|
- } else {
|
|
|
- if (this.lyzoomNumber == 0) {
|
|
|
- return;
|
|
|
- }
|
|
|
- this.lyzoomNumber = this.lyzoomNumber - 100;
|
|
|
- }
|
|
|
- let time = wavesurfer_ly.getCurrentTime();
|
|
|
- wavesurfer_ly.zoom(Number(this.lyzoomNumber), time);
|
|
|
- },
|
|
|
- // 对比播放
|
|
|
- comparisonPlay() {
|
|
|
- this.stopAllPlayStart();
|
|
|
- this.comparisonPlayStatus = true;
|
|
|
- this.curTime = 0;
|
|
|
- this.playList = [];
|
|
|
- this.playMusic("play");
|
|
|
- },
|
|
|
- // 暂停并回到起点
|
|
|
- stopAllPlayStart() {
|
|
|
- if (this.wavesurfer_big) {
|
|
|
- this.wavesurfer_big.stop();
|
|
|
- }
|
|
|
- if (this.LYstatus == "已结束") {
|
|
|
- wavesurfer_ly.stop();
|
|
|
- }
|
|
|
- },
|
|
|
- // 循环播放
|
|
|
- circulationPlay() {
|
|
|
- this.xunhunShow = !this.xunhunShow;
|
|
|
- if (this.isPlaying) {
|
|
|
- this.stopPlay();
|
|
|
- this.playMusic("play");
|
|
|
- }
|
|
|
- },
|
|
|
- // 选择速度
|
|
|
- speedListShowEvent() {
|
|
|
- if (this.LYstatus == "录音中") {
|
|
|
- return;
|
|
|
- }
|
|
|
- this.speedListShow = !this.speedListShow;
|
|
|
- },
|
|
|
- selespeed(index) {
|
|
|
- let ly_Playing = false;
|
|
|
- let yp_Playing = false;
|
|
|
- if (this.isPlaying) {
|
|
|
- if (this.playList != ["ly"]) {
|
|
|
- this.curTime = this.wavesurfer_big.getCurrentTime();
|
|
|
- yp_Playing = true;
|
|
|
- } else {
|
|
|
- ly_Playing = true;
|
|
|
- }
|
|
|
- }
|
|
|
- this.speedListShow = false;
|
|
|
- this.speedIndex = index;
|
|
|
- this.initaudioImage(this.speedList[index], yp_Playing);
|
|
|
- if (this.LYstatus == "已结束") {
|
|
|
- this.initLYaudioImage(this.speedList[this.sentIndex], ly_Playing);
|
|
|
- }
|
|
|
- },
|
|
|
- // 返回初始状态
|
|
|
- backStatus(bool) {
|
|
|
- this.stopAllPlayStart();
|
|
|
- this.regionData = null;
|
|
|
- this.LY_regionData = null;
|
|
|
- this.speedIndex = 3;
|
|
|
- this.ShowcurentTime = "00:00";
|
|
|
- this.ly_ShowcurentTime = "00:00";
|
|
|
- this.curTime = 0;
|
|
|
- this.LY_curTime = 0;
|
|
|
- this.xunhunShow = false;
|
|
|
- this.wavesurfer_big = null;
|
|
|
- this.initaudioImage(1, bool ? true : false);
|
|
|
- if (this.LYstatus == "已结束") {
|
|
|
- wavesurfer_ly = null;
|
|
|
- this.initLYaudioImage(1, false);
|
|
|
- }
|
|
|
- },
|
|
|
- changetime() {
|
|
|
- let _this = this;
|
|
|
- if (_this.curSentIndex != 0) {
|
|
|
- _this.item.forEach((items) => {
|
|
|
- items.timeList.forEach((it) => {
|
|
|
- let AllNullTime = 0;
|
|
|
- for (let i = _this.curSentIndex; i > 0; i--) {
|
|
|
- if (i > 0) {
|
|
|
- AllNullTime +=
|
|
|
- _this.curQue.wordTime[i].bg - _this.curQue.wordTime[i - 1].ed;
|
|
|
- }
|
|
|
- }
|
|
|
- it.wordBg =
|
|
|
- it.wordBg - _this.curQue.wordTime[_this.curSentIndex].bg;
|
|
|
- it.wordEd =
|
|
|
- it.wordEd - _this.curQue.wordTime[_this.curSentIndex].bg;
|
|
|
- });
|
|
|
- });
|
|
|
- let AllNullTime = 0;
|
|
|
- for (let i = _this.curSentIndex; i > 0; i--) {
|
|
|
- if (i > 0) {
|
|
|
- AllNullTime +=
|
|
|
- _this.curQue.wordTime[i].bg - _this.curQue.wordTime[i - 1].ed;
|
|
|
- }
|
|
|
- }
|
|
|
- _this.ed =
|
|
|
- _this.curQue.wordTime[_this.curSentIndex].ed -
|
|
|
- _this.curQue.wordTime[_this.curSentIndex].bg;
|
|
|
- _this.bg =
|
|
|
- _this.curQue.wordTime[_this.curSentIndex].bg -
|
|
|
- _this.curQue.wordTime[_this.curSentIndex].bg;
|
|
|
- }
|
|
|
- },
|
|
|
- // 切换录音模式
|
|
|
- cutPatternType(type) {
|
|
|
- let _this = this;
|
|
|
- _this.$nextTick(() => {
|
|
|
- if (_this.$refs.audioLineSent) {
|
|
|
- _this.$refs.audioLineSent.PlayAudio();
|
|
|
- }
|
|
|
- });
|
|
|
- this.patternType = type;
|
|
|
- if (type == "录音模式") {
|
|
|
- this.changetime();
|
|
|
- this.initaudioImage(null, false);
|
|
|
- if (this.curQue.Bookanswer.practiceModel[this.curSentIndex]) {
|
|
|
- this.curjuzi(
|
|
|
- this.curQue.Bookanswer.practiceModel[this.curSentIndex].recordSrc,
|
|
|
- false
|
|
|
- );
|
|
|
- this.LYstatus = "已结束";
|
|
|
- } else {
|
|
|
- this.curjuzi(null, false);
|
|
|
- this.LYstatus = "未开始";
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- selepaly(type) {
|
|
|
- if (this.LYstatus == "未开始") {
|
|
|
- return;
|
|
|
- }
|
|
|
- this.playList = [];
|
|
|
- this.playList.push(type);
|
|
|
-
|
|
|
- // this.playMusic(this.isPlaying ? "puse" : "play");
|
|
|
- },
|
|
|
- startCanvas() {
|
|
|
- //录音波浪
|
|
|
- this.oCanvas = document.getElementById("canvas");
|
|
|
- this.ctx = this.oCanvas.getContext("2d");
|
|
|
- //播放波浪
|
|
|
- this.pCanvas = document.getElementById("playChart");
|
|
|
- this.pCtx = this.pCanvas.getContext("2d");
|
|
|
- },
|
|
|
- mouseoverEvent() {
|
|
|
- let arr = this.wavesurfer_big.mediaContainer.textContent.split(":");
|
|
|
- let number = "";
|
|
|
- arr.forEach((item) => {
|
|
|
- number += item;
|
|
|
- });
|
|
|
- number = (number * 1) / 1000;
|
|
|
- this.zoomTime = number;
|
|
|
- },
|
|
|
- // 鼠标滚动放大缩小
|
|
|
- mousewheelEvent(e) {
|
|
|
- this.playList = ["yp"];
|
|
|
- let that = this;
|
|
|
- var ev = e || window.event;
|
|
|
- var down = true;
|
|
|
- down = ev.wheelDelta ? ev.wheelDelta < 0 : ev.detail > 0;
|
|
|
- if (down) {
|
|
|
- if (that.zoomNumber <= 0) {
|
|
|
- return;
|
|
|
- }
|
|
|
- that.zoomNumber = that.zoomNumber - 100;
|
|
|
- } else {
|
|
|
- that.zoomNumber = that.zoomNumber + 100;
|
|
|
- }
|
|
|
- that.wavesurfer_big.zoom(Number(that.zoomNumber), this.zoomTime);
|
|
|
- },
|
|
|
- // 录音鼠标滚动放大缩小
|
|
|
- LYmousewheelEvent(e) {
|
|
|
- this.playList = ["ly"];
|
|
|
- let that = this;
|
|
|
- var ev = e || window.event;
|
|
|
- var down = true;
|
|
|
- down = ev.wheelDelta ? ev.wheelDelta < 0 : ev.detail > 0;
|
|
|
- if (down) {
|
|
|
- if (that.lyzoomNumber <= 0) {
|
|
|
- return;
|
|
|
- }
|
|
|
- that.lyzoomNumber = that.lyzoomNumber - 100;
|
|
|
- } else {
|
|
|
- that.lyzoomNumber = that.lyzoomNumber + 100;
|
|
|
- }
|
|
|
- wavesurfer_ly.zoom(Number(that.lyzoomNumber), this.zoomTime);
|
|
|
- },
|
|
|
- bigClickEvent() {
|
|
|
- this.playList = ["yp"];
|
|
|
- if (this.regionData) {
|
|
|
- return;
|
|
|
- }
|
|
|
- let arr = this.wavesurfer_big.mediaContainer.textContent.split(":");
|
|
|
- let number = "";
|
|
|
- arr.forEach((item) => {
|
|
|
- number += item;
|
|
|
- });
|
|
|
- number = ((number * 1) / 1000).toFixed(2) + "";
|
|
|
- let newarr = number.split(".");
|
|
|
- let time1 = newarr[0] * 1 < 10 ? "0" + newarr[0] : newarr[0];
|
|
|
- let time2 = newarr[1];
|
|
|
- this.ShowcurentTime = time1 + ":" + time2;
|
|
|
- },
|
|
|
- lyClickEvent() {
|
|
|
- this.playList = ["ly"];
|
|
|
- if (this.LY_regionData) {
|
|
|
- return;
|
|
|
- }
|
|
|
- let arr = wavesurfer_ly.mediaContainer.textContent.split(":");
|
|
|
- let number = "";
|
|
|
- arr.forEach((item) => {
|
|
|
- number += item;
|
|
|
- });
|
|
|
- number = ((number * 1) / 1000).toFixed(2) + "";
|
|
|
- let newarr = number.split(".");
|
|
|
- let time1 = newarr[0] * 1 < 10 ? "0" + newarr[0] : newarr[0];
|
|
|
- let time2 = newarr[1];
|
|
|
- this.ly_ShowcurentTime = time1 + ":" + time2;
|
|
|
- },
|
|
|
- lydblclick() {
|
|
|
- this.playList = ["ly"];
|
|
|
- let that = this;
|
|
|
- if (that.LY_regionData) {
|
|
|
- that.LY_regionData = null;
|
|
|
- that.ly_ShowcurentTime = "00:00";
|
|
|
- wavesurfer_ly.clearRegions();
|
|
|
- wavesurfer_ly.enableDragSelection({
|
|
|
- color: "rgba(255, 255, 255, 0.2)",
|
|
|
- });
|
|
|
-
|
|
|
- // that.initLYaudioImage(that.speedList[that.speedIndex], false);
|
|
|
- }
|
|
|
- },
|
|
|
- Bibdblclick() {
|
|
|
- this.playList = ["yp"];
|
|
|
- let that = this;
|
|
|
- if (that.regionData) {
|
|
|
- that.regionData = null;
|
|
|
- that.ShowcurentTime = "00:00";
|
|
|
- that.wavesurfer_big.clearRegions();
|
|
|
- that.wavesurfer_big.enableDragSelection({
|
|
|
- color: "rgba(255, 255, 255, 0.2)",
|
|
|
- });
|
|
|
- // that.initaudioImage(that.speedList[that.speedIndex], false);
|
|
|
- }
|
|
|
- },
|
|
|
- // 初始化声波
|
|
|
- initaudioImage(audioRate, isPlaying) {
|
|
|
- this.big_loading = true;
|
|
|
-
|
|
|
- let node = document.getElementById("waveform_big");
|
|
|
- var pObjs = node.childNodes;
|
|
|
- for (var i = pObjs.length - 1; i >= 0; i--) {
|
|
|
- // 一定要倒序，正序是删不干净的，可自行尝试
|
|
|
- node.removeChild(pObjs[i]);
|
|
|
- }
|
|
|
- let plugin = [
|
|
|
- Timeline.create({
|
|
|
- container: "#timeline",
|
|
|
- primaryColor: "#c0c0c0",
|
|
|
- secondaryColor: "#c0c0c0",
|
|
|
- primaryFontColor: "#c0c0c0",
|
|
|
- secondaryFontColor: "#c0c0c0",
|
|
|
- formatTimeCallback: this.formatTimeCallback,
|
|
|
- timeInterval: 0.025,
|
|
|
- primaryLabelInterval: 4,
|
|
|
- secondaryLabelInterval: 400,
|
|
|
- notchPercentHeight: 40,
|
|
|
- }),
|
|
|
- CursorPlugin.create({
|
|
|
- showTime: true,
|
|
|
- opacity: 1,
|
|
|
- color: "#1370F6",
|
|
|
- customShowTimeStyle: {
|
|
|
- "background-color": "#000",
|
|
|
- color: "#fff",
|
|
|
- "font-size": "10px",
|
|
|
- },
|
|
|
- }),
|
|
|
- Regions.create({}),
|
|
|
- ];
|
|
|
- // if (this.regionData) {
|
|
|
- // plugin.splice(plugin.length - 1, 1);
|
|
|
- // plugin.push(
|
|
|
- // Regions.create({
|
|
|
- // regions: [
|
|
|
- // {
|
|
|
- // start: this.regionData.start,
|
|
|
- // end: this.regionData.end,
|
|
|
- // loop: false,
|
|
|
- // drag: false,
|
|
|
- // resize: false,
|
|
|
- // color: "rgba(255, 255, 255, 0.2)",
|
|
|
- // },
|
|
|
- // ],
|
|
|
- // })
|
|
|
- // );
|
|
|
- // }
|
|
|
- this.wavesurfer_big = WaveSurfer.create({
|
|
|
- container: this.$refs.waveform_big,
|
|
|
- audioRate: audioRate ? audioRate : 1,
|
|
|
- barMinHeight: 0.5,
|
|
|
- barWidth: 1,
|
|
|
- backgroundColor: "#141414",
|
|
|
- progressColor: "#44BB6C",
|
|
|
- backend: "MediaElement",
|
|
|
- waveColor: "#44BB6C",
|
|
|
- cursorColor: "#1370F6",
|
|
|
- cursorWidth: 3,
|
|
|
- barHeight: 2,
|
|
|
- barGap: 0,
|
|
|
- height: this.LYstatus == "已结束" ? 130 : 308,
|
|
|
- width: 400,
|
|
|
- interact: true,
|
|
|
- plugins: plugin,
|
|
|
- });
|
|
|
- if (!this.regionData) {
|
|
|
- this.wavesurfer_big.addRegion({
|
|
|
- loop: false,
|
|
|
- drag: false,
|
|
|
- resize: false,
|
|
|
- color: "rgba(255, 255, 255, 0.2)",
|
|
|
- });
|
|
|
- } else {
|
|
|
- this.wavesurfer_big.addRegion({
|
|
|
- start: this.regionData.start,
|
|
|
- end: this.regionData.end,
|
|
|
- loop: false,
|
|
|
- drag: false,
|
|
|
- resize: false,
|
|
|
- color: "rgba(255, 255, 255, 0.2)",
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- let that = this;
|
|
|
- WebFileDownload({
|
|
|
- FileID: this.curQue.time_space_list[this.curSentIndex].file_id,
|
|
|
- }).then((res) => {
|
|
|
- const objectUrl = window.URL.createObjectURL(res);
|
|
|
- this.wavesurfer_big.load(objectUrl);
|
|
|
- let start = this.bg / 1000;
|
|
|
- let end = this.ed / 1000;
|
|
|
- that.wavesurfer_big.on("ready", function (e) {
|
|
|
- if (!that.regionData) {
|
|
|
- that.wavesurfer_big.enableDragSelection({
|
|
|
- color: "rgba(255, 255, 255, 0.2)",
|
|
|
- });
|
|
|
- that.wavesurfer_big.clearRegions(); // 音频加载完成
|
|
|
- }
|
|
|
- if (!audioRate) {
|
|
|
- that.wavesurfer_big.play(start, end);
|
|
|
- } else {
|
|
|
- if (isPlaying) {
|
|
|
- that.playMusic("play");
|
|
|
- }
|
|
|
- }
|
|
|
- that.wavesurfer_big.zoom(0);
|
|
|
- that.big_loading = false;
|
|
|
- that.$forceUpdate();
|
|
|
- });
|
|
|
- });
|
|
|
- // 更新区域时。回调将接收该Region对象。
|
|
|
- that.wavesurfer_big.on("region-updated", function (region) {
|
|
|
- // region.playLoop(); // 循环播放选中区域
|
|
|
- // region.play()
|
|
|
- that.playList = ["yp"];
|
|
|
- that.regionData = region;
|
|
|
- let strt_time = that.regionData.start.toFixed(2);
|
|
|
- let end_time = that.regionData.end.toFixed(2);
|
|
|
- let arr = strt_time.split(".");
|
|
|
- let arr2 = end_time.split(".");
|
|
|
- let newtime = "";
|
|
|
- arr.forEach((item, i) => {
|
|
|
- if (item.length == 1) {
|
|
|
- item = "0" + item;
|
|
|
- }
|
|
|
- if (i == 0) {
|
|
|
- newtime += item + ":";
|
|
|
- } else {
|
|
|
- newtime += item;
|
|
|
- }
|
|
|
- });
|
|
|
- let newtime2 = "";
|
|
|
- arr2.forEach((item, i) => {
|
|
|
- if (item.length == 1) {
|
|
|
- item = "0" + item;
|
|
|
- }
|
|
|
- if (i == 0) {
|
|
|
- newtime2 += item + ":";
|
|
|
- } else {
|
|
|
- newtime2 += item;
|
|
|
- }
|
|
|
- });
|
|
|
- that.ShowcurentTime = newtime + " - " + newtime2;
|
|
|
- });
|
|
|
- that.wavesurfer_big.on("region-created", () => {
|
|
|
- that.wavesurfer_big.clearRegions();
|
|
|
- });
|
|
|
-
|
|
|
- that.wavesurfer_big.on("play", function (e) {
|
|
|
- that.isPlaying = true;
|
|
|
- });
|
|
|
- that.wavesurfer_big.on("pause", function (e) {
|
|
|
- that.isPlaying = false;
|
|
|
- let time = that.wavesurfer_big.getCurrentTime();
|
|
|
- if (that.xunhunShow) {
|
|
|
- if (!that.regionData) {
|
|
|
- if (time * 1000 == that.ed) {
|
|
|
- if (that.comparisonPlayStatus) {
|
|
|
- that.playList = ["ly"];
|
|
|
- that.playMusic("play");
|
|
|
- } else {
|
|
|
- that.playMusic("play");
|
|
|
- }
|
|
|
- }
|
|
|
- } else {
|
|
|
- if (time.toFixed(2) == that.regionData.end.toFixed(2)) {
|
|
|
- if (that.comparisonPlayStatus) {
|
|
|
- that.playList = ["ly"];
|
|
|
- that.playMusic("play");
|
|
|
- } else {
|
|
|
- that.playMusic("play");
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- } else {
|
|
|
- if (that.comparisonPlayStatus) {
|
|
|
- if (!that.regionData) {
|
|
|
- if (time * 1000 == that.ed) {
|
|
|
- if (that.comparisonPlayStatus) {
|
|
|
- that.playList = ["ly"];
|
|
|
- that.playMusic("play");
|
|
|
- }
|
|
|
- }
|
|
|
- } else {
|
|
|
- if (time.toFixed(2) == that.regionData.end.toFixed(2)) {
|
|
|
- if (that.comparisonPlayStatus) {
|
|
|
- that.playList = ["ly"];
|
|
|
- that.playMusic("play");
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- } else {
|
|
|
- if (that.regionData) {
|
|
|
- if (time.toFixed(2) == that.regionData.end.toFixed(2)) {
|
|
|
- let strt_time = that.regionData.start.toFixed(2);
|
|
|
- let end_time = that.regionData.end.toFixed(2);
|
|
|
- let arr = strt_time.split(".");
|
|
|
- let arr2 = end_time.split(".");
|
|
|
- let newtime = "";
|
|
|
- arr.forEach((item, i) => {
|
|
|
- if (item.length == 1) {
|
|
|
- item = "0" + item;
|
|
|
- }
|
|
|
- if (i == 0) {
|
|
|
- newtime += item + ":";
|
|
|
- } else {
|
|
|
- newtime += item;
|
|
|
- }
|
|
|
- });
|
|
|
- let newtime2 = "";
|
|
|
- arr2.forEach((item, i) => {
|
|
|
- if (item.length == 1) {
|
|
|
- item = "0" + item;
|
|
|
- }
|
|
|
- if (i == 0) {
|
|
|
- newtime2 += item + ":";
|
|
|
- } else {
|
|
|
- newtime2 += item;
|
|
|
- }
|
|
|
- });
|
|
|
- that.ShowcurentTime = newtime + " - " + newtime2;
|
|
|
- }
|
|
|
- } else {
|
|
|
- if (time * 1000 == that.ed) {
|
|
|
- that.ShowcurentTime = "00:00";
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- that.wavesurfer_big.on("interaction", function (e) {
|
|
|
- that.wavesurfer_big.pause();
|
|
|
-
|
|
|
- // that.isPlaying = false;
|
|
|
- });
|
|
|
- that.wavesurfer_big.on("audioprocess", function (e) {
|
|
|
- that.curTime = e * 1000;
|
|
|
- let time = e.toFixed(2);
|
|
|
- that.playList = ["yp"];
|
|
|
- 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;
|
|
|
- });
|
|
|
- },
|
|
|
- curjuzi(src) {
|
|
|
- let _this = this;
|
|
|
- let node = document.getElementById("waveform_big");
|
|
|
- node.children[0].style.height = "130px";
|
|
|
- let lynode = document.getElementById("ly_big");
|
|
|
- lynode.style.display = "flex";
|
|
|
- if (src) {
|
|
|
- _this.LY_url = src;
|
|
|
- _this.initLYaudioImage();
|
|
|
- } else {
|
|
|
- let node = document.getElementById("waveform_big");
|
|
|
- node.children[0].style.height = "308px";
|
|
|
- let lynode = document.getElementById("ly_big");
|
|
|
- lynode.style.display = "none";
|
|
|
- }
|
|
|
- },
|
|
|
- // 初始化录音声波图
|
|
|
- initLYaudioImage(audioRate) {
|
|
|
- this.ly_loading = true;
|
|
|
- let node = document.getElementById("waveform_ly");
|
|
|
- var pObjs = node.childNodes;
|
|
|
- for (var i = pObjs.length - 1; i >= 0; i--) {
|
|
|
- // 一定要倒序，正序是删不干净的，可自行尝试
|
|
|
- node.removeChild(pObjs[i]);
|
|
|
- }
|
|
|
- let _this = this;
|
|
|
- let plugin = [
|
|
|
- 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,
|
|
|
- }),
|
|
|
- CursorPlugin.create({
|
|
|
- showTime: true,
|
|
|
- opacity: 1,
|
|
|
- color: "#1370F6",
|
|
|
- customShowTimeStyle: {
|
|
|
- "background-color": "#000",
|
|
|
- color: "#fff",
|
|
|
- "font-size": "10px",
|
|
|
- },
|
|
|
- }),
|
|
|
- Regions.create({}),
|
|
|
- ];
|
|
|
- if (this.LY_regionData) {
|
|
|
- plugin.splice(plugin.length - 1, 1);
|
|
|
- plugin.push(
|
|
|
- Regions.create({
|
|
|
- regions: [
|
|
|
- {
|
|
|
- start: this.LY_regionData.start,
|
|
|
- end: this.LY_regionData.end,
|
|
|
- loop: false,
|
|
|
- drag: false,
|
|
|
- resize: false,
|
|
|
- color: "rgba(255, 255, 255, 0.2)",
|
|
|
- },
|
|
|
- ],
|
|
|
- })
|
|
|
- );
|
|
|
- }
|
|
|
- wavesurfer_ly = WaveSurfer.create({
|
|
|
- container: _this.$refs.waveform_ly,
|
|
|
- audioRate: audioRate ? audioRate : 1,
|
|
|
- barMinHeight: 0.5,
|
|
|
- barWidth: 1,
|
|
|
- backgroundColor: "#141414",
|
|
|
- progressColor: "#5370BB",
|
|
|
- backend: "MediaElement",
|
|
|
- waveColor: "#5370BB",
|
|
|
- cursorColor: " #DE4444",
|
|
|
- cursorWidth: 3,
|
|
|
- barHeight: 2,
|
|
|
- barGap: 0,
|
|
|
- height: 130,
|
|
|
- width: 400,
|
|
|
- interact: true,
|
|
|
- plugins: plugin,
|
|
|
- });
|
|
|
- if (!this.LY_regionData) {
|
|
|
- wavesurfer_ly.addRegion({
|
|
|
- loop: false,
|
|
|
- drag: false,
|
|
|
- resize: false,
|
|
|
- color: "rgba(254, 255, 255, 0.4)",
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- wavesurfer_ly.load(_this.LY_url);
|
|
|
- wavesurfer_ly.on("ready", function (e) {
|
|
|
- wavesurfer_ly.zoom(Number(0));
|
|
|
- _this.wavesurfer_big.zoom(0);
|
|
|
-
|
|
|
- if (!_this.LY_regionData) {
|
|
|
- wavesurfer_ly.enableDragSelection({
|
|
|
- color: "rgba(255, 255, 255, 0.2)",
|
|
|
- });
|
|
|
- wavesurfer_ly.clearRegions(); // 音频加载完成
|
|
|
- }
|
|
|
- _this.ly_loading = false;
|
|
|
- });
|
|
|
- wavesurfer_ly.on("play", function (e) {
|
|
|
- _this.isPlaying = true;
|
|
|
- });
|
|
|
- wavesurfer_ly.on("interaction", function (e) {
|
|
|
- // _this.isPlaying = false;
|
|
|
- wavesurfer_ly.pause();
|
|
|
- });
|
|
|
-
|
|
|
- wavesurfer_ly.on("pause", function (e) {
|
|
|
- _this.isPlaying = false;
|
|
|
- let time = wavesurfer_ly.getCurrentTime();
|
|
|
- if (_this.xunhunShow) {
|
|
|
- if (time.toFixed(2) == _this.LY_regionData.end.toFixed(2)) {
|
|
|
- if (_this.comparisonPlayStatus) {
|
|
|
- _this.playList = [];
|
|
|
- _this.playMusic("play");
|
|
|
- } else {
|
|
|
- _this.playList = ["ly"];
|
|
|
- _this.playMusic("play");
|
|
|
- }
|
|
|
- }
|
|
|
- } else {
|
|
|
- if (_this.LY_regionData) {
|
|
|
- if (time.toFixed(2) == _this.LY_regionData.end.toFixed(2)) {
|
|
|
- _this.comparisonPlayStatus = false;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- });
|
|
|
- wavesurfer_ly.on("audioprocess", function (e) {
|
|
|
- _this.playList = ["ly"];
|
|
|
- _this.LY_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;
|
|
|
- }
|
|
|
- });
|
|
|
- _this.ly_ShowcurentTime = newtime;
|
|
|
- });
|
|
|
- wavesurfer_ly.on("finish", function (e) {
|
|
|
- if (_this.xunhunShow) {
|
|
|
- if (_this.comparisonPlayStatus) {
|
|
|
- _this.playList = ["yp"];
|
|
|
- _this.playMusic("play");
|
|
|
- } else {
|
|
|
- _this.comparisonPlayStatus = false;
|
|
|
- _this.playList = ["ly"];
|
|
|
- _this.playMusic("play");
|
|
|
- }
|
|
|
- } else {
|
|
|
- _this.ly_ShowcurentTime = "00:00";
|
|
|
- }
|
|
|
- });
|
|
|
-
|
|
|
- // 更新区域时。回调将接收该Region对象。
|
|
|
- wavesurfer_ly.on("region-updated", function (region) {
|
|
|
- // region.playLoop(); // 循环播放选中区域
|
|
|
- // region.play()
|
|
|
- _this.playList = ["ly"];
|
|
|
- _this.LY_regionData = region;
|
|
|
- let strt_time = _this.LY_regionData.start.toFixed(2);
|
|
|
- let end_time = _this.LY_regionData.end.toFixed(2);
|
|
|
- let arr = strt_time.split(".");
|
|
|
- let arr2 = end_time.split(".");
|
|
|
- let newtime = "";
|
|
|
- arr.forEach((item, i) => {
|
|
|
- if (item.length == 1) {
|
|
|
- item = "0" + item;
|
|
|
- }
|
|
|
- if (i == 0) {
|
|
|
- newtime += item + ":";
|
|
|
- } else {
|
|
|
- newtime += item;
|
|
|
- }
|
|
|
- });
|
|
|
- let newtime2 = "";
|
|
|
- arr2.forEach((item, i) => {
|
|
|
- if (item.length == 1) {
|
|
|
- item = "0" + item;
|
|
|
- }
|
|
|
- if (i == 0) {
|
|
|
- newtime2 += item + ":";
|
|
|
- } else {
|
|
|
- newtime2 += item;
|
|
|
- }
|
|
|
- });
|
|
|
- _this.ly_ShowcurentTime = newtime + " - " + newtime2;
|
|
|
- });
|
|
|
- wavesurfer_ly.on("region-created", () => {
|
|
|
- wavesurfer_ly.clearRegions();
|
|
|
- });
|
|
|
- },
|
|
|
- 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;
|
|
|
- },
|
|
|
-
|
|
|
- // 播放录音
|
|
|
- playLY() {
|
|
|
- if (this.LY_regionData) {
|
|
|
- if (this.xunhunShow) {
|
|
|
- // this.LY_regionData.loop = true;
|
|
|
- // this.LY_regionData.playLoop(); // 循环播放选中区域
|
|
|
- wavesurfer_ly.play(this.LY_regionData.start, this.LY_regionData.end);
|
|
|
- } else {
|
|
|
- // this.LY_regionData.loop = false;
|
|
|
- wavesurfer_ly.play(this.LY_regionData.start, this.LY_regionData.end);
|
|
|
- // this.LY_regionData.play();
|
|
|
- }
|
|
|
- } else {
|
|
|
- wavesurfer_ly.play();
|
|
|
- }
|
|
|
- },
|
|
|
- // 暂停播放
|
|
|
- stopPlay() {
|
|
|
- this.wavesurfer_big.pause();
|
|
|
- if (this.LYstatus == "已结束") {
|
|
|
- wavesurfer_ly.pause();
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- // 开始录音
|
|
|
- startLY() {
|
|
|
- this.stopPlay();
|
|
|
- let node = document.getElementById("waveform_big");
|
|
|
- node.children[0].style.height = "130px";
|
|
|
- let lynode = document.getElementById("ly_big");
|
|
|
- lynode.style.display = "flex";
|
|
|
- // let lynodedv = document.getElementById("waveform_ly");
|
|
|
- // lynodedv.children[0].style.height = "130px";
|
|
|
- let _this = this;
|
|
|
- // _this.recorder.start(); //此处可以立即开始录音，但不建议这样编写，因为open是一个延迟漫长的操作，通过两次用户操作来分别调用open和start是推荐的最佳流程
|
|
|
- // _this.LYstatus = "录音中";
|
|
|
- _this.recorder.open(
|
|
|
- function () {
|
|
|
- wave = Recorder.WaveSurferView({
|
|
|
- elem: ".elem",
|
|
|
- keep: true,
|
|
|
- lineCount: 70,
|
|
|
- position: 0,
|
|
|
- minHeight: 1,
|
|
|
- stripeEnable: false,
|
|
|
- linear: [0, "#5370BB", 1, "#5370BB"],
|
|
|
- // linear: [
|
|
|
- // 0,
|
|
|
- // "rgba(0,0,0,1)",
|
|
|
- // 0.7,
|
|
|
- // "rgba(0,0,0,1)",
|
|
|
- // 1,
|
|
|
- // "rgba(0,0,0,1)",
|
|
|
- // ],
|
|
|
- centerColor: "",
|
|
|
- });
|
|
|
- //打开麦克风授权获得相关资源
|
|
|
- //dialog&&dialog.Cancel(); 如果开启了弹框，此处需要取消
|
|
|
- _this.recorder.start(); //此处可以立即开始录音，但不建议这样编写，因为open是一个延迟漫长的操作，通过两次用户操作来分别调用open和start是推荐的最佳流程
|
|
|
- _this.LYstatus = "录音中";
|
|
|
- },
|
|
|
- function (msg, isUserNotAllow) {
|
|
|
- //用户拒绝未授权或不支持
|
|
|
- //dialog&&dialog.Cancel(); 如果开启了弹框，此处需要取消
|
|
|
- }
|
|
|
- );
|
|
|
- },
|
|
|
- // 暂停录音
|
|
|
- stopLY() {
|
|
|
- this.recorder.pause();
|
|
|
- this.LYstatus = "暂停中";
|
|
|
- // this.drawRecordId && cancelAnimationFrame(this.drawRecordId);
|
|
|
- // this.drawRecordId = null;
|
|
|
- },
|
|
|
- // 继续录音
|
|
|
- goonLY() {
|
|
|
- this.stopPlay();
|
|
|
- this.recorder.resume();
|
|
|
- this.LYstatus = "录音中";
|
|
|
- },
|
|
|
- // 初始化录音声波
|
|
|
-
|
|
|
- // 结束录音
|
|
|
- endLY() {
|
|
|
- let _this = this;
|
|
|
- this.recorder.stop(
|
|
|
- function (blob, duration) {
|
|
|
- console.log(
|
|
|
- blob,
|
|
|
- (window.URL || webkitURL).createObjectURL(blob),
|
|
|
- "时长:" + duration + "ms"
|
|
|
- );
|
|
|
- _this.recorder.close(); //释放录音资源，当然可以不释放，后面可以连续调用start；但不释放时系统或浏览器会一直提示在录音，最佳操作是录完就close掉
|
|
|
- /*** 【立即播放例子】 ***/
|
|
|
- let lynodedv = document.getElementById("waveform_ly");
|
|
|
- lynodedv.removeChild(lynodedv.children[0]);
|
|
|
- const objectUrl = window.URL.createObjectURL(blob);
|
|
|
- _this.LY_url = objectUrl;
|
|
|
- _this.initLYaudioImage();
|
|
|
-
|
|
|
- if (_this.curQue.Bookanswer.practiceModel[_this.curSentIndex]) {
|
|
|
- _this.curQue.Bookanswer.practiceModel[_this.curSentIndex] = {
|
|
|
- recordSrc: objectUrl,
|
|
|
- };
|
|
|
- } else {
|
|
|
- _this.curQue.Bookanswer.practiceModel[_this.curSentIndex] = {
|
|
|
- recordSrc: objectUrl,
|
|
|
- };
|
|
|
- }
|
|
|
- },
|
|
|
- function (msg) {
|
|
|
- console.log("录音失败:" + msg);
|
|
|
- _this.recorder.close(); //可以通过stop方法的第3个参数来自动调用close
|
|
|
- }
|
|
|
- );
|
|
|
- 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() {
|
|
|
- if (this.loading) {
|
|
|
- return;
|
|
|
- }
|
|
|
- if (this.curSentIndex == 0) {
|
|
|
- this.$message.warning("已经是第一个句子了");
|
|
|
- return;
|
|
|
- }
|
|
|
- this.curSentIndex = this.curSentIndex - 1;
|
|
|
- this.getSentence();
|
|
|
- this.comparisonPlayStatus = false;
|
|
|
- if (this.isAuto) {
|
|
|
- this.curTime = this.bg;
|
|
|
- this.$refs.audioLineSent.onTimeupdateTime(this.bg / 1000);
|
|
|
- }
|
|
|
- },
|
|
|
- nextSentence() {
|
|
|
- if (this.loading) {
|
|
|
- return;
|
|
|
- }
|
|
|
- if (this.curSentIndex == this.sentList.length - 1) {
|
|
|
- this.$message.warning("已经是最后一个句子了");
|
|
|
- return;
|
|
|
- }
|
|
|
- this.curSentIndex = this.curSentIndex + 1;
|
|
|
- this.getSentence();
|
|
|
- this.comparisonPlayStatus = false;
|
|
|
- },
|
|
|
- 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(type) {
|
|
|
- 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;
|
|
|
- }
|
|
|
- if (this.patternType == "录音模式") {
|
|
|
- this.changetime();
|
|
|
- if (this.curQue.Bookanswer.practiceModel[this.curSentIndex]) {
|
|
|
- this.backStatus(true);
|
|
|
- this.curjuzi(
|
|
|
- this.curQue.Bookanswer.practiceModel[this.curSentIndex].recordSrc
|
|
|
- );
|
|
|
- this.LYstatus = "已结束";
|
|
|
- } else {
|
|
|
- this.backStatus(true);
|
|
|
- this.curjuzi();
|
|
|
- this.LYstatus = "未开始";
|
|
|
- }
|
|
|
- } else {
|
|
|
- _this.$nextTick(() => {
|
|
|
- if (_this.$refs.audioLineSent) {
|
|
|
- _this.$refs.audioLineSent.PlayAudio();
|
|
|
- }
|
|
|
- });
|
|
|
- }
|
|
|
- _this.checkCollStatus();
|
|
|
- },
|
|
|
- pauseAudio() {
|
|
|
- let audio = document.getElementsByTagName("audio");
|
|
|
- audio.forEach((item) => {
|
|
|
- item.pause();
|
|
|
- });
|
|
|
- },
|
|
|
- exitFullScreen() {
|
|
|
- // this.patternType = ;
|
|
|
- console.log(this.patternType);
|
|
|
- this.pauseAudio();
|
|
|
- if (this.patternType == "录音模式") {
|
|
|
- this.patternType = "";
|
|
|
- } else {
|
|
|
- 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.stopPlay();
|
|
|
- _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(type) {
|
|
|
- let YPindex = this.playList.indexOf("yp");
|
|
|
- let LYindex = this.playList.indexOf("ly");
|
|
|
- if (type == "play") {
|
|
|
- if (LYindex != -1) {
|
|
|
- this.playLY();
|
|
|
- } else {
|
|
|
- if (this.regionData) {
|
|
|
- if (this.xunhunShow) {
|
|
|
- // this.regionData.loop = true;
|
|
|
- // this.regionData.playLoop(); // 循环播放选中区域
|
|
|
- this.wavesurfer_big.play(
|
|
|
- this.regionData.start,
|
|
|
- this.regionData.end
|
|
|
- );
|
|
|
- } else {
|
|
|
- // this.regionData.loop = false;
|
|
|
- this.wavesurfer_big.play(
|
|
|
- this.regionData.start,
|
|
|
- this.regionData.end
|
|
|
- );
|
|
|
- // this.regionData.play();
|
|
|
- }
|
|
|
- } else {
|
|
|
- let time = this.wavesurfer_big.getCurrentTime();
|
|
|
- let start = this.bg / 1000;
|
|
|
- let end = this.ed / 1000;
|
|
|
- if (time * 1000 == this.ed || this.curTime * 1000 == 0) {
|
|
|
- this.wavesurfer_big.play(start, end);
|
|
|
- } else {
|
|
|
- this.wavesurfer_big.play(time, end);
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- } else {
|
|
|
- if (LYindex != -1) {
|
|
|
- wavesurfer_ly.pause();
|
|
|
- } else {
|
|
|
- this.wavesurfer_big.pause();
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- },
|
|
|
- //生命周期 - 创建完成（可以访问当前this实例）
|
|
|
- created() {},
|
|
|
- //生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
- mounted() {
|
|
|
- // this.startCanvas();
|
|
|
- let _this = this;
|
|
|
- $(window).resize(() => {
|
|
|
- _this.getScreenHeight();
|
|
|
- });
|
|
|
- _this.getScreenHeight();
|
|
|
- document.addEventListener("keyup", function (e) {
|
|
|
- if (_this.isKeyboard) {
|
|
|
- if (e.keyCode == 32) {
|
|
|
- //空格
|
|
|
- if (_this.patternType == "录音模式") {
|
|
|
- if (!_this.isPlaying) {
|
|
|
- _this.playMusic("play");
|
|
|
- } else {
|
|
|
- _this.playMusic("puse");
|
|
|
- }
|
|
|
- } else {
|
|
|
- _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("first");
|
|
|
- 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;
|
|
|
- position: relative;
|
|
|
- .big_dv2 {
|
|
|
- flex: 1;
|
|
|
- }
|
|
|
- .zoom_dv {
|
|
|
- position: absolute;
|
|
|
- right: 4px;
|
|
|
- top: 4px;
|
|
|
- display: flex;
|
|
|
- z-index: 1;
|
|
|
- .add {
|
|
|
- margin-left: 4px;
|
|
|
- }
|
|
|
- .add,
|
|
|
- .remove {
|
|
|
- width: 24px;
|
|
|
- height: 24px;
|
|
|
- background: rgba(0, 0, 0, 0.2);
|
|
|
- border: 1px solid #424242;
|
|
|
- border-radius: 3px;
|
|
|
- cursor: pointer;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- }
|
|
|
- .text {
|
|
|
- width: 64px;
|
|
|
- height: 24px;
|
|
|
- background: rgba(0, 0, 0, 0.2);
|
|
|
- border: 1px solid #424242;
|
|
|
- border-radius: 3px;
|
|
|
- text-align: center;
|
|
|
- line-height: 24px;
|
|
|
- color: rgba(255, 255, 255, 0.9);
|
|
|
- margin: 0 4px;
|
|
|
- }
|
|
|
- img {
|
|
|
- width: 14px;
|
|
|
- height: 14px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .ly {
|
|
|
- .play_erji {
|
|
|
- margin-top: 0;
|
|
|
- }
|
|
|
- .erji {
|
|
|
- margin-top: 0;
|
|
|
- }
|
|
|
- }
|
|
|
- .play_erji {
|
|
|
- // margin-top: 16px;
|
|
|
- width: 64px;
|
|
|
- height: 130px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- background: #4f92f6;
|
|
|
- cursor: pointer;
|
|
|
- img {
|
|
|
- width: 28px;
|
|
|
- height: 28px;
|
|
|
- }
|
|
|
- }
|
|
|
- .erji {
|
|
|
- // margin-top: 16px;
|
|
|
- width: 64px;
|
|
|
- height: 130px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- background: #ffffff;
|
|
|
- cursor: pointer;
|
|
|
- img {
|
|
|
- width: 28px;
|
|
|
- height: 28px;
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
-#waveform_ly {
|
|
|
- background: #141414;
|
|
|
-}
|
|
|
-#waveform_big {
|
|
|
- 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;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- .gray_speed {
|
|
|
- opacity: 0.3;
|
|
|
- }
|
|
|
- .speed {
|
|
|
- width: 48px;
|
|
|
- height: 48px;
|
|
|
- margin-right: 44px;
|
|
|
- text-align: center;
|
|
|
- line-height: 48px;
|
|
|
- cursor: pointer;
|
|
|
- position: relative;
|
|
|
- .speedList {
|
|
|
- position: absolute;
|
|
|
- top: -177px;
|
|
|
- width: 52px;
|
|
|
- background: #ffffff;
|
|
|
- border: 1px solid rgba(0, 0, 0, 0.08);
|
|
|
- border-radius: 4px;
|
|
|
- z-index: 5;
|
|
|
- padding: 2px 0;
|
|
|
- > div:hover {
|
|
|
- background: #e9e9e9;
|
|
|
- border-radius: 4px;
|
|
|
- }
|
|
|
- > div {
|
|
|
- padding: 4px 2px;
|
|
|
- width: 44px;
|
|
|
- height: 26px;
|
|
|
- text-align: right;
|
|
|
- margin: 1px 4px;
|
|
|
- font-weight: 400;
|
|
|
- font-size: 14px;
|
|
|
- line-height: 22px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .speed_sele {
|
|
|
- background: #e6e6e6;
|
|
|
- border-radius: 4px;
|
|
|
- }
|
|
|
- img {
|
|
|
- cursor: pointer;
|
|
|
- margin-right: 44px;
|
|
|
- }
|
|
|
-}
|
|
|
-.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;
|
|
|
- .darcColor_pattern {
|
|
|
- background: rgba(255, 255, 255, 0.1) !important;
|
|
|
- border: 1px solid rgba(0, 0, 0, 0.1) !important;
|
|
|
- }
|
|
|
- .pattern {
|
|
|
- width: 56px;
|
|
|
- height: 56px;
|
|
|
- background: #ffffff;
|
|
|
- border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
- border-radius: 40px;
|
|
|
- cursor: pointer;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- img {
|
|
|
- width: 24px;
|
|
|
- height: 24px;
|
|
|
- }
|
|
|
- }
|
|
|
- > 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;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- > div {
|
|
|
- margin-left: 22px;
|
|
|
- img {
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- }
|
|
|
- &-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-x: scroll;
|
|
|
- }
|
|
|
-}
|
|
|
-#waveform_ly {
|
|
|
- > :nth-child(1) {
|
|
|
- overflow-x: scroll;
|
|
|
- }
|
|
|
-}
|
|
|
-.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