【需求】h5页面添加背景音乐，支持微信、QQ、各种APP。
【实现思路】1、通过audio标签，设置自动播放，是一种方法，但是此方法只适合微信、QQ，并不兼容我司的APP，需要主动触发下播放事件。
2、针对可以自动播放的渠道，通过this.audio.addEventListene监听playing事件，控制小喇叭的状态。
【知识点】audio标签、addEventListener、classList
【代码】封装了一个公共组件：
<template>
<div class="music">
<audio src={{musicsrc}} id="Jaudio" class="media-audio" preload loop="loop" hidden="false"></audio>
<div class="icon"></div>
</div>
</template>
<script>
/* eslint-disable */
export default{
data() {
return {}
},
props: {
musicsrc: {}
},
methods: {
// 音乐背景
play() {
this.audio.play()
this.icon.classList.add('play');
this.icon.classList.remove('stop');
},
stop() {
this.audio.pause()
this.icon.classList.add('stop');
this.icon.classList.remove('play');
},
audioAutoPlay() {
this.audio.play();
var that=this;
//控制小喇叭的播放状态
this.audio.addEventListener("playing", function(){
that.icon.classList.add('play');
that.icon.classList.remove('stop');
});
this.audio.addEventListener("pause", function(){
that.icon.classList.add('stop');
that.icon.classList.remove('play');
});
document.addEventListener("WeixinJSBridgeReady", function () {
that.audio.play();
this.icon.classList.add('play');
this.icon.classList.remove('stop');
}, false);
this.icon.addEventListener("click", () => {
if (this.audio.paused) {
this.play()
} else {
this.stop()
}
}, false);
// 触发播放音乐效果，解决浏览器或者APP自动播放问题
document.addEventListener("touchstart", () => {
if(!this.isPlay) {
this.play();
this.isPlay = true;
}
}, false)
}, },
ready() {
this.audio = window.document.querySelector('.media-audio');
this.icon = window.document.querySelector('.icon');
this.audioAutoPlay();
}
}
</script>
<style rel="stylesheet/scss" lang="scss">
.music {
position:fixed;
z-index:1000;
top:50px;
right:20px; .icon{
width:60px;
height:50px;
background:url('https://img.zhankr.net/5v2k3yr1hla74037.png') no-repeat;
background-size: 100%;
&.play{
animation: 4s linear 0s normal none infinite rotate;
// animation-fill-mode:forwards;
// animation-play-state: running;
}
&.stop{
// animation: 4s linear 0s normal none infinite rotate;
// animation-fill-mode:forwards;
// animation-play-state: paused;
}
}
} @keyframes rotate{
from{transform:rotate(0deg)}
to{transform:rotate(360deg)}
}
</style>
组件调用：
<template>
<bgmusic :musicsrc='musicbg'></bgmusic>
</template>
<script>
import bgmusic from '../../components/music/bgmusic.vue' export default {
data() {
return {
musicbg: "../../assets/music/musicbg.mp3",
}
}
} </script>
