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);
}
}