audio.vue 1.85 KB
Newer Older
hanjixin committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84
<template>
  <div>
      <img
        src='../assets/img/music_icon.png'
        alt
        :class="{
            'runAnimation': isPlay,
            'stopAnimation': !isPlay
        }"
        @click="playAudio"
        style="
        width: 33.5476px;
        height: 33.5476px;
        right: 16.875px;
        top: 16.875px;
        opacity: 1;
        position: absolute;
        display: block;
        z-index: 1000000;
        transform-origin: center center;
        animation: 5s linear 0s infinite normal forwards running rotateRound;
        touch-action: pan-y;
        user-select: none;
        -webkit-user-drag: none;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    "
    />
    <audio id="bgMp3" src='../assets/bg.mp3' preload  loop></audio>
  </div>
  
</template>

<script>
export default {
    data() {
        return {
            isPlay: false
        }
    },
    methods: {
      playAudio() {
        var audio =  document.querySelector('#bgMp3')
        if(audio.paused){
          this.isPlay = true
          audio.play();
          return;
        } else {
           this.isPlay = false
          audio.pause();
        }
      }
    },
    mounted () {
        var audio =  document.querySelector('#bgMp3')
        var _this = this
        document.addEventListener("WeixinJSBridgeReady", function () {
           window.WeixinJSBridge.invoke('getNetworkType', {}, function () {
                audio.play();
                _this.isPlay = true
            });
        }, false);
        console.log(audio.paused)
        audio.play();
        this.isPlay = true
    }
};
</script>

<style lang="scss">
@keyframes rotateRound {
  0% {
    transform: rotateZ(0deg);
  }
  100% {
    transform: rotateZ(360deg);
  }
}
.stopAnimation {
    animation-play-state: paused !important;
}
.runAnimation {
    animation-play-state: running !important;
}
</style>