<template>
<audio preload="auto" loop id="audio" :src="require('../../assets/mp3/214.mp3')"></audio>
<div @click="changeOn" :class="isOff?'isOff':'isOn'"></div>
</template>
data() {
return {
isOff:true
}
},
mounted() {
// 自动播放音乐效果,解决微信自动播放问题
document.addEventListener('touchstart',this.audioAutoPlay,false);
document.addEventListener('WeixinJSBridgeReady', this.audioAutoPlay,false);
let oAudio = document.querySelector("#audio");
oAudio.onended = function () {//播放完毕,重新循环播放
oAudio.load();
oAudio.play();
}
},
methods: {
changeOn(){
let oAudio = document.querySelector("#audio");
if(this.isOff){
oAudio.play();//让音频文件开始播放
}else{
oAudio.pause();//让音频文件暂停播放
}
this.isOff = !this.isOff;
},
audioAutoPlay() {
let audio = document.getElementById('audio');
this.isOff = false;
audio.play();
document.removeEventListener('touchstart',this.audioAutoPlay);
}
}
<style lang="less" scoped>
.isOn{
width: 28px;
height: 28px;
position: fixed;
z-index: 2000;
top: 20px;
left: 20px;
-webkit-animation: rotating 1.2s linear infinite;
animation: rotating 1.2s linear infinite;
background: url("../assets/images/play.png") 0 0 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: 28px;
height: 28px;
position: fixed;
z-index: 2000;
top: 20px;
left: 20px;
background: url("../assets/images/play.png") 0 -28px no-repeat;
background-size:100%;
}
</style>
bty…理论上vue是无法自动播放,需要借助微信的一个接口,注意在其他页面做监听无法接收到微信的回调,一定要在App.vue页面,放上这一段:
mounted() {
this.audioAutoPlay('audio');
// 自动播放音乐效果,解决微信自动播放问题
document.addEventListener('touchstart',this.audioAutoPlay,false);
document.addEventListener('WeixinJSBridgeReady', this.audioAutoPlay,false);
let oAudio = document.querySelector("#audio");
oAudio.onended = function () {//播放完毕,重新循环播放
oAudio.load();
oAudio.play();
}
},