H5 背景音乐自动播放（兼容IOS和Android）

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/diaoweixiao/article/details/87902213

首先看下效果图：

要实现的效果：
1.小icon自动旋转
2.音乐自动播放

一. 小icon css 自动无限旋转

<img class='musicImg' src='' />
.musicImg{animation:xz 1s linear infinite;}
@keyframes xz{
from  {transform:rotate(0deg);}
to{transform:rotate(360deg);}
}

二. vue 音乐自动播放（想要让背景音乐自动播放，并且不受页面滑动切换的影响，这部分代码一定是放在公共的地方的，所以我选择把这部分代码放在App.vue中）

<!--  android autoplay属性的设置就会自动播放该音乐  -->
<audio id="music" preload loop="loop" autoplay src=''></audio>
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
function autoPlayVideo(){
   wx.config({
         debug:false,
         appId:"",
         timestamp:1,
         nonceStr:"",
         signature:"",
         jsApiList:[]
     });
     wx.ready(function(){
         var autoplayVideo = document.getElementById("music");
         autoplayVideo.play()
     })
 };
 autoPlayVideo();