GCLS_Page_Book_Component_NPC/src/components/common/AudioRed.vue

<!--  -->
<template>
  <div @click="handlePlayVoice" class="content-voices" v-if="mp3">
    <img :src="voiceSrc" />
  </div>
</template>

<script>
export default {
  components: {},
  props: ["seconds", "mp3", "wav"],
  data() {
    return {
      audio: new Audio(),
      voiceSrc: "",
      voicePauseSrc: require("../../assets/common/icon-voice-red.png"),
      voicePlaySrc: require("../../assets/common/icon-voice-red-play.png"),
    };
  },
  computed: {},
  watch: {},
  //方法集合
  methods: {
    handlePlayVoice() {
      let _this = this;
      let audio = document.getElementsByTagName("audio");
      if(audio&&audio.length>0&&window.location.href.indexOf('GCLS-Learn')==-1){
        audio.forEach((item) => {
            if (item.src != _this.mp3) {
            item.pause();
            }
        });
      }
      if (!_this.audio.paused) {
        _this.audio.pause();
      } else {
        let _this = _this;
        _this.audio.pause();
        _this.audio.load();
        _this.audio.src = _this.mp3;
        _this.audio.loop = false;
        _this.audio.play();
      }
    },
    stopAudio() {
      if (this.audio) {
        this.audio.pause();
      }
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    var that = this;
    window.stopAudioVoice = function () {
      if (that.audio) {
        that.audio.pause();
      }
    };
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    let _this = this;
    _this.voiceSrc = _this.voicePauseSrc;
    _this.audio.addEventListener("play", function () {
      console.log("播放");
      _this.voiceSrc = _this.voicePlaySrc;
    });
    _this.audio.addEventListener("pause", function () {
      _this.voiceSrc = _this.voicePauseSrc;
    });
    _this.audio.addEventListener("ended", function () {
      console.log("停止");
      _this.voiceSrc = _this.voicePauseSrc;
    });
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.content-voices {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  font-size: 0;
  cursor: pointer;
  span {
    color: #2c2c2c;
    font-size: 24px;
    line-height: 30px;
    float: left;
    font-family: sourceR;
    &.noMp3 {
      margin-left: 0px;
    }
  }
  img {
    height: 24px;
    float: left;
  }
}
.questionMiddle {
  .content-voices {
    span {
      font-size: 16px;
      line-height: 20px;
      &.noMp3 {
        margin-left: 0px;
      }
    }
    img {
      height: 16px;
      float: left;
    }
  }
}
.questionSmall {
  .content-voices {
    span {
      font-size: 12px;
      line-height: 15px;
      &.noMp3 {
        margin-left: 0px;
      }
    }
    img {
      height: 12px;
      float: left;
    }
  }
}
</style>