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

<template>
  <!-- mp3Source && mp3Source == 'tts' ? 'Audio-tts' : '', -->
  <div :class="['Audio', 'AudioFull']">
    <div
      :class="['audioLine3', bgIndex == 1 ? 'audioLine3-green' : '']"
      @click="PlayAudio"
    >
      <div
        class="play"
        :class="[
          audio.loading ? 'loadBtn' : audio.playing ? 'playBtn' : 'pauseBtn',
        ]"
      />
    </div>

    <!-- <div :class="['audioLine', bgIndex == 1 ? 'audioLine-green' : '']">
      <div
        class="play"
        :class="[
          audio.loading ? 'loadBtn' : audio.playing ? 'playBtn' : 'pauseBtn',
        ]"
        @click="PlayAudio"
      />
      <template >
        <el-slider
          v-model="playValue"
          :style="{ width: sliderWidth + 'px', height: '6px' }"
          :format-tooltip="formatProcessToolTip"
          @change="changeCurrentTime"
        />
        <span :class="bgIndex == 1 ? 'color-white' : ''">
          {{ realFormatSecond(audio.maxTime) }}
        
        </span>
      </template>
    </div> -->
    <!-- <div v-else class="audioLine2">
      <div
        class="play-icon"
        :class="
          audio.loading
            ? 'loadBtn'
            : audio.playing
            ? 'playBtn-icon'
            : 'pauseBtn-icon'
        "
        @click="PlayAudio"
      />
    </div> -->
    <audio
      :id="audioId"
      :ref="audioId"
      :src="mp3"
      preload="meta"
      @loadedmetadata="onLoadedmetadata"
      @timeupdate="onTimeupdate"
      @canplaythrough="oncanplaythrough"
    />
  </div>
</template>

<script>
// 这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》from ‘《组件路径》';
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  props: [
    "mp3",
    "mp3Source",
    "getCurTime",
    "stopAudio",
    "width",
    "isRepeat",
    "themeColor",
    "ed",
    "bg",
    "audioId",
    "maxTime",
    "hideSlider",
    "bgIndex",
    "wordPlay",
    "isAuto",
    "curTime",
  ],
  data() {
    // 这里存放数据
    return {
      playValue: 0,
      audio: {
        // 该字段是音频是否处于播放状态的属性
        playing: false,
        // 音频当前播放时长
        currentTime: 0,
        // 音频最大播放时长
        maxTime: 0,
        isPlaying: false,
        loading: false,
      },
      playTime: parseInt(this.maxTime),
      audioAllTime: null, // 展示总时间
      duioCurrentTime: null, // 剩余时间
      count: 0,
      loading: null,
      playcount: 0,
    };
  },
  // 计算属性 类似于data概念
  computed: {
    sliderWidth() {
      let width = 0;
      if (this.width) {
        width = this.width;
      } else {
        width = 662;
      }
      return width;
    },
  },
  // 监控data中数据变化
  watch: {
    stopAudio: {
      handler(val, oldVal) {
        const _this = this;
        if (val) {
          _this.$refs[_this.audioId].pause();
          _this.audio.playing = false;
        }
      },
      // 深度观察监听
      deep: true,
    },
    "audio.playing": {
      handler(val) {
        this.$emit("playChange", val);
        if (val) this.$emit("handleChangeStopAudio");
      },
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    let _this = this;
    _this.$nextTick(() => {
      if (_this.wordPlay) {
        _this.PlayAudio();
      }
      if (_this.isAuto) {
        _this.PlayAudio();
      }
    });

    let audioId = _this.audioId;
    _this.$refs[audioId].addEventListener("loadstart", function () {});
    _this.$refs[audioId].addEventListener("play", function () {
      _this.audio.playing = true;
      _this.audio.loading = false;
    });
    _this.$refs[audioId].addEventListener("pause", function () {
      _this.audio.playing = false;
      if (_this.audio.currentTime * 1000 + 500 > _this.ed) {
        //_this.$emit("sentPause", true);
        _this.playValue = 0;
        _this.audio.isPlaying = false;
      }
      if (_this.wordPlay) {
        _this.$emit("changePlayStatus");
        _this.audio.isPlaying = false;
      }
    });
    _this.$refs[audioId].addEventListener("ended", function () {
      _this.audio.playing = false;
      _this.audio.isPlaying = false;
      _this.$emit("handleListenRead", false);
    });

    this.$nextTick(() => {
      document
        .getElementsByClassName("el-slider__button-wrapper")[0]
        .addEventListener("mousedown", function () {
          _this.$refs[audioId].pause();
          _this.audio.playing = false;
        });
    });
  },
  // 生命周期-挂载之前
  beforeMount() {},
  // 生命周期-更新之后
  updated() {},
  // 如果页面有keep-alive缓存功能，这个函数会触发
  activated() {},
  // 方法集合
  methods: {
    PlayAudio() {
      let audioId = this.audioId;
      let audio = document.getElementsByTagName("audio");
      audio.forEach((item) => {
        if (item.src == this.mp3) {
          if (item.id !== audioId) {
            item.pause();
          }
        } else {
          item.pause();
        }
      });
      let video = document.getElementsByTagName("video");
      video.forEach((vItem) => {
        vItem.pause();
      });
      this.$set(this.audio, "isPlaying", true);

      if (this.audio.playing) {
        this.$refs[audioId].pause();
        this.audio.playing = false;
        this.$emit("handleListenRead", false);
      } else {
        if (this.count == 0) {
          this.audio.loading = true;
          this.count++;
        }

        this.$refs[audioId].play();
        if (this.playcount == 0) {
          this.onTimeupdateTime(this.bg / 1000);
          this.playcount++;
        }

        this.$emit("handleChangeStopAudio");
        this.$emit("handleListenRead", true);
      }
    },
    oncanplaythrough() {
      let _this = this;
      // setTimeout(() => {
      _this.audio.loading = false;

      // }, 10000);
    },
    // 点击 拖拽播放音频
    changeCurrentTime(value) {
      let audioId = this.audioId;
      this.$refs[audioId].play();
      this.audio.playing = true;
      this.$refs[audioId].currentTime = parseInt(
        (value / 100) * this.audio.maxTime
      );
    },
    mousedown() {
      let audioId = this.audioId;
      this.$refs[audioId].pause();
      this.audio.playing = false;
    },
    // 进度条格式化toolTip
    formatProcessToolTip(index) {
      index = parseInt((this.audio.maxTime / 100) * index);
      return this.realFormatSecond(index);
    },
    // 音频加载完之后
    onLoadedmetadata(res) {
      this.audio.maxTime = parseInt(this.maxTime);
      //this.audio.maxTime = parseInt(res.target.duration);
      //this.playTime = parseInt(this.maxTime);
      //this.audioAllTime = this.realFormatSecond(this.audio.maxTime);
    },
    // 当音频当前时间改变后，进度条也要改变
    onTimeupdate(res) {
      let _this = this;
      let audioId = _this.audioId;

      _this.audio.currentTime = res.target.currentTime;
      _this.getCurTime(res.target.currentTime);
      let time = _this.audio.currentTime - _this.bg / 1000;
      _this.playValue = (time / _this.audio.maxTime) * 100;
      setTimeout(() => {
        if (_this.audio.currentTime * 1000 > _this.ed) {
          if (_this.$refs[audioId]) {
            _this.$refs[audioId].pause();
            _this.playcount = 0;
          }
        }
      }, 50);
    },
    onTimeupdateTime(res, playFlag) {
      if (!res) return;
      let audioId = this.audioId;
      this.$refs[audioId].currentTime = res;
      let time = res - this.bg / 1000;
      this.playValue = (time / this.audio.maxTime) * 100;
      if (playFlag) {
        let audio = document.getElementsByTagName("audio");
        audio.forEach((item) => {
          if (item.id !== audioId) {
            item.pause();
          }
        });
        this.$refs[audioId].play();
      }
    },
    // 将整数转换成 时：分：秒的格式
    realFormatSecond(value) {
      let theTime = parseInt(value); // 秒
      let theTime1 = 0; // 分
      let theTime2 = 0; // 小时
      if (theTime > 60) {
        theTime1 = parseInt(theTime / 60);
        theTime = parseInt(theTime % 60);
        if (theTime1 > 60) {
          theTime2 = parseInt(theTime1 / 60);
          theTime1 = parseInt(theTime1 % 60);
        }
      }
      let result = String(parseInt(theTime));
      if (result < 10) {
        result = "0" + result;
      }
      if (theTime1 > 0) {
        result = String(parseInt(theTime1)) + ":" + result;
        if (theTime1 < 10) {
          result = "0" + result;
        }
      } else {
        result = "00:" + result;
      }
      if (theTime2 > 0) {
        result = String(parseInt(theTime2)) + ":" + result;
        if (theTime2 < 10) {
          result = "0" + result;
        }
      } else {
        // result = "00:" + result;
      }
      return result;
    },
  },
  // 生命周期-创建之前
  beforeCreated() {},
  // 生命周期-更新之前
  beforUpdate() {},
  // 生命周期-销毁之前
  beforeDestory() {},
  // 生命周期-销毁完成
  destoryed() {},
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.AudioFull {
  .audioLine {
    display: flex;
    align-items: center;
    width: 100%;
    height: 40px;
    background: #ffffff;
    // border: 1px solid rgba(0, 0, 0, 0.1);
    // box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    border-radius: 4px;
    &-green {
      background: 0 0;
    }
    .play {
      margin-right: 12px;
      margin-left: 8px;
      width: 16px;
      min-width: 16px;
      height: 16px;
      cursor: pointer;
      display: block;
    }

    span {
      font-size: 16px;
      line-height: 19px;
      color: #000;
      margin-left: 8px;
      margin-right: 12px;
      font-weight: bold;
      font-size: 16px;
      line-height: 24px;
      text-align: right;
      &.color-white {
        color: #fff;
      }
    }
  }
  .audioLine2 {
    .play-icon {
      width: 16px;
      height: 16px;
      cursor: pointer;
      &.playBtn-icon {
        background: url("../../../assets/icon/pauseC-16-normal-red.png")
          no-repeat left top;
        background-size: 100% 100%;
      }
      &.pauseBtn-icon {
        background: url("../../../assets/NPC/compare-pause-red.png") no-repeat
          left top;
        background-size: 100% 100%;
      }
    }
  }
  .loadBtn {
    background: url("../../../assets/NPC/loading-red.png") no-repeat left top;
    background-size: 100% 100%;
  }
  .audioLine3 {
    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;

    .play {
      width: 24px;
      height: 24px;
      cursor: pointer;
      &.playBtn {
        background: url("../../../assets/icon/pause-24-normal-red.png")
          no-repeat left top;
        background-size: 100% 100%;
      }
      &.pauseBtn {
        background: url("../../../assets/icon/play-24-normal-red.png") no-repeat
          left top;
        background-size: 100% 100%;
      }
    }
    &-green {
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid rgba(0, 0, 0, 0.1);
      .play {
        &.playBtn {
          background: url("../../../assets/icon/pause-24-normal-yellow.png")
            no-repeat left top;
          background-size: 100% 100%;
        }
        &.pauseBtn {
          background: url("../../../assets/icon/play-24-normal-yellow.png")
            no-repeat left top;
          background-size: 100% 100%;
        }
      }
    }
  }
}
</style>
<style lang="scss">
.AudioFull {
  .el-slider__button-wrapper {
    position: relative;
    z-index: 0;
  }
  .el-slider__button {
    width: 6px;
    height: 12px;
    border-radius: 6px;
    top: 12px;
    position: absolute;
  }
  .el-slider__runway {
    margin: 0;
    padding: 0;
    background: #e5e5e5;
    border-radius: 6px;
    height: 6px;
  }
  .el-slider {
    position: relative;
  }
  .el-slider__bar {
    height: 6px;
    border-radius: 6px 0 0 6px;
    background: #de4444;
  }
  .el-slider__button {
    background: #de4444;
    border: none;
  }
  .el-slider__button-wrapper {
    width: 25px;
  }
  .audioLine-green {
    .el-slider__bar {
      background: #ffc600 !important;
    }
    .el-slider__button {
      background: #ffc600 !important;
    }
  }
}
.NPC-Book-Sty {
  .AudioFull {
    .el-slider__bar {
      height: 6px;
      border-radius: 6px;
      background: #de4444;
    }
    .el-slider__button {
      background: #de4444;
      border: none;
    }
    .audioLine-green {
      .el-slider__bar {
        background: #ffc600 !important;
      }
      .el-slider__button {
        background: #ffc600 !important;
      }
    }
  }
}
.NPC-Big-Book-preview-green {
  .AudioFull {
    .el-slider__bar {
      background: #24b99e !important;
    }
    .el-slider__button {
      background: #24b99e !important;
    }
    .audioLine-green {
      .el-slider__bar {
        background: #ffc600 !important;
      }
      .el-slider__button {
        background: #ffc600 !important;
      }
    }
    .audioLine2 {
      .play-icon {
        &.playBtn-icon {
          background: url("../../../assets/icon/pauseC-16-normal-Green.png")
            no-repeat left top;
          background-size: 100% 100%;
        }
        &.pauseBtn-icon {
          background: url("../../../assets/NPC/compare-pause-green.png")
            no-repeat left top;
          background-size: 100% 100%;
        }
      }
    }
    .loadBtn {
      background: url("../../../assets/NPC/loading-green.png") no-repeat left
        top;
      background-size: 100% 100%;
    }
    .audioLine3 {
      .play {
        &.playBtn {
          background: url("../../../assets/icon/pause-24-normal-green.png")
            no-repeat left top;
          background-size: 100% 100%;
        }
        &.pauseBtn {
          background: url("../../../assets/icon/play-24-normal-Green.png")
            no-repeat left top;
          background-size: 100% 100%;
        }
      }
      &-green {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(0, 0, 0, 0.1);
        .play {
          &.playBtn {
            background: url("../../../assets/icon/pause-24-normal-yellow.png")
              no-repeat left top;
            background-size: 100% 100%;
          }
          &.pauseBtn {
            background: url("../../../assets/icon/play-24-normal-yellow.png")
              no-repeat left top;
            background-size: 100% 100%;
          }
        }
      }
    }
  }
}
.NPC-Big-Book-preview-brown {
  .AudioFull {
    .el-slider__bar {
      background: #bd8865 !important;
    }
    .el-slider__button {
      background: #bd8865 !important;
    }
    .audioLine-green {
      .el-slider__bar {
        background: #ffc600 !important;
      }
      .el-slider__button {
        background: #ffc600 !important;
      }
    }
    .audioLine2 {
      .play-icon {
        &.playBtn-icon {
          background: url("../../../assets/icon/pauseC-16-normal-Brown.png")
            no-repeat left top;
          background-size: 100% 100%;
        }
        &.pauseBtn-icon {
          background: url("../../../assets/NPC/compare-pause-brown.png")
            no-repeat left top;
          background-size: 100% 100%;
        }
      }
    }
    .loadBtn {
      background: url("../../../assets/NPC/loading-brown.png") no-repeat left
        top;
      background-size: 100% 100%;
    }
    .audioLine3 {
      .play {
        &.playBtn {
          background: url("../../../assets/icon/pause-24-normal-brown.png")
            no-repeat left top;
          background-size: 100% 100%;
        }
        &.pauseBtn {
          background: url("../../../assets/icon/play-24-normal-Brown.png")
            no-repeat left top;
          background-size: 100% 100%;
        }
      }
      &-green {
        background: rgba(255, 255, 255, 0.1);
        border: 1px solid rgba(0, 0, 0, 0.1);
        .play {
          &.playBtn {
            background: url("../../../assets/icon/pause-24-normal-yellow.png")
              no-repeat left top;
            background-size: 100% 100%;
          }
          &.pauseBtn {
            background: url("../../../assets/icon/play-24-normal-yellow.png")
              no-repeat left top;
            background-size: 100% 100%;
          }
        }
      }
    }
  }
}
</style>