<template>
<div class="music_box" @click="handleSwitch">
<img
src="../assets/images/off_mp3.png"
alt=""
class="music rotate"
v-if="playIng"
/>
<img src="../assets/images/on_mp3.png" alt="" class="music" v-else />
</div>
</template>
<script>
import { Howl } from "howler";
let bgplayer = new Howl({
src: require("../assets/images/music.mp3"),
preload: true,
loop: true,
});
export default {
data() {
return {
playIng: false,
music: null,
};
},
mounted() {
var playAudio = () => {
bgplayer.play();
(this.playIng = true),
document.body.removeEventListener("click", playAudio);
document.body.removeEventListener("touchstart", playAudio);
};
document.body.addEventListener("click", playAudio);
document.body.addEventListener("touchstart", playAudio);
document.addEventListener("WeixinJSBridgeReady", () => {
setTimeout(() => {
playAudio();
}, 300);
});
document.addEventListener("YixinJSBridgeReady", playAudio);
},
methods: {
handleSwitch() {
if (this.playIng) {
this.playIng = false;
bgplayer.pause();
} else {
this.playIng = true;
bgplayer.play();
}
},
},
};
</script>
<style lang='scss' scoped>
.music_box {
position: absolute;
top: 6vh;
right: 0.5rem;
width: 0.5rem;
height: 0.5rem;
z-index: 999999999;
img {
width: 100%;
position: absolute;
top: 0;
left: 0;
}
.rotate {
animation: identifier 1.8s infinite linear;
}
}
@keyframes identifier {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
howler.js
dithub地址
简介
