GCLS_Page_Book/src/components/common/Audio.vue

<!--  -->
<template>
  <div
    @click="handlePlayVoice"
    :class="fontSize == 20 ? 'questionSmall' : 'content-voice'"
    v-if="pinyin || mp3"
  >
    <span :class="mp3 ? '' : 'noMp3'" v-if="pinyin">{{ pinyin }}</span>
    <template v-if="mp3">
      <img :src="voiceSrc" />
      <!-- <audio :src="mp3" ref="curMp3"></audio> -->
    </template>
  </div>
</template>

<script>
export default {
  components: {},
  props: ["pinyin", "mp3", "fontSize"],
  data() {
    return {
      audio: new Audio(),
      voiceSrc: "",
      voicePauseSrc: require("../../assets/single/icon-voice.png"),
      voicePlaySrc: require("../../assets/common/icon-voice-play.png"),
    };
  },
  computed: {},
  watch: {},
  //方法集合
  methods: {
    handlePlayVoice() {
      let _this = this;
      if (!_this.mp3) {
        return;
      }
      if (!this.audio.paused) {
        this.audio.pause();
      } else {
        _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.stopAudioAudio = 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-voice {
  display: inline-block;
  padding: 12px 36px;
  background: #ffffff;
  border-radius: 36px;
  height: 72px;
  margin: 0 auto 24px auto;
  font-size: 0;
  cursor: pointer;
  box-sizing: border-box;
  &-20 {
    span {
      color: #404040;
      font-size: 40px;
      line-height: 48px;
      float: left;
      margin-right: 24px;
      font-family: GB-PINYINOK-B;
      &.noMp3 {
        margin-right: 0px;
      }
    }
    img {
      height: 48px;
      float: left;
      padding-top: 0px;
    }
  }
  span {
    color: #404040;
    font-size: 40px;
    line-height: 48px;
    float: left;
    margin-right: 24px;
    font-family: GB-PINYINOK-B;
    &.noMp3 {
      margin-right: 0px;
    }
  }
  img {
    height: 48px;
    float: left;
    padding-top: 0px;
  }
}
.questionMiddle {
  .content-voice {
    padding: 8px 24px;
    border-radius: 24px;
    height: 48px;
    margin: 0 auto 16px auto;
    span {
      font-size: 26px;
      line-height: 30px;
      margin-right: 16px;
      &.noMp3 {
        margin-right: 0px;
      }
    }
    img {
      height: 32px;
    }
  }
}
.questionSmall {
  .content-voice {
    padding: 6px 18px;
    border-radius: 18px;
    height: 36px;
    margin: 0 auto 12px auto;
    span {
      font-size: 20px;
      line-height: 24px;
      margin-right: 12px;
      &.noMp3 {
        margin-right: 0px;
      }
    }
    img {
      height: 24px;
    }
  }
}
</style>