GCLS_Page_Book_Component_NPC/src/components/Adult/preview/Voicefullscreen.vue

<!--  -->
<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">
          <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"
              id="waveform_big"
              ref="waveform_big"
            />
            <div id="timeline" ref="timeline"></div>
          </div>
        </div>
        <div class="big" id="ly_big" style="display: none">
          <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"
              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">{{ 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,
      timer: null,
      ShowcurentTime: 0,
      LYstatus: "未开始",
      startLyShow: false,
      //波浪图-录音
      drawRecordId: null,
      oCanvas: null,
      ctx: null,
      //波浪图-播放
      drawPlayId: null,
      pCanvas: null,
      pCtx: null,
      zoomNumber: 0,
      lyzoomNumber: 1500,
      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: {
    // 对比播放
    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 = 0;
      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;
      }
      let index = this.playList.indexOf(type);
      if (index != -1) {
        this.playList.splice(index, 1);
      } else {
        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) {
      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) {
      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;
      }
      that.wavesurfer_ly.zoom(Number(that.lyzoomNumber), this.zoomTime);
    },
    // 初始化声波
    initaudioImage(audioRate, isPlaying) {
      this.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(0, 180, 0, 0.5)",
              },
            ],
          })
        );
      }
      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(254, 255, 255, 0.4)",
        });
      }

      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(0, 180, 0, 0.5)",
            });
            that.wavesurfer_big.clearRegions(); // 音频加载完成
          }
          if (!audioRate) {
            that.wavesurfer_big.play(start, end);
          } else {
            if (isPlaying) {
              that.playMusic("play");
            }
          }
          that.wavesurfer_big.zoom(0);
          that.loading = false;
          that.$forceUpdate();
        });
      });
      // 更新区域时。回调将接收该Region对象。
      that.wavesurfer_big.on("region-updated", function (region) {
        // region.playLoop(); // 循环播放选中区域
        // region.play()
        that.regionData = region;
      });
      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;
        that.playList = [];

        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");
                }
              }
            }
          }
        }
      });
      that.wavesurfer_big.on("interaction", function (e) {
        that.isPlaying = false;
        that.stopPlay();
      });
      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;
      } 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.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(0, 180, 0, 0.3)",
              },
            ],
          })
        );
      }
      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(1500));
        if (!_this.LY_regionData) {
          wavesurfer_ly.enableDragSelection({
            color: "rgba(0, 180, 0, 0.3)",
          });
          wavesurfer_ly.clearRegions(); // 音频加载完成
        }
        _this.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;
        _this.playList = [];
        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 (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;
      });
      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");
          }
        }
      });

      // 更新区域时。回调将接收该Region对象。
      wavesurfer_ly.on("region-updated", function (region) {
        // region.playLoop(); // 循环播放选中区域
        // region.play()
        _this.LY_regionData = region;
      });
      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();
      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();
    },
    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(this.curTime / 1000, 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;
    .big_dv2 {
      flex: 1;
    }
  }
  .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>