背景音乐播放实现（轻松学会）

html结构部分

---

 <!-- 上传音频不要过大 -->
 <audio
      id="audio"
      src="https://image1.guazistatic.com/qn210114171938ed9dcb199aaacb61474b26ad643ac2de.mp3">
 </audio>
 <!--  isOff默认是true -->
 <div @click="changeOn" :class="isOff ? 'isOff' : 'isOn'"></div>

script行为部分

---

export default {
    data() {
        return {
            isOff: false,
        };
    },
    mounted() {
        // 自动播放音乐效果，解决微信自动播放问题
        document.addEventListener('click', this.audioAutoPlay, false);
        document.addEventListener('WeixinJSBridgeReady', this.audioAutoPlay, false);
        let oAudio = document.querySelector('#audio');
        oAudio.onended = function () {
        // 播放完毕，重新循环播放
            oAudio.load();
            oAudio.play();
            if (!oAudio.paused) {
              this.isOff = false
            }
        };
    },
    methods: {
        changeOn() {
            let oAudio = document.querySelector('#audio');
            if (this.isOff) {
                oAudio.play();// 开始播放
            } else {
                oAudio.pause();// 暂停播放
            }
            this.isOff = !this.isOff;
        },
        audioAutoPlay() {
            if (this.isOff) {
              this.changeOn();
            }
            document.removeEventListener('click', this.audioAutoPlay);
        },

    },
};

css样式部分

---

/* 音乐播放 */
.isOn {
  width: 0.37rem;
  height: 0.37rem;
  position: fixed;
  z-index: 2000;
  top: 0.15rem;
  right: 0.32rem;
  -webkit-animation: rotating 1.2s linear infinite;
  animation: rotating 1.2s linear infinite;
  background: url("../assets/音乐播放.jpg") no-repeat;
  background-size: 100%;
}
/* 这个是音乐播放时旋转动画 */
@keyframes rotating {
  from {
    -webkit-transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
@-webkit-keyframes rotating {
  from {
    -webkit-transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}
.isOff {
  width: 0.37rem;
  height: 0.37rem;
  position: fixed;
  z-index: 2000;
  top: 0.15rem;
  right: 0.32rem;
  background: url("../assets/音乐禁止状态 拷贝@2x.png") no-repeat;
  background-size: 100%;
}