vue 背景音乐

1、标签

 <div
            :class="[autoPlay ? 'run' : '', 'music_box']"
            @click="closeMusic"
          >
            <i class="iconfont icon-yinle"></i>
          </div>
<audio
      ref="music"
      autoplay
      preload="auto"
      loop
      id="music"
      :src="detail.music"
    ></audio>

2、自动播放

export default {
  data() {
    return {
      autoPlay: true, //
    }
},
mounted() {
    // 播放音乐
    document.addEventListener("DOMContentLoaded", function () {
      this.audioAutoPlay();
    });
  },
methods: {
   //音乐播放
    audioAutoPlay() {
      let audio = this.$refs.music;
      audio.play();
      document.addEventListener(
        "WeixinJSBridgeReady",
        function () {
          audio.play();
        },
        false
      );
    },
    //音乐暂停
    audioAutoPause() {
      let audio = this.$refs.music;
      audio.pause();
      document.addEventListener(
        "WeixinJSBridgeReady",
        function () {
          audio.pause();
        },
        false
      );
    },
    //音乐控制
    closeMusic() {
      this.autoPlay = !this.autoPlay;
      if (this.autoPlay) {
        //播放
        this.audioAutoPlay();
      } else {
        //暂停
        this.audioAutoPause();
      }
    },
},
beforeDestroy() {
   document.removeEventListener("DOMContentLoaded", () => {});
},
}

CSs

.music_box {
          border-radius: 50%;
          background: rgba(0, 0, 0, 0.4);
        }
        .left_item.run {
          animation: turn 10s linear infinite;
        }




@keyframes turn {
  0% {
    transform: rotate(0deg);
  }

  20% {
    transform: rotate(72deg);
  }

  40% {
    transform: rotate(144deg);
  }

  60% {
    transform: rotate(216deg);
  }

  80% {
    transform: rotate(288deg);
  }

  100% {
    transform: rotate(360deg);
  }
}