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

<template>
  <div class="Audio">
    <div class="audioLine" v-if="!hideSlider">
      <div
        class="play"
        :class="audio.playing ? 'playBtn' : 'pauseBtn'"
        @click="PlayAudio"
      />
      <template v-if="!isRepeat">
        <el-slider
          v-model="playValue"
          :style="{ width: sliderWidth + 'px', height: '2px' }"
          :format-tooltip="formatProcessToolTip"
          @change="changeCurrentTime"
        />
        <span
          ><template v-if="audio.playing">-</template
          >{{
            audio.maxTime
              ? realFormatSecond(audio.maxTime - audio.currentTime)
              : ""
          }}</span
        >
      </template>
      <audio
        ref="audio"
        :src="mp3"
        @loadedmetadata="onLoadedmetadata"
        @timeupdate="onTimeupdate"
      />
    </div>
    <div class="audioLine2" v-else>
      <div
        class="play-icon"
        :class="audio.playing ? 'playBtn-icon' : 'pauseBtn-icon'"
        @click="PlayAudio"
      />
    </div>
    <audio
      :ref="audioId"
      :src="mp3"
      @loadedmetadata="onLoadedmetadata"
      @timeupdate="onTimeupdate"
      :id="audioId"
    />
  </div>
</template>

<script>
// 这里可以导入其它文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》from ‘《组件路径》';
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  props: [
    "mp3",
    "getCurTime",
    "stopAudio",
    "width",
    "isRepeat",
    "themeColor",
    "hideSlider",
    "ed",
    "bg",
    "audioId",
  ],
  data() {
    // 这里存放数据
    return {
      playValue: 0,
      audio: {
        // 该字段是音频是否处于播放状态的属性
        playing: false,
        // 音频当前播放时长
        currentTime: 0,
        // 音频最大播放时长
        maxTime: 0,
        isPlaying: false,
      },
      audioAllTime: null, // 展示总时间
      duioCurrentTime: null, // 剩余时间
    };
  },
  // 计算属性 类似于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;
    let audioId = _this.audioId;
    _this.$refs[audioId].addEventListener("play", function () {
      _this.audio.playing = true;
      _this.audio.isPlaying = true;
    });
    _this.$refs[audioId].addEventListener("pause", function () {
      _this.audio.playing = false;
    });
    _this.$refs[audioId].addEventListener("ended", function () {
      _this.audio.playing = false;
      _this.audio.isPlaying = 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();
        }
      });

      if (this.audio.playing) {
        this.$refs[audioId].pause();
        this.audio.playing = false;
        this.$emit("handleListenRead", false);
      } else {
        if (this.hideSlider) {
          this.$refs[audioId].play();
          this.onTimeupdateTime(this.bg / 1000);
        } else {
          this.$refs[audioId].play();
        }
        this.audio.playing = true;
        this.$emit("handleChangeStopAudio");
        this.$emit("handleListenRead", true);
      }
    },
    // 点击 拖拽播放音频
    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(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.audio.currentTime * 1000 > this.ed) {
        this.$refs[audioId].pause();
      }
    },
    onTimeupdateTime(res, playFlag) {
      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;
    },
  },
  // 生命周期-创建之前
  beforeCreated() {},
  // 生命周期-更新之前
  beforUpdate() {},
  // 生命周期-销毁之前
  beforeDestory() {},
  // 生命周期-销毁完成
  destoryed() {},
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.Audio {
  width: 100%;
  .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;
    .play {
      margin-right: 12px;
      margin-left: 8px;
      width: 16px;
      height: 16px;
      cursor: pointer;
      display: block;
      // &.playBtn {
      //   background: url("../../../assets/pause.png") no-repeat left top;
      //   background-size: 100% 100%;
      // }
      // &.pauseBtn {
      //   background: url("../../../assets/play.png") no-repeat left top;
      //   background-size: 100% 100%;
      // }
    }

    span {
      font-size: 16px;
      line-height: 19px;
      color: #000;
      margin-left: 8px;
      margin-right: 12px;
      min-width: 56px;
      text-align: right;
    }
  }
  > .audioLine2 {
    .play-icon {
      width: 16px;
      height: 16px;
      cursor: pointer;
      &.playBtn-icon {
        background: url("../../../assets/NPC/icon-voice-play-red.png") no-repeat
          left top;
        background-size: 100% 100%;
      }
      &.pauseBtn-icon {
        background: url("../../../assets/NPC/play-red.png") no-repeat left top;
        background-size: 100% 100%;
      }
    }
  }
}
.NPC-Big-Book-preview-green {
  .playBtn-icon {
    background: url("../../../assets/NPC/icon-voice-play-green.png") no-repeat
      left top;
    background-size: 100% 100%;
  }
  .pauseBtn-icon {
    background: url("../../../assets/NPC/play-green.png") no-repeat left top;
    background-size: 100% 100%;
  }
}
.NPC-Big-Book-preview-red {
  .playBtn-icon {
    background: url("../../../assets/NPC/icon-voice-play-red.png") no-repeat
      left top;
    background-size: 100% 100%;
  }
  .pauseBtn-icon {
    background: url("../../../assets/NPC/play-red.png") no-repeat left top;
    background-size: 100% 100%;
  }
}
.NPC-Big-Book-preview-brown {
  .playBtn-icon {
    background: url("../../../assets/NPC/icon-voice-play-brown.png") no-repeat
      left top;
    background-size: 100% 100%;
  }
  .pauseBtn-icon {
    background: url("../../../assets/NPC/play-brown.png") no-repeat left top;
    background-size: 100% 100%;
  }
}
</style>
<style lang="scss">
.Audio {
  .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;
  }
  .el-slider__bar {
    height: 2px;
    background: rgba(118, 99, 236, 1);
  }
  .el-slider__button {
    background: rgba(118, 99, 236, 1);
    border: none;
  }
}
.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;
    }
  }
}
.NPC-Big-Book-preview-brown {
  .Audio {
    .el-slider__bar {
      background: #bd8865 !important;
    }
    .el-slider__button {
      background: #bd8865 !important;
    }
  }
}
</style>