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

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

    <audio
      :id="audioId"
      :ref="audioId"
      :src="mp3"
      preload="meta"
      @loadedmetadata="onLoadedmetadata"
      @timeupdate="onTimeupdate"
      @canplaythrough="oncanplaythrough"
    />
  </div>
</template>

<script>
export default {
  props: [
    "mp3",
    "bgIndex",
    "getCurTime",
    "stopAudio",
    "width",
    "isRepeat",
    "themeColor",
    "hideSlider",
    "ed",
    "bg",
    "audioId",
    "type",
    "hasSelectedCell"
  ],
  data() {
    // 这里存放数据
    return {
      playValue: 0,
      audio: {
        // 该字段是音频是否处于播放状态的属性
        playing: false,
        // 音频当前播放时长
        currentTime: 0,
        // 音频最大播放时长
        maxTime: 0,
        isPlaying: false,
        loading: false
      },
      audioAllTime: null, // 展示总时间
      duioCurrentTime: null, // 剩余时间
      count: 0,
      loading: null,
      isClick: false
    };
  },
  // 计算属性 类似于data概念
  computed: {
    sliderWidth() {
      let width = 0;
      if (this.width) {
        width = this.width;
      } else {
        width = 662;
      }
      return width;
    }
  },
  // 监控data中数据变化
  watch: {
    stopAudio: {
      handler(val) {
        if (val) {
          this.$refs[this.audioId].pause();
          this.audio.playing = false;
        }
      }
    },
    "audio.playing": {
      handler(val) {
        this.$emit("playChange", val);
      }
    }
  },
  mounted() {
    let audioId = this.audioId;
    this.$refs[audioId].addEventListener("loadstart", () => {});
    this.$refs[audioId].addEventListener("play", () => {
      this.audio.playing = true;
      this.audio.isPlaying = true;
      this.audio.loading = false;
    });
    this.$refs[audioId].addEventListener("pause", () => {
      this.audio.playing = false;
      if (this.hideSlider && this.audio.currentTime * 1000 + 500 > this.ed) {
        this.$emit("sentPause", true);
      }
      this.$emit("handleListenRead", false);
    });
    this.$refs[audioId].addEventListener("ended", () => {
      this.audio.playing = false;
      this.audio.isPlaying = false;
      this.$emit("handleListenRead", false);
      this.isClick = false;
      if (this.isRepeat && !this.hasSelectedCell) {
        this.onTimeupdateTime(0);
        this.PlayAudio();
      }
    });

    this.$nextTick(() => {
      document
        .getElementsByClassName("el-slider__button-wrapper")[0]
        .addEventListener("mousedown", () => {
          this.$refs[audioId].pause();
          this.audio.playing = false;
        });
    });
  },
  methods: {
    parentPalyAudio() {
      if (this.hasSelectedCell) {
        return this.$emit("parentPlayAudio");
      }
    },

    PlayAudio() {
      let audioId = this.audioId;
      document.getElementsByTagName("audio").forEach(item => {
        if (item.src === this.mp3) {
          if (item.id !== audioId) {
            item.pause();
          }
        } else {
          item.pause();
        }
      });
      document.getElementsByTagName("video").forEach(vItem => {
        vItem.pause();
      });

      if (this.audio.playing) {
        this.$refs[audioId].pause();
        this.audio.playing = false;
        this.$emit("handleListenRead", false);
        this.isClick = false;
      } else {
        if (this.count === 0) {
          this.audio.loading = true;
          this.count += 1;
        }
        if (this.hideSlider) {
          this.$refs[audioId].play();
          this.onTimeupdateTime(this.bg / 1000);
        } else {
          this.$refs[audioId].play();
        }
        this.$emit("handleChangeStopAudio");
        this.$emit("handleListenRead", true);
        this.isClick = true;
      }
    },
    oncanplaythrough() {
      // 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) {
      return this.realFormatSecond(
        parseInt((this.audio.maxTime / 100) * index)
      );
    },
    // 音频加载完之后
    onLoadedmetadata(res) {
      this.audio.maxTime = parseInt(res.target.duration);
      this.audioAllTime = this.realFormatSecond(this.audio.maxTime);
    },
    // 当音频当前时间改变后，进度条也要改变
    onTimeupdate(res) {
      let audioId = this.audioId;
      this.audio.currentTime = res.target.currentTime;
      this.getCurTime(res.target.currentTime);
      this.playValue = (this.audio.currentTime / this.audio.maxTime) * 100;
      if (this.type == "audioLine") {
        if (!this.isClick && this.audio.currentTime * 1000 > this.ed) {
          this.$refs[audioId].pause();
          this.$emit("emptyEd");
        }
      } else if (this.audio.currentTime * 1000 > this.ed) {
        this.$refs[audioId].pause();
      }
    },
    onTimeupdateTime(res, playFlag) {
      if (!res) return;
      let audioId = this.audioId;
      this.$refs[audioId].currentTime = res;
      this.playValue = (res / 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;
    }
  }
};
</script>

<style lang="scss" scoped>
.AudioFull {
  .audioLine {
    display: flex;
    align-items: center;
    width: 100%;
    height: 40px;
    background: #ffffff;
    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">
.Audio {
  .el-slider__bar {
    height: 2px;
    background: #de4444;
  }
  .el-slider__button {
    background: #de4444;
    border: none;
  }
  .el-slider__button-wrapper {
    width: 25px;
  }
  .el-slider__button-wrapper {
    position: relative;
    z-index: 0;
  }
  .el-slider__button {
    width: 8px;
    height: 8px;
    top: 12px;
    position: absolute;
  }
  .el-slider__runway {
    margin: 0;
    padding: 0;
    background: #e5e5e5;
    border-radius: 0px;
    height: 2px;
  }
  .el-slider {
    position: relative;
  }
}
.NPC-Book-Sty {
  .Audio {
    .el-slider__bar {
      height: 2px;
      background: #de4444;
    }
    .el-slider__button {
      background: #de4444;
      border: none;
    }
  }
}
.NPC-Big-Book-preview-green {
  .Audio {
    .el-slider__bar {
      background: #24b99e !important;
    }
    .el-slider__button {
      background: #24b99e !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%;
    }
  }
}
.NPC-Big-Book-preview-brown {
  .Audio {
    .el-slider__bar {
      background: #bd8865 !important;
    }
    .el-slider__button {
      background: #bd8865 !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%;
    }
  }
}
</style>