vue 背景音乐

1、标签

 <div:class="[autoPlay ? 'run' : '', 'music_box']"@click="closeMusic"><i class="iconfont icon-yinle"></i></div>
<audioref="music"autoplaypreload="auto"loopid="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);}
}